SecurityError：阻止具有原点的帧访问跨源帧 [英] SecurityError: Blocked a frame with origin from accessing a cross-origin frame

问题描述

我在我的HTML页面中加载< iframe> 并尝试使用Javascript访问其中的元素，但当我尝试执行我的代码时，我得到了以下错误：

  SecurityError：阻止了一个原始框架http：//www.< ; domain> .com访问跨源框架。 
  

您能帮我找一个解决方案，以便我可以访问框架中的元素吗？ / p>

我使用此代码进行测试，但是徒劳无功：

  $（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 =找到它！; 
}）; 
}）; 
  

解决方案

同源政策

^{不要与 CORS混淆！}

您无法访问< iframe> 使用JavaScript的不同来源，如果你能做到这将是一个巨大的安全漏洞。对于同源策略 浏览器阻止尝试访问具有不同来源的框架的脚本。

如果不维护地址的以下部分中的至少一个，则认为原点不同：

 < protocol>：//< hostname>：< port> /path/to/page.html 
  

协议，主机名和端口必须与您的域名，如果您想访问一个框架。

示例

以下是尝试从 http访问以下网址时会发生的情况： //www.example.com/home/index.html

  URL结果
 http://www.example.com/home/other.html  - >成功
 http://www.example.com/dir/inner/another.php  - >成功
 http://www.example.com:80  - >成功（HTTP的默认端口）
 http://www.example.com:2251  - >失败：不同的端口
 http://data.example.com/dir/other.html  - >失败：不同的主机名
 https://www.example.com/home/index.html.html  - >失败：不同的协议
 ftp://www.example.com:21  - >失败：不同的协议& port 
 https://google.com/search?q=james+bond  - >失败：不同的主机名和协议
  

解决方法

即使相同 - origin策略阻止脚本访问具有不同来源的网站内容，如果您拥有这两个页面，则可以使用 window.postMessage 及其相对消息 event 在两个页面之间发送消息，如下所示：

• 在您的主页面中：

    var frame = document.getElementById（'your-frame-id'）; 
   
   frame.contentWindow.postMessage（/ *这里的任何变量或对象* /，'*'）; 
    




• 在< iframe> （包含在主页中）：

    window.addEventListener（'message'，function（event）{
   
   //重要提示：检查数据来源！
   if（~event.origin.indexOf（'http://yoursite.com'））{
   //数据已被从您的网站发送
   
   //使用postMessage发送的数据存储在event.data 
   console.log（event.data）; 
  } else {
   / /数据尚未从您的网站发送！
   //小心！不要使用它。
   return; 
  } 
  }）; 
    

此方法可应用于两个方向，也在主页面中创建一个监听器，并从帧接收响应。同样的逻辑也可以在弹出窗口中实现，基本上是由主页面生成的任何新窗口（例如使用 window.open（） ），没有任何区别。

在你的浏览器中禁用同源策略

关于这个主题已经有一些很好的答案（我刚发现它们在谷歌搜索）因此，对于可能的浏览器，我将链接相关答案。但是，请记住禁用同源策略（或CORS）只会影响您的浏览器。此外，运行禁用同源安全设置的浏览器会授予任何网站对跨源资源的访问权限，因此非常不安全，应仅用于开发目的。

• 谷歌浏览器


• Mozilla Firefox


• Apple Safari：不可能，仅限CORS 。


• Opera：不可能。


• Microsoft Edge：不可能。


• Microsoft Internet Explorer：不可能，仅限CORS 。

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!";
    });
});

解决方案

Same-origin policy

^{Not to be confused with CORS!}

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>/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 <iframe> (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.

• Google Chrome
• Mozilla Firefox
• Apple Safari: not possible, only CORS.
• Opera: not possible.
• Microsoft Edge: not possible.
• Microsoft Internet Explorer: not possible, only CORS.

这篇关于SecurityError：阻止具有原点的帧访问跨源帧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！