Question

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

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

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

Answer 1

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

答案越长，如果您想自己测试一下，请安装一个简单的Web服务器。它会带你＆lt; 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

打开devtools（chrome，firefox），查看控制台，你应该看到

Hello World

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

现在将浏览器中的网址更改为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以匹配服务器使用的端口。

JavaScript可以读取iframe的内容吗？

1 个答案: