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

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

Posted on 10-26 20:20 2009 in Web开发 by xujiwei <!-- [ 字体大小：<a href="javascript:SetFontSize('articlecontentview',12);">小</a> <a href="javascript:SetFontSize('articlecontentview',14);">中</a> <a href="javascript:SetFontSize('articlecontentview',16);">大</a> ]-->

版权声明 ：未作特别说明的内容可以转载，转载时请务必以超链接形式标明文章原始出处 和作者信息及本声明。本文地址：http://xujiwei.com/blog/?id=918

本篇所讲关于 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 来对实际网页进行操作。

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

• <!-- proxy.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>

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

• <!-- login.html -->
• <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 的内容了。

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