i want to add css styles for embedded form from pipedrive (it embeded as iFrame).
I cant add styles by javascript, because i get security error: Blocked a frame with origin "https://my-site.com/" from accessing a cross-origin frame.
Related
I want to create an html page and use it in the src attribute of the amp-iframe tag.
The amp-iframe tag then (as i understood from some examples) creates the iframe and loads the html page.
In drupal though, i can not find a way to use this html page in a twig template.
Is there a way to find a path inside drupal for this html page and use this path in the src?
I know drupal works with templates and twig files but in the amp examples everyone uses html.
Problem could be that you're trying to add amp-iframe content that's on the same origin as your page domain. That's forbidden for security reasons (mostly to do with the way the same-origin policy uses synthetic origins inside iframes).
The fix is to make sure that external JS is served from a different origin to your AMP. So if your AMPs are on example.com then you should serve the iframed JS from SOMEOTHERORIGIN.example.com
Share your code for better under standing of your issue.
Also refer - https://github.com/ampproject/amphtml/blob/master/spec/amp-iframe-origin-policy.md
i am trying to modify the website that i am getting in the iframe, and i get this error:
Uncaught DOMException: Blocked a frame with origin "http://becutan.st2" from accessing a cross-origin frame.
at contents (http://becutan.st2/js/jquery-1.11.3.js:3048:60)
at Function.map (http://becutan.st2/js/jquery-1.11.3.js:503:29).
so, maybe i can modify with css ? Is css also blocked ?
The website you're trying to display has blocked beeing displayed in an iframe.
There's nothing you can do about that, sorry.
I'm trying to load in an external font (using the font provider's hosted CSS) from inside a sandboxed iframe. The font provider seems to be authorizing whether the font can load or not based on the contents of the Referrer header. However, when the request is made from inside the iframe, that header is not present (according to Chrome's devtools). Setting referrerpolicy="origin" on the <iframe> element doesn't seem to change anything. Tested in Chrome and Firefox.
Do I need to add a special attribute to my <link> tag, too? Is there something else I'm missing?
I am building a Chrome extensions which injects a decent amount of JavaScript, CSS, and HTML into the page DOM for the current webpage tab. It it does so to show a Modal window with my extensions functionality in that modal.
I cannot use the background or popup scripts to do what I need to do so I have to use a content script which injects into the actual page DOM.
My issue so far is I have to be super careful with CSS class names and JS as well as I have discovered if the page has a CSS class matching the name of any of my extensions CSS, my extensions ends up over-riding the pages CSS!
I have seen that some other extensions that have to do a lot of HTML, CSS, JS into the content end up injecting into there own Iframe in the page which helps prevent this name collision.
Is using an Iframe the standard best practice in this case?
One of the features in my extensions is to do full-page screeenshots which require my contnet.js script to send a message to my background.js script which is responsibble for calling the CHrome API and taking the screenshot of the current scroll position in the pages viewport.
user clicks button in DOM modal windows
content.js sends message to background.js with the coordinates of the viewport.
background.js takes the screenshot with those coordinates. THen sends a message back to content.js.
content.js then scrolls down the page to the next area of the viewport for the next screenshot and then sends those new coordinates back to background.js.
this cycle continues until a shot of the whole page is made and stiched together and then sends back the URL of the new image to content.js when done.
Because both the Chrome API needs to sends messages back and forth between my content.js and background.js and then also if there is an iframe the iframe has to send messages back and forth with the page and the iframe.
Because of this I am not sure if I could use an iframe or not even?
Also if I did use an iframe, it would not load the content from a remote server but instead would be loaded into the page as html.
So is there a best practice for doing this?
Use inline styles instead
You can wrap your css in content.js then apply it to your target elements, it won't interfer the original design of the webpage
Use Shadow DOM
It provides encapsulation for js/css and makes it easy to ensure your components separate from the DOM of the main document.
I am trying to find the css file of instagram login page.but i can't find it!
usually when we view the page source of a webpage we can find the css file in html head .but how find it for instagram login page?
Instagram uses Isostyle CSS plugin and the style sheets are appended with a unique id.
With isostyle you can use the require() function also with CSS and
LESS files. Note that when you use the require function, automatically
it will add the stylesheet to the dom with an identifier
(data-isostyle-id).
Instagram CSS with identifiers:
So in the browser, the styles are not visible in a single file but multiple CSS blocks.