JavaScript 同源策略详解与跨域解决方案

本文对 JavaScript 中的同源策略进行了详细分析，旨在为读者提供参考。

同源策略的概念与核心思想

概念：同源策略是客户端脚本（特别是 JavaScript）的一项关键安全标准。该策略最早由 Netscape Navigator 2.0 引入，旨在防止文档或脚本从多个不同的源加载内容。

所谓“同源”，是指协议、域名和端口必须完全一致。

核心思想：

其核心在于：任何从其他站点加载的可信内容都被视为不安全。当浏览器在沙箱中运行脚本时，这些脚本仅被允许访问来自同一站点的资源，而无法访问其他可能带有恶意目的的站点资源。

同源限制的必要性与浏览器差异

为何需要同源限制？

举例说明：假设存在一个黑客程序，它利用 iframe 将真实的银行登录页面嵌入到自己的页面中。当用户输入真实用户名和密码进行登录时，黑客页面可以通过 JavaScript 读取到表单中 input 标签内的内容，从而轻易获取用户名和密码。

Ajax 应用中的情况：

在 Ajax 应用中，这种安全限制容易被突破。

在传统的 JavaScript 应用中，我们可以通过修改 Frame 的 href 或 IFrame 的 src 属性来实现 GET 方式的跨域提交，但无法访问跨域的 Frame/IFrame 中的内容。

而 Ajax 通过 XMLHttpRequest 进行异步交互，该对象同样能够与远程服务器进行信息交换。更危险的是，XMLHttpRequest 是一个纯粹的 JavaScript 对象，这种交互在后台进行且用户无法察觉。因此，XMLHttpRequest 实际上已经突破了原有的 JavaScript 安全限制。

如果我们希望利用 XMLHttpRequest 的无刷新异步交互能力，又不愿公然突破 JavaScript 的安全策略，可以选择的方案是给予 XMLHttpRequest 严格的同源限制。这种安全策略类似于 Applet 的安全机制。IFrame 的限制仅在于不能访问跨域 HTML DOM 中的数据，而 XMLHttpRequest 则从根本上限制了跨域请求的提交。

浏览器支持情况：IE 浏览器实际上为该安全策略提供了两个“后门”。其一，它假设本地文件清楚自己将访问什么内容，因此本地文件访问外部数据时不会受到任何警告。其二，当访问网站的脚本试图访问跨域信息时，它仅弹出一个对话框进行提醒。如果一个欺诈网站提供假页面，并通过 XMLHttpRequest 帮助用户远程登录真实的银行服务器，只要 10 个用户中有 1 个用户点击了确定，盗号行为就可能成功。这显然极其危险。

Firefox 浏览器则采取不同做法，默认情况下，Firefox 不支持跨域的 XMLHttpRequest 请求，从而不给黑客提供这样的机会。

突破同源策略的常见方案

如何避免同源策略的限制？

JSONP 和动态脚本标记

<script type="text/javascript" src="http://yoursiteweb.com/findItinerary?username=sachiko& reservationNum=1234&output=json&callback=showItinerary" />

当 JavaScript 代码动态插入 <script> 标记时，浏览器会访问 src 属性中的 URL。这会导致将查询字符串中的信息发送给服务器。在清单 1 中，传递的是 username 和 reservation 作为名称值对。此外，查询字符串还包含向服务器请求的输出格式和回调函数名称（即 showItinerary）。<script> 标记加载后，会执行回调函数，并通过回调函数的参数将服务器返回的信息传递给该函数。

Ajax 代理

Ajax 代理是一种应用级代理服务器，用于调解 Web 浏览器和服务器之间的 HTTP 请求和响应。Ajax 代理允许 Web 浏览器绕过同源策略，从而可以使用 XMLHttpRequest 访问第三方服务器。实现这种绕过有以下两种方法： 客户端 Web 应用程序知道第三方 URL，并将该 URL 作为 HTTP 请求中的一个请求参数传递给 Ajax 代理。然后，代理将请求转发给 [url]www.jb51.net[/url]。注意，可以将代理服务器的使用隐藏在 Web 应用程序开发人员所使用的 Ajax 库的实现中。对于 Web 应用程序开发人员而言，这看起来可能完全不具有同源策略。 客户端 Web 应用程序不知道第三方 URL，并尝试通过 HTTP 访问 Ajax 代理服务器上的资源。通过一个预定义的编码规则，Ajax 代理将所请求的 URL 转换为第三方服务器的 URL 并代表客户检索内容。这样一来，Web 应用程序开发人员看上去就像是在和代理服务器直接进行通信。

Greasemonkey

Greasemonkey 是一个 Firefox 扩展，允许用户动态修改 Web 页面的样式和内容。Greasemonkey 用户可以将用户脚本（user script）文件与一组 URL 关联。当浏览器通过这组 URL 加载页面时，便会执行这些脚本。Greasemonkey 为用户脚本的 API 提供了额外的权限（与运行在浏览器沙盒中的脚本的权限相比）。

GM_XMLHttpRequest 是其中的一个 API，本质上是一个不具有同源策略的 XMLHttpRequest。用户脚本可以将浏览器的内置 XMLHttpRequest 替换为 GM_XMLHttpRequest，从而允许 XMLHttpRequest 执行跨域访问。

GM_XMLHttpRequest 的使用只能通过用户同意的途径受到保护。也就是说，Greasemonkey 只有在建立新用户脚本与特定 URL 集合之间的关联时才会要求用户配置。然而，不难想象一些用户可能会被欺骗，在没有完全理解其后果时就接受安装。

希望本文所述对大家的 JavaScript 程序设计有所帮助。