错误：拒绝访问属性“document”。

Question

错误：拒绝访问属性“document”。

40

我有一个包含iframe的HTML文档。每当我尝试使用JS访问或修改此iframe时，我会收到Error: Permission denied to access property "document"错误。

我正在使用frame.contentWindow.document.body.innerHTML 或 frame.contentWindow.document.body.onload 或类似这样的属性来访问或修改iframe。（在给定的代码中，iframe被称为frame。）

对于我正在开发的Web应用程序，访问这些属性是必要的，我不能没有这些（或类似的替代方案）。

- sbrm1

3个回答

19

即使您无法访问接收窗口的标题部分，仍可以借助YQL解决此问题。使用Postmessage方法时，您还需要编辑接收方窗口脚本。但是使用此方法，您可以加载任何iframe而无需触及其脚本。看看这个！

<html>
<iframe src="https://google.com/" width="500" height="300"></iframe>

<script>
var iframe = document.getElementsByTagName('iframe')[0];
var url = iframe.src;
var getData = function (data) {
    if (data && data.query && data.query.results && data.query.results.resources && data.query.results.resources.content && data.query.results.resources.status == 200) loadHTML(data.query.results.resources.content);
    else if (data && data.error && data.error.description) loadHTML(data.error.description);
    else loadHTML('Error: Cannot load ' + url);
};
var loadURL = function (src) {
    url = src;
    var script = document.createElement('script');
    script.src = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20data.headers%20where%20url%3D%22' + encodeURIComponent(url) + '%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=getData';
    document.body.appendChild(script);
};
var loadHTML = function (html) {
    iframe.src = 'about:blank';
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write(html.replace(/<head>/i, '<head><base href="' + url + '"><scr' + 'ipt>document.addEventListener("click", function(e) { if(e.target && e.target.nodeName == "A") { e.preventDefault(); parent.loadURL(e.target.href); } });</scr' + 'ipt>'));
    iframe.contentWindow.document.close();
}

loadURL(iframe.src);
</script>
</html>

- Gihan Gamage

3

我对这个绕过技术印象深刻。在演示跨框架脚本攻击漏洞时，它应该被使用。 - Aday

当然！那部分是由雅虎API处理的 :) - Gihan Gamage

但是我无法使用上述答案中的方法 iframe.contentWindow.document.body.scrollHeight。你能帮我吗？ - Ranganathan

2

从2019年1月起，雅虎已停止使用yql。您现在可能需要使用一些替代方案。 - Sagar Solanki

@Sagar Solanki 有哪些替代方案可以使用？ - Filip Š

@FilipŠ 我还没有尝试过任何东西！也许你可以看一下 https://news.ycombinator.com/item?id=18785255 或 https://siftery.com/yahoo-query-language-yql/alternatives - Sagar Solanki

13

你可以使用postMessage。

窗口1 - 接收

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  var origin = event.origin || event.originalEvent.origin; 
  // For Chrome, the origin property is in the event.originalEvent object.
  if (origin !== "http://example.org:8080")
    return;

  // ...
}

窗口 - 2 发送

var popup = window.open(...popup details...);
popup.postMessage(
       "The user is 'bob' and the password is 'secret'", 
       "https://secure.example.net"
);

你需要创建另一对来进行相互通信。

- joyBlanks

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sbrm1 · Accepted Answer

访问并修改其他网站的iframe中的网页被称为跨站脚本攻击或XSS，这是恶意黑客用来攻击毫不知情的受害者的技术。

浏览器制造商实施了名为“同源策略”的政策，以防止这种行为和任意执行JS代码。

可以通过在相同的域名和子域名下托管父文档和iframe中的文档，并确保使用相同的协议加载文档来防止此错误。

不兼容页面的示例：

http://www.example.org和http://www.example2.com
http://abc.example.org和http://xyz.example.com
http://www.example.org和https://www.example.com

跨域资源共享是解决这个问题的一种方法。

例如：
如果http://www.example.com想与http://www.example.org共享http://www.example.com/hello，则可以在文档中发送一个标题，该标题如下所示：

Access-Control-Allow-Origin: http://www.example.org

如果要使用HTML发送它，只需将其放在<META HTTP-EQUIV="...">标签中，像这样：

<head>
    ...
    <META HTTP-EQUIV="Access-Control-Allow-Origin" CONTENT="http://www.example.org">
    ...
</head>