JavaScript同源策略与跨域访问详解：JSONP、CORS及代理方案

JavaScript同源策略与跨域访问详解

本文通过具体实例详细解析JavaScript中的同源策略及跨域访问机制，供读者参考学习。

1. 什么是同源策略

理解跨域访问的前提是掌握同源策略。这是浏览器基于安全考量实施的一项核心安全机制。

何谓同源:

URL由协议、域名、端口和路径组成。若两个URL的协议、域名和端口完全一致，则判定为同源。

同源策略:

浏览器的同源策略限制了来自不同源的“document”或脚本，对当前“document”读取或设置某些属性。（参考《白帽子讲web安全》[1]）

从某一域加载的脚本，不允许访问另一域文档的属性。

举个例子：

例如，恶意网站通过iframe嵌入银行登录页面（两者不同源）。若无同源限制，恶意网页上的JavaScript脚本可在用户登录银行时窃取用户名和密码。

在浏览器中，<script>、<img>、<iframe>、<link>等标签均可加载跨域资源，不受同源限制，但浏览器限制了JavaScript的权限，使其无法读写加载的内容。

此外，同源策略仅对网页的HTML文档进行限制，对加载的其他静态资源如JavaScript、CSS、图片等仍视为同源。

代码示例（http://localhost:8080/和http://localhost:8081因端口不同而不同源）：

http://localhost:8080/test.html

<html>
  <head><title>test same origin policy</title></head>
  <body>
    <iframe id="test" src="http://localhost:8081/test2.html"></iframe>
    <script type="text/javascript">
      document.getElementById("test").contentDocument.body.innerHTML = "write somthing";
    </script>
  </body>
</html>

http://localhost:8081/test2.html

<html>
  <head><title>test same origin policy</title></head>
  <body>
    Testing.
  </body>
</html>

在Firefox浏览器中执行上述操作会收到如下错误：

Error: Permission denied to access property 'body'

Document对象的domain属性存储着装载文档的服务器主机名，该属性可被设置。

例如，来自“blog.jb51.net”和“bbs.jb51.net”的页面，若将document.domain均设置为“jb51.net”，则这两个子域名的脚本即可相互访问。

出于安全考虑，不能将其设置为其他主domain，例如https://www.jb51.net/不能设置为sina.com。

Ajax跨域访问方案

2. Ajax跨域

Ajax（XMLHttpRequest）请求受同源策略限制。

Ajax通过XMLHttpRequest与远程服务器进行信息交互，且XMLHttpRequest是纯JavaScript对象，该交互在后台进行，用户不易察觉。

因此，XMLHTTP实际上已突破了原有的JavaScript安全限制。

举个例子：

假设某网站引用了其他站点的JavaScript，若该站点被入侵并在JavaScript中注入获取用户输入并通过Ajax提交至其他站点的代码，即可持续收集信息。

或者某网站存在漏洞导致XSS注入JavaScript脚本，该脚本可通过Ajax获取用户信息并提交至其他站点，从而持续收集信息。

若既想利用XMLHTTP的无刷新异步交互能力，又不愿公然突破JavaScript的安全策略，可选方案是为XMLHTTP添加严格的同源限制。

此类安全策略类似于Applet的安全策略。IFrame的限制仅是无法访问跨域HTML DOM中的数据，而XMLHTTP则从根本上限制了跨域请求的提交。（注：下文提到的CORS已放宽此限制）

随着Ajax技术和网络服务的发展，对跨域的需求日益强烈。下文将介绍Ajax的跨域技术。

JSONP跨域实现

2.1 JSONP

JSONP技术与Ajax并无直接关系。我们知道<script>标签可加载跨域JavaScript脚本，且加载的脚本与当前文档属于同一域，因此可在文档中调用或访问脚本中的数据及函数。若JavaScript脚本中的数据是动态生成的，只需在文档中动态创建<script>标签即可实现与服务端的数据交互。

JSONP利用<script>标签的跨域能力实现跨域数据访问，请求动态生成的JavaScript脚本时附带一个callback函数名作为参数。该callback函数为本地文档中的JavaScript函数，服务器端动态生成的脚本会产生数据，并在代码中以产生的数据为参数调用callback函数。当该脚本加载到本地文档时，callback函数即被调用。

第一个站点的测试页面（http://localhost:8080/test.html）：

<script src="http://localhost:8081/test_data.js">
  <script>
    function test_handler(data) {
      console.log(data);
    }
</script>

服务器端的JavaScript脚本（http://localhost:8081/test_data.js）：

test_handler('{"data": "something"}');

为动态实现JSONP请求，可使用JavaScript动态插入<script>标签：

<script type="text/javascript">
    // this shows dynamic script insertion
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // load the script
    document.getElementsByTagName('head')[0].appendChild(script);
</script>

JSONP协议封装了上述步骤，jQuery中统一表现为AJAX（其中data type为JSONP）：

http://localhost:8080/test?callback=test_handler

为支持JSONP协议，服务器端必须提供特别支持[2]，且JSONP仅支持GET请求。

代理方式跨域

2.2 Proxy

使用代理方式跨域更为直接，因为SOP（同源策略）是浏览器实现的。若请求非从浏览器发起，则不存在跨域问题。

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

1. 将访问其他域的请求替换为本域请求

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

各类服务器的Reverse Proxy功能均可便捷实现请求转发，如Apache httpd + mod_proxy。

Eg.

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

随后利用Apache Web服务器的Reverse Proxy功能进行如下配置：

ProxyPass /api http://localhost:8081/api

CORS跨域资源共享

2.3 CORS

2.3.1 Cross origin resource sharing

“Cross-origin resource sharing (CORS) is a mechanism that allows a web page to make XMLHttpRequests to another domain. Such "cross-domain" requests would otherwise be forbidden by web browsers, per the same origin security policy. CORS defines a way in which the browser and the server can interact to determine whether or not to allow the cross-origin request. It is more powerful than only allowing same-origin requests, but it is more secure than simply allowing all such cross-origin requests.” ----Wikipedia[3]

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

实现的基础是JavaScript不能操作HTTP Header。某些浏览器插件具备此能力。

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

Access-Control-Allow-Origin: example.com
Access-Control-Request-Method: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin
Access-Control-Expose-Headers: Content-Range
Access-Control-Max-Age: 3600

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

客户端可采取两种行为：

1. 发送OPTIONS请求，请求Access-Control信息。若自己的域名在允许的访问列表中，则发送真正请求，否则放弃请求发送。

2. 直接发送请求，然后检查response的Access-Control信息，若自己的域名在允许的访问列表中，则读取response body，否则放弃。

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

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

2.3.2 测试

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

<html>
    <head><title>testing cross sop</title></head>
    <body>
      Testing.
      <script src="jquery-2.0.0.min.js"></script>
      <script type='text/javascript'>
        $.ajax({
          url: 'http://localhost:8000/hello',
          success: function(data) {
            alert(data);
          },
          error: function() {
            alert('error');
          }
        });
      </script>
    </body>
</html>

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

from bottle import route, run, response
@route('/hello')
def index():
  return 'Hello World.'
run(host='localhost', port=8000)

测试1：

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

测试结果：

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

Origin http://localhost:8080

2. 服务器端正确给出response

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

测试2：

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

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

def index():
  #Add CORS header#
  response.set_header("Access-Control-Allow-Origin", "http://localhost:8080")
  return 'Hello World.'

测试结果：

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

Origin http://localhost:8080

2. 服务器端正确给出response

3. 客户端正常获取数据

测试3：

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

$.ajax({
 url: 'http://localhost:8000/hello',
 headers: {'Content-Type': 'text/html'},
 success: function(data) {
   alert(data);
 },
 error: function() {
   alert('error');
 }
});

对Restful API做如下改动：

@route('/hello', method = ['OPTIONS', 'GET'])
def index():
  if request.method == 'OPTIONS':
    return ''
  return 'Hello World.'

测试结果：

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

测试4：

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

对Restful API做如下改动：

@route('/hello', method = ['OPTIONS', 'GET'])
def index():
    response.headers['Access-Control-Allow-Origin'] = 'http://localhost:8080'
    response.headers['Access-Control-Allow-Methods'] = 'GET, OPTIONS'
    response.headers['Access-Control-Allow-Headers'] = 'Origin, Accept, Content-Type'
    if request.method == 'OPTIONS':
      return ''
    return 'Hello World.'

测试结果：

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

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

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

其他跨域场景与总结

4. Cookie 同源策略

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

5. Flash/SilverLight跨域

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

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

<?xml version="1.0"?>
  <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
  <cross-domain-policy>
  <allow-access-from domain="*"/>
  <allow-http-request-headers-from domain="*" headers="*"/>
</cross-domain-policy>

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

6. 总结

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

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

Reference

[1] 白帽子讲Web安全: https://www.jb51.net/books/164067.html [2] 使用 JSONP 实现跨域通信: http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/ [3] Cross-origin resource sharing: http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing [4] Cross-domain policy for Flash movies: http://kb2.adobe.com/cps/142/tn_14213.html

更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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