javascript - JavaScript 可以读取 iframe 的内容吗？

Question

JavaScript 是否可以读取嵌入同一页面的 iframe 的内容？

如果是的话，那么同源策略可以被绕过吗？我知道 XMLHttpRequest；它不能用于通过同源策略(例如 HTTP GET 请求)从其他站点获取数据。

读取 iframe 的内容将有效地提供与(不受限制的)XMLHttpRequest 从任意网站获取资源相同的功能？

Answer 1

简短的回答是，JavaScript 只能查看来自同一域的 iframe。因此，不，您不能使用 iframe 获得不受限制的跨域访问。

更长的答案是，如果您想自己测试一下，请安装一个简单的网络服务器。您将需要 < 2 分钟。 Here's a bunch

编辑/etc/hosts 文件或 C:\Windows\System32\Drivers\etc\hosts 文件并添加

127.0.0.1  first.com
127.0.0.1  second.com

创建一个包含index.html 和iframe.html 的文件夹。在 index.html 中放入一些 JavaScript 来尝试查看 iframe.html 并将 iframe.html 作为 iframe 包含进来

<!-- index.html -->
<iframe src="http://second.com:8080/iframe.html></iframe>
<script>
   const iframe = document.querySelector('iframe');
   console.log(iframe.contentDocument.body.innerText);
</script>

<!-- iframe.html -->
<div>Hello world</div>

使用该文件夹运行您的服务器。在浏览器中转到 http://second.com/8080:index.html

打开开发工具( chrome 、 firefox )，查看控制台，您应该看到

Hello World

这有效，因为它们都在同一个域中。

现在将浏览器中的 URL 更改为 http://first.com:8080/index.html

这次你会看到类似的东西

VM41:66 Uncaught DOMException: Failed to read the 'contentDocument' 
 property from 'HTMLIFrameElement': Blocked a frame with origin 
"http://first.com:8080" from accessing a cross-origin frame.
at HTMLIFrameElement.contentDocumentDesc.get [as contentDocument] 

注意:根据您使用的服务器，您需要更改上面的 8080 以匹配您的服务器使用的端口。