JSONP协议封装了上述步骤，jQuery中统一是现在AJAX中(其中data type为JSONP)：

为了支持JSONP协议，服务器端必须提供特别的支持[2]，另外JSONP只支持GET请求。

@H_502_3@2.2 Proxy

使用代理方式跨域更加直接，因为SOP的限制是浏览器实现的。如果请求不是从浏览器发起的，就不存在跨域问题了。

使用本方法跨域步骤如下：

1. 把访问其它域的请求替换为本域的请求

2. 本域的请求是服务器端的动态脚本负责转发实际的请求

各种服务器的Reverse Proxy功能都可以非常方便的实现请求的转发，如Apache httpd + mod_proxy。

@H_502_3@Eg.

为了通过Ajax从http://localhost:8080访问http://localhost:8081/api，可以将请求发往http://localhost:8080/api。

然后利用Apache Web服务器的Reverse Proxy功能做如下配置：

@H_502_3@2.3 CORS

2.3.1 Cross origin resource sharing

通过在HTTP Header中加入扩展字段，服务器在相应网页头部加入字段表示允许访问的domain和HTTP method，客户端检查自己的域是否在允许列表中，决定是否处理响应。

实现的基础是JavaScript不能够操作HTTP Header。某些浏览器插件实际上是具有这个能力的。

服务器端在HTTP的响应头中加入（页面层次的控制模式）：

多个域名之间用逗号分隔，表示对所示域名提供跨域访问权限。"*"表示允许所有域名的跨域访问。

@H_502_3@客户端可以有两种行为：

本质上服务端的response内容已经到达本地，JavaScript决定是否要去读取。

Support: [Javascript Web Applications] * IE >= 8 (需要安装caveat) * Firefox >= 3 * Safari 完全支持 * Chrome 完全支持 * Opera 不支持

2.3.2 测试

测试页面http://localhost:8080/test3.html使用jquery发送Ajax请求。

测试Restful API(http://localhost:8000/hello/{name})使用bottle.py来host。

@H_502_3@测试1：

测试正常的跨域请求的行为。

测试结果：

1. 跨域GET请求已经发出，请求header中带有

Origin http://localhost:8080

2. 服务器端正确给出response

3. Javascript拒绝读取数据，在firebug中发现reponse为空，并且触发error回调

@H_502_3@测试2：

测试支持CORS的服务器的跨域请求行为。

对Restful API做如下改动，在response中加入header：

测试结果：

1. 跨域GET请求已经发出，请求header中带有

Origin http://localhost:8080

2. 服务器端正确给出response

3. 客户端正常获取数据

@H_502_3@测试3：

测试OPTIONS请求获取CORS信息。 对客户端的Ajax请求增加header：

对Restful API做如下改动：

测试结果：

1. Ajax函数会首先发送OPTIONS请求 2. 针对OPTIONS请求服务器 3. 客户端发现没有CORS header后不会发送GET请求

@H_502_3@测试4：

增加服务器端对OPTIONS方法的处理。

对Restful API做如下改动：

测试结果：

1. Ajax函数会首先发送OPTIONS请求 2. 针对OPTIONS请求服务器 3. 客户端匹配CORS header中的allow headers and orgin后会正确发送GET请求并获取结果

测试发现，Access-Control-Allow-Headers是必须的。

CORS协议提升了Ajax的跨域能力，但也增加了风险。一旦网站被注入脚本或XSS攻击，将非常方便的获取用户信息并悄悄传递出去。

502_3@4. Cookie 同源策略

Cookie中的同源只关注域名，忽略协议和端口。所以https://localhost:8080/和http://localhost:8081/的Cookie是共享的。

502_3@5. Flash/SilverLight跨域

浏览器的各种插件也存在跨域需求。通常是通过在服务器配置crossdomain.xml[4]，设置本服务允许哪些域名的跨域访问。

客户端会首先请求此文件，如果发现自己的域名在访问列表里，就发起真正的请求，否则不发送请求。

通常crossdomain.xml放置在网站根目录。

6. 总结

互联网的发展催生了跨域访问的需求，各种跨域方法和协议满足了需求但也增加了各种风险。尤其是XSS和CSRF等攻击的盛行也得益于此。

了解这些技术背景有助于在实际项目中熟练应用并规避各种安全风险。

Reference

[1] 白帽子讲Web安全:

更多关于JavaScript相关内容可查看本站专题：《》、《》、《》、《》、《》、《》及《》