在 AIR 中突破同源策略访问 iframe 中的内容-优快云博客

本文链接：https://blog.youkuaiyun.com/unixboy_xujf/article/details/83533881

在 AIR 中突破同源策略访问 iframe 中的内容

Posted on 10-26 20:20 2009 in Web开发 by xujiwei

本篇所讲关于 AIR 的内容是基本 HTML+JS，而不是 Flex 或其他。

在 AIR 中，如果当前页面有一个 iframe，并且我们需要获取这个 iframe 的内容，但是如果 iframe 里包含的是远程页面，在默认情况下，浏览器策略并不允许这种情况，这就是同源策略的限制。

在 Titanium 这个类似于 AIR 的平台中，默认情况下是可以直接从应用的页面中去读取 iframe 中的内容而没有任何限制，但是在 AIR 中不可以。在网上搜索了一番，再看了好几遍 AIR 的文档之后，终于找到解决问题的方法了。

在 AIR 中，iframe 标签拥有额外的几个属性：sandboxRoot、documentRoot、allowCrossDomainXHR 及 ondominitialize。这里为了解决读取 iframe 内容所用到的属性就是 sandboxRoot 及 documentRoot。

通过 sandboxRoot 及 documentRoot，可以将本地的页面映射为远程页面，并在沙盒中运行，另外，在沙盒中运行的页面就会拥有映射域名的域。例如，我们可以将本地的 proxy.html 映射为 http://example.com/local/proxy.html，这样，在实际运行时，proxy.html 中如果用 document.domain 获取页面所在的域，就会得到 example.com，这个时候如果在 proxy.html 中添加一个 iframe，这个 iframe 指向我们实际需要获取内容的地址，因为域相同，就可以直接获取 iframe 的内容了。

例如，我们要在 AIR 中获取 http://example.com/member /login.html 的内容，或者操作这个页面的元素，就可以先用一个 proxy.html，用来实现将本地文件运行在沙盒中，再用一个 login.html 来对实际网页进行操作。

程序代码： [ 复制代码到剪贴板 ]

<iframe src="http://example.com/local/login.html" id="frame" width="100%"
sandboxRoot="http://example.com/local/"
documentRoot="app:/" name="frame" height="100%"></iframe>

程序代码： [ 复制代码到剪贴板 ]

<iframe id='f' frameborder="0" scrolling="no"
src="http://example.com/member/login.html"
width="100%" height="100%"></iframe>
<script type="text/javascript">
alert(document.domain);
var f = document.getElementById('f');
f.onload = function() {
alert(f.contentWindow.document.documentElement.innerHTML);
};
</script>

在 proxy.html 中，虽然 iframe 的 src 属性是 http://example.com/locale/login.html，但是由于这个 iframe 具有 sandboxRoot 属性，所以实际请求会被重定向到相对于 sandboxRoot，并且使用 documentRoot 进行定位的实际地址 app://login.html，但是这个时候 login.html 中具有 document.domain="example.com" 这个属性，所有可以直接使用 iframe.contentWindow 来访问 iframe 中的内容。

虽然解决方法有些麻烦，但终归可以实现突破同源策略的限制来读取 iframe 的内容了。

当然，如果你有更好的方法，请不吝赐教：）