CrossFrame：为 Mashup 准备的安全的器件间跨域通信

来自 Yahoo! 的 DHTML 传道团队的 Julien Lecomte，宣布发布“ CrossFrame，一种安全的跨文档和跨域的通信机制”。按照 Julien 的说法，这种“Hack”的手段，能让同一页面上来自不同域的 IFrames 互相通讯。传统上出于安全方面的考虑，不同域上资源的通讯比较困难，这就是浏览器上所谓的“同源策略（Same Origin Policy）”。CrossFrame 以 URL 片段标识符（URL fragment identifier) 作为构建的基础，着手解决了两方面重要的问题：

• 接受者必须进行轮询，导致无谓的 CPU 开销。
• 在 Safari 和 Opera 上产生“伪”历史记录。

CrossFrame 让跨域的各站点都共享宿主页面上使用的变量。流程主要分两步：

为了能够与在 Y 域上运行的 Mashup 通信，位于 X 域的页面动态创建一个隐藏的 IFrame 并指向位于 Y 域的一个特殊的代理文件，并利用 URL 片段标识符来运送消息。（第一步）当这个位于隐藏 IFrame 的特殊代理文件加载完毕后，就读取它的 URL 片段标识符，并将之传递给容纳了 Mashup 的 IFrame 内的一段全局函数，（第二步）使用 parent.frames[‘mashup’] 就可获取到所需对象。

使用 CrossFrame 非常简单，安装一个代理文件，导入所需的 JavaScript 库文件，就可以通过 JavaScript 代码开始发送与接收：

登记 onMessage 事件以接收信息：

YAHOO.util.CrossFrame.onMessageEvent.subscribe(<br></br>    function (type, args, obj) {<br></br>        var message = args[0];<br></br>        var domain = args[1];<br></br>       // 以下处理接收到的信息 <br></br>    }<br></br>);要发送信息，调用 YAHOO.util.CrossFrame.send()：

YAHOO.util.CrossFrame.send("http://www.y.com/proxy.html",<br></br>                           "frames['mashup']",<br></br>                           "message");

相关的演示已经准备好，可从中了解一下它在浏览器运作的实际情形。

Facebook 在他们的 Beacon 工具中亦使用 IFrames 的思路来实现通讯。在 Jay Goldman 的一篇《 Deconstructing Facebook Beacon Javascript 》博文中，他把这种方法形容为：

对现代浏览器的跨域脚本安全特性的一种漂亮的规避。

在文章的结尾，Julien 也告诫了使用 CrossFrame 带来的危害：

这种 Hack 手法会带来危险。首先，浏览器的厂商可能会更改它们的安全策略，比如改成像 Opera 那样的行为。

他接着说 > 而且，我不推荐使用 Hack 因为它们会减缓 Web 的革新速度。

最后结论 > 因此，虽然看起来有点矛盾，我不推荐使用 CrossFrame(或者任何其他不堪的 hack 手段)。

令人遗憾，时下谈到合乎规范的页面内器件通信技术，开发者的选择并不多。虽然已经在拟订相关的草案来解决这个问题，但是距离浏览器的标准化实现还需一段时间。与此同时，如果有些事情非要在现在的浏览器上就做到，那么CrossFrame Hack 也不失为一种可行的方案。

查看英文原文： CrossFrame - Safe, Cross Domain Widget Coordination for Mashups - - - - - -

译者简介：Frank Cheung 有多年 Web 前端开发经验，动态语言爱好者。负责 EXT 中文站（ www.ajaxjs.com ）JavaScript 开源论坛 Js 堂（ jstang.5d6d.com ）的维护工作。专注 Ajax 和 WebUI, 从 YUI-Ext 起，翻译了不少 EXT 相关的资料。