I have an iframe - the iframe works when the src points to a page on the same server, allowing me to embed pages.
The same iframe will not allow me to embed pages from another server. I have tried different src= pages and different browsers on Windows, OSX and Linux. I have tried hard-coding the src attribute and setting it programatically.
I haven't worked w html for years and know click-jacking has caused some hosts to disallow their content but am confident this is not the issue.
<iframe src='myPage.html' name='i' id='i'></iframe>
works as expected
<iframe src='http://theirServer/theirPage.html' name='i' id='i'>
</frame>
does not work as expected
Not all sites allow you to embed them via iframe (such as google). if using Chrome, check your console. If you have an error like "Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'." then the site does not allow you to embed it.
Basically if the site uses the header X-Frame-Options, and has it set to SAMEORIGIN, there's nothing you can do.
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 have a page where I have an iframe using the following code.
<iframe name="SL" src="https://sl.se/sv/" width="100%" height="870px"></iframe>
It has been working without any problems, but yesterday it became a blank page in the iframe. I haven't updated anything in the page so it must be something in the iframe src that is blocking for some reason. Is there another way to get this page to show inside like an iframe, but with some other code?
If you see the console of your browser, it says:
Refused to display 'https://sl.se/sv/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
which means that they have disallowed loading of the resource in an iframe outside of their domain. For more information take a look at this.
I'm currently making an Iframe using javascript but when I try to access the iFrame using myIframe.contentWindow.document I receive the following error:
DOMException: Blocked a frame with origin "http://localhost:8082" from accessing a cross-origin frame.
You cannot edit the contents of an iframe for security purposes. It seems like you might be trying to set content in the iframe since the cross-origin error is being thrown. You can copy the contents of the iframe to another object then edit it.
Things to consider if this is true...
Use AJAX via jQuery.. How to copy iframe content to div?
If using Chrome, understand that Chrome does not support local CORS... Deadly CORS when http://localhost is the origin
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 want to apply css to google calender iframe. I had tried with Jquery but it gives JavaScript security error. However I also tried this link
Got success but many of its links goes to 404 page as it takes my domain as base URL
You will face a security error when you apply css using javascript to an iframe that contains a page in a different domain. but this problem has a workaround by using document.domain if both documents are on the same top level domain, are using the same protocol & you can add the following line of JavaScript to the page in the iframe:
document.domain = "example.com";
the page containing the iframe needs the same line to make the domains match. Once this is in place, the script running on your main page is allowed to access properties of the document in the iframe element –
You cannot apply css to a iFrame ...
An iframe is a 'hole' in your page that displays another web page
inside of it. The contents of the iframe is not in any shape or form
part of your parent page.
From here
The reason behind that is security. If you have blabla.com in one
window and gmail.com in another one, then you’d not want a script from
blabla.com to access or modify your mail or run actions in context of
gmail on your behalf.
From here
If the iFrame is on the same domain and it doesnt violate the "Same-origin policy", you can work around this situation like this:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .my-class{display:none;} </style>"));
});
Solution posted here
Anyway, if you are not violating the "Same-orgin policy", you probably don't want to use an iFrame.