SecurityError: Blocked a frame with origin from accessing a cross-origin frame
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
I am loading an in my HTML page and trying to access the elements within it using Javascript, but when I try to execute my code, I get the following error:
SecurityError: Blocked a frame with origin "http://www..com" from accessing a cross-origin frame.
Can you please help me to find a solution so that I can access the elements in the frame?
I am using this code for testing, but in vain:
$(document).ready(function() { var iframeWindow = document.getElementById("my-iframe-id").contentWindow; iframeWindow.addEventListener("load", function() { var doc = iframe.contentDocument || iframe.contentWindow.document; var target = doc.getElementById("my-target-id"); target.innerHTML = "Found it!"; }); });
回答1:
Same-origin security policy
You can't access an with Javascript, it would be a huge security flaw if you could do it. For the same-origin policybrowsers block scripts trying to access a frame with a different origin.
Origin is considered different if at least one of the following parts of the address isn't maintained:
://:/path/to/page.html
Protocol, hostname and port must be the same of your domain, if you want to access a frame.
Examples
Here's what would happen trying to access the following URLs from http://www.example.com/home/index.html
URL RESULT http://www.example.com/home/other.html -> Success http://www.example.com/dir/inner/another.php -> Success http://www.example.com:80 -> Success (default port for HTTP) http://www.example.com:2251 -> Failure: different port http://data.example.com/dir/other.html -> Failure: different hostname https://www.example.com/home/index.html.html -> Failure: different protocol ftp://www.example.com:21 -> Failure: different protocol & port https://google.com/search?q=james+bond -> Failure: different hostname & protocol
Workaround
Even though same-origin policy blocks scripts from accessing the content of sites with a different origin, if you own both the pages, you can work around this problem using window.postMessage and its relative message event to send messages between the two pages, like this:
In your main page:
var frame = document.getElementById('your-frame-id'); frame.contentWindow.postMessage(/*any variable or object here*/, '*');
In your (contained in the main page):
window.addEventListener('message', function(event) { // IMPORTANT: Check the origin of the data! if (~event.origin.indexOf('http://yoursite.com')) { // The data has been sent from your site // The data sent with postMessage is stored in event.data console.log(event.data); } else { // The data hasn't been sent from your site! // Be careful! Do not use it. return; } });
This method can be applied in both directions, creating a listener in the main page too, and receiving responses from the frame. The same logic can also be implemented in pop-ups and basically any new window generated by the main page (e.g. using window.open()) as well, without any difference.
Disabling same-origin policy in your browser
There already are some good answers about this topic (I just found them googling), so, for the browsers where this is possible, I'll link the relative answer. However, please remember that disabling the same-origin policy (or the CORS) will only affect your browser. Also, running a browser with same-origin security settings disabled grants any website access to cross-origin resources, so it's very unsafe and should be done for development purposes only.
Check the domain's web server for http://www..com configuration for X-Frame-Options It is a security feature designed to prevent clickJacking attacks,
How Does clickJacking work?
The evil page looks exactly like the victim page.
Then it tricked users to enter their username and password.
Technically the evil has an iframe with the source to the victim page.
x-frame-options
X-Frame-Options DENY
The options are:
SAMEORIGIN //allow only to my own domain render my HTML inside an iframe.
DENY //do not allow my HTML to be rendered inside any iframe
"ALLOW-FROM https://example.com/" //allow specific domain to render my HTML inside an iframe
This is IIS config example:
The solution to the question
If the web server activated the security feature it may cause a client-side SecurityError as it should.
回答4:
For me i wanted to implement a 2-way handshake, meaning: - the parent window will load faster then the iframe - the iframe should talk to the parent window as soon as its ready - the parent is ready to receive the iframe message and replay
this code is used to set white label in the iframe using [CSS custom property] code: iframe