使用 easyXDM 库轻松实现跨站脚本

• 下载源代码 - 31.67 KB

引言

尽管出于安全原因，我们通常不希望来自不同域的页面能够进行通信，但有时我们确实需要。然后，我们发现没有“恰当”的方法可以做到这一点——现有的标准和技术是为了阻止它而构建的。

因此，我们求助于变通方法，我们使用从外部域包含的动态脚本标签，我们使用 JSONP，或者我们尽力使用 postMessage 或 IFrame URL 技术。这些解决方案通常变得相当复杂且脆弱，而在域之间传输纯字符串消息可能会成为您大部分代码的内容。

好了，easyXDM（跨域消息传递）现在来了，它的目的是减少跨站通信所需的工作量——实际上，它只需 4 行代码就可以做到！而且，如果您想实际跨边界调用方法，那么只需要再多 3 行！

有关所介绍功能演示，请参见此处。

背景

此库的设计和构建源于我公司需要向我们的一个 AJAX 应用程序公开接口。该应用程序需要被其他实现我们 API 的 Web 应用程序启动并能在一定程度上进行控制，而我们的愿望是使其尽可能可靠（可以在 IE6 和 FF3.5 上运行），并且尽可能易于实现。这促使我们开发了 easyXDM，我们现在以 MIT 许可证发布它。
easyXDM 以前称为 easyXDM，但由于它经常被错误地标记为恶意软件（XSS），因此我们决定更改其名称。

该库位于 easyxdm.net，您可以在那里轻松访问源代码、现成的软件包以及广泛的文档。在文档中，您还可以找到几个有趣的演示。

Using the Code

此处提供的代码假定您有一个带有要公开的方法（API、天气服务、股票服务等）的网站。在此示例中，该方法称为 _privateDoMagic：它接受三个参数，并将返回一个 JSON 对象。

我们希望 API 消费者能够像调用任何其他 JavaScript 方法一样调用此方法，并获取结果——类似这样：

remote.doMagic('argument1',2,'three',function(result){
    // Consume the result
}

因此，首先，我们假设 easyXDM 库同时存在于提供 API 的页面和使用它的页面上，并且 JSON 对象也同时存在，无论是本地存在还是通过 json2 库引入。
使用 easyXDM，您可以实际使用以下代码仅在需要时加载 json2.js

easyXDM.DomHelper.requiresJSON("/json2.js");

easyXDM 的核心功能是它提供了一种可靠的机制，用于在域之间传输 string 消息，并且它会根据浏览器采用不同的技术来实现此目的。

但是 easyXDM 还能做什么呢？它可以接受一个 接口配置，您可以在其中描述您要公开的方法以及您要使用的（消费的）方法，并将其转换为可用的代码——easyXDM 负责所有繁琐的工作，这样您就可以在一个域中调用方法，让该方法调用带有参数发送到另一个域，并将结果返回给调用方法。

该接口是双向的，接口的双方都可以公开和使用方法。配置中唯一的区别在于哪一方设置通道。

为了公开上面提到的 _privateDoMagic 方法，使其可供使用，我们只需要插入以下代码

var remote = new easyXDM.Interface({}, {    
    local: {
        doMagic:{
            method: _privateDoMagic
        }
    }
});		

以下是相同的代码，更紧凑的形式

var remote = new easyXDM.Interface({},{local: {doMagic:{method: _privateDoMagic}}});

我们在这里创建一个新的 easyXDM.Interface，为我们的 easyXDM.Channel 使用默认值，以及一个公开单个方法的 InterfaceConfiguration。
通过省略 通道的设置，我们表明该库应使用默认设置结合由使用者提供的设置。

API 提供商的工作就这些了！

现在，要使用此方法，需要以下代码

var remote = new easyXDM.Interface({
   local: "../hash.html",
   remote: "http://apiprovidersdomain.com/api.html"
},{
    remote: {
        doMagic: {}
    }
});

同样，以紧凑的形式

var remote=new easyXDM.Interface({local:"../hash.html",
	remote:"http://apiprovidersdomain.com/api.html"},{remote:{doMagic:{}}});

同样，我们创建一个 easyXDM.Interface，这次在第一个参数中提供通道配置。
这里提供的设置是本地副本 hash.html 的路径，以及 API 提供商端点的 URL。

就是这样。

使用者现在可以通过以下方式在本地调用该方法

remote.doMagic('argument1',2,'three',function(result){
    // Consume the result
}

并获取返回的结果。

祝您好运！或者实际上，有了这个库，您就不需要好运了！ :)

关注点

如果您查看源代码，您会发现实现非常简单。它也有很好的文档记录，经验丰富的开发人员应该能够轻松理解它的工作原理。

调试版本包含广泛的跟踪，您可以轻松地看到正在发生的事情。这在示例中使用。

历史

• 2009 年 6 月 24 日：初始发布
• 2009 年 8 月 14 日：文章更新