Javascript 和同源 iframe答案

【问题标题】：Javascript and same origin iframesJavascript 和同源 iframe
【发布时间】：2011-02-11 00:15:26
【问题描述】：

是否可以使用页面上但该框架之外的脚本来读取/编辑 iframe 内容（不仅是像 src 这样的属性）？我知道如果来源来自其他网站是不可能的，因为这将是一个很大的安全漏洞，但我只问它是否适用于来自同一来源的其他内容。

【问题讨论】：

【解决方案1】：

是的，如果 iframe 和父页面的位置属于同一主机（相同的来源策略），您可以执行此操作。

为确保浏览器允许您执行此操作，您可以使用

document.domain = "example.com"

在父页面和 iframe 中。（注意 subdomain.example.com 和 example.com 是不同的）

执行此操作的 Dom 方法（iframe 的父页面）：

document.getElementById("myiframe").contentWindow.document.getElementById("divinframe").innerHTML = "I'm on the inside.";

document.getElementById("myiframe").contentWindow.someFunctionInsideIframe();

contentWindow 是答案，适用于大多数（如果不是所有）现代浏览器，当然包括 chrome、ie7+ 等。

另辟蹊径（iframe 到父页面）：

top.document.getElementById("DivInTopParent")

【讨论】：

【解决方案2】：

要补充关于与从同一域加载的 iframe 交互的内容：

浏览器将允许您与 iframe（或框架）进行交互，只要尝试进行交互的页面和您加载的页面具有相同的 document.domain。

您可以将 document.domain 设置为您从中加载的主机的后缀。例如如果你有一个从 blog.fred.com 加载的页面，并且它想与一些名为 jsonservice.fred.com 的服务进行交互，那么两个页面都必须这样做

document.domain = 'fred.com';

在一个人的 javascript 能够与另一个人交互之前。

浏览器足够聪明，不允许您将 document.domain 设置为“.com”，以防您想知道...

【讨论】：

【解决方案3】：

如果 iframe 内容来自同一个域，您可以使用 frames.myiframe.getElement... 访问它

【讨论】：

【解决方案4】：

浏览器仅限制对来自不同域的内容的 iframe/父内容的访问。对于来自同一域的请求，您可以通过window.parent 或myiframe.document.getElementById 访问内容

【讨论】：

【解决方案5】：

这不完全是客户端/javascript 解决方案，但它帮助我解决了问题。

您需要删除X-Frame-Options 标头（如果存在），而是为 iframe 页面发送以下标头：

Content-Security-Policy: frame-ancestors 'self' example.com *.example.com

还有一个用于 IE 的：

X-Content-Security-Policy: frame-ancestors 'self' example.com *.example.com

【讨论】：