Javascript 未捕获的安全错误：无法从“HTMLIFrameElement”中读取“contentDocument”属性：阻止了源为“https://localhost”的框架
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28272933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "https://localhost"
提问by Surendhar Natarajan
I am facing below issue while trying to capture click events of G + follow button.
我在尝试捕获 G + 关注按钮的点击事件时遇到以下问题。
Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "https://localhost" from accessing a frame with origin "https://apis.google.com". Protocols, domains, and ports must match.
未捕获的安全错误：无法从“HTMLIFrameElement”读取“contentDocument”属性：阻止了来源为“ https://localhost”的框架访问来源为“ https://apis.google.com”的框架。协议、域和端口必须匹配。
回答by Jonast92
I found a similar discussion, Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFram.
我发现了一个类似的讨论，Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFram。
This issue fired when you try to call ajax to another domain, please check this article for more info about Same origin policy
当您尝试将 ajax 调用到另一个域时会触发此问题，请查看此文章以获取有关同源策略的更多信息
For fix this, you will need to add this code
要解决此问题，您需要添加此代码
document.domain = 'yourdomain.com'
From the article itself:
从文章本身：
A page may change its own origin with some limitations. A script can set the value of document.domain to a subset of the current domain. If it does so, the shorter domain is used for subsequent origin checks. For example, assume a script in the document at http://store.company.com/dir/other.htmlexecutes the following statement:
一个页面可能会改变它自己的来源，但有一些限制。脚本可以将 document.domain 的值设置为当前域的子集。如果是这样，较短的域将用于后续的源检查。例如，假设http://store.company.com/dir/other.html文档中的脚本执行以下语句：
document.domain = "company.com";
After that statement executes, the page would pass the origin check with http://company.com/dir/page.html. However, by the same reasoning, company.com could not set document.domain to othercompany.com.
The port number is kept separately by the browser. Any call to the setter, including document.domain = document.domain causes the port number to be overwritten with null. Therefore one cannot make company.com:8080 talk to company.com by only setting document.domain = "company.com" in the first. It has to be set in both so that port numbers are both null.
执行该语句后，页面将通过http://company.com/dir/page.html的来源检查。但是，出于同样的原因，company.com 无法将 document.domain 设置为 othercompany.com。
端口号由浏览器单独保存。任何对 setter 的调用，包括 document.domain = document.domain 都会导致端口号被 null 覆盖。因此，不能仅通过在第一个中设置 document.domain = "company.com" 来使 company.com:8080 与 company.com 对话。它必须在两者中设置，以便端口号都为空。
回答by Ebru Yener
My solution reconstructs the iframe and usable in angular. When we construct an iframe, it requires origin security check to modify iframe content. This solution allows us to recreate iframe content several times.
我的解决方案重建了 iframe 并可以在 angular 中使用。我们在构建 iframe 时，需要进行 origin 安全检查才能修改 iframe 内容。此解决方案允许我们多次重新创建 iframe 内容。
HTML
HTML
<div id="iframecontainer"></div>
JS
JS
var content = "<h1>Content inside Iframe</h1>"; //desired content of iframe
var iframecontainer = document.getElementById("iframecontainer");
iframecontainer.innerHTML ='<iframe id="threedsframe" width="%90" height="400px"></iframe>';
var iframe = iframecontainer.childNodes[0];
let doc = iframe.contentDocument || iframe.contentWindow;
doc.open();
doc.write(content);
doc.close();
