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.
Related
I added an iFrame to my Component (Vaadin 14), but the iFrame is empty. Here is my Code, i have also tried it without the DIV but it wont work. There is also no error message, does any one has a hint?
Div div = new Div();
IFrame iFrame = new IFrame("https://google.de");
iFrame.setHeight("315px");
iFrame.setWidth("560px");
iFrame.getElement().setAttribute("frameborder", "1");
div.add(iFrame);
dialogContent.add(div);
If you look at Chrome dev tools and the console, you will see
Refused to display 'https://www.google.de/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
which means that Google does not allow you to show www.google.de in an iframe.
If you change the URL to e.g. http://www.example.com/ and make no other changes, it works.
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 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 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.
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.