SecurityError:阻止了一个具有源的框架访问跨源框架 [英] SecurityError: Blocked a frame with origin from accessing a cross-origin frame

问题描述

我正在 HTML 页面中加载 <iframe> 并尝试使用 Javascript 访问其中的元素，但是当我尝试执行我的代码时，出现以下错误:

I am loading an <iframe> 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.<domain>.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!";
    });
});

推荐答案

同源策略

您不能使用JavaScript访问具有不同来源的<iframe>，如果您可以这样做，这将是一个巨大的安全漏洞.对于同源政策 浏览器块尝试访问具有不同来源的框架的脚本.

Same-origin policy

You can't access an <iframe> with different origin using JavaScript, it would be a huge security flaw if you could do it. For the same-origin policy browsers 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:

protocol://hostname:port/...

如果要访问框架，协议、主机名和端口必须与您的域相同.

Protocol, hostname and port must be the same of your domain if you want to access a frame.

^{注意:众所周知，Internet Explorer 并未严格遵守此规则，请参阅 此处了解详情.}

^{NOTE: Internet Explorer is known to not strictly follow this rule, see here for details.}

以下是尝试从 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:80   -> Failure: different protocol
ftp://www.example.com:21                     -> Failure: different protocol & port 
https://google.com/search?q=james+bond       -> Failure: different protocol, port & hostname 

解决方法

即使同源策略阻止脚本访问具有不同来源的站点的内容，如果您拥有这两个页面，您可以使用 window.postMessage 及其相关的 message 事件 在两个页面之间发送消息，像这样:

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:

const frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');

postMessage() 的第二个参数可以是 '*' 表示没有对目的地来源的偏好.在可能的情况下，应始终提供目标来源，以避免泄露您发送到任何其他网站的数据.

The second argument to postMessage() can be '*' to indicate no preference about the origin of the destination. A target origin should always be provided when possible, to avoid disclosing the data you send to any other site.

在您的