JavaScript同源策略和跨域访问实例详解

2023-09-14 14:03:05 66

本文实例讲述了JavaScript同源策略和跨域访问。分享给大家供大家参考，具体如下：

1.什么是同源策略

理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。

何谓同源:

URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。

同源策略:

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

从一个域上加载的脚本不允许访问另外一个域的文档属性。

举个例子：

比如一个恶意网站的页面通过iframe嵌入了银行的登录页面（二者不同源），如果没有同源限制，恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。

在浏览器中，

http://localhost:8081/test2.html


testsameoriginpolicy

Testing.

在Firefox中会得到如下错误：

Error:Permissiondeniedtoaccessproperty'body'

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

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

出于安全的考虑，不能设置为其他主domain，比如https://www.nhooo.com/不能设置为sina.com

2.Ajax跨域

Ajax(XMLHttpRequest)请求受到同源策略的限制。

Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互，另外XMLHttpRequest是一个纯粹的Javascript对象，这样的交互过程，是在后台进行的，用户不易察觉。

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

举个例子：

假设某网站引用了其它站点的javascript，这个站点被compromise并在javascript中加入获取用户输入并通过ajax提交给其他站点，这样就可以源源不断收集信息。

或者某网站因为存在漏洞导致XSS注入了javascript脚本，这个脚本就可以通过ajax获取用户信息并通过ajax提交给其他站点，这样就可以源源不断收集信息。

如果我们又想利用XMLHTTP的无刷新异步交互能力，又不愿意公然突破Javascript的安全策略，可以选择的方案就是给XMLHTTP加上严格的同源限制。

这样的安全策略，很类似于Applet的安全策略。IFrame的限制还仅仅是不能访问跨域HTMLDOM中的数据，而XMLHTTP则根本上限制了跨域请求的提交。（实际上下面提到了CORS已经放宽了限制）

随着Ajax技术和网络服务的发展，对跨域的要求也越来越强烈。下面介绍Ajax的跨域技术。

2.1JSONP

JSONP技术实际和Ajax没有关系。我们知道

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

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

为了动态实现JSONP请求，可以使用Javascript动态插入

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

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

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

2.2Proxy

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

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

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

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

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

Eg.

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

然后利用ApacheWeb服务器的ReverseProxy功能做如下配置：

ProxyPass/apihttp://localhost:8081/api

2.3CORS

2.3.1Crossoriginresourcesharing

“Cross-originresourcesharing(CORS)isamechanismthatallowsawebpagetomakeXMLHttpRequeststoanotherdomain.Such"cross-domain"requestswouldotherwisebeforbiddenbywebbrowsers,perthesameoriginsecuritypolicy.CORSdefinesawayinwhichthebrowserandtheservercaninteracttodeterminewhetherornottoallowthecross-originrequest.Itismorepowerfulthanonlyallowingsame-originrequests,butitismoresecurethansimplyallowingallsuchcross-originrequests.”----Wikipedia[3]

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

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

服务器端在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信息，如果自己的域名在允许的访问列表中，则读取responsebody，否则放弃。

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

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

2.3.2测试

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


testingcrosssop

Testing.


$.ajax({
url:'http://localhost:8000/hello',
success:function(data){
alert(data);
},
error:function(){
alert('error');
}
});

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

frombottleimportroute,run,response
@route('/hello')
defindex():
return'HelloWorld.'
run(host='localhost',port=8000)

测试1：

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

测试结果：

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

Origin http://localhost:8080

2.服务器端正确给出response

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

测试2：

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

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

defindex():
#AddCORSheader#
response.set_header("Access-Control-Allow-Origin","http://localhost:8080")
return'HelloWorld.'

测试结果：

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');
}
});

对RestfulAPI做如下改动：

@route('/hello',method=['OPTIONS','GET'])
defindex():
ifrequest.method=='OPTIONS':
return''
return'HelloWorld.'

测试结果：

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

测试4：

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

对RestfulAPI做如下改动：

@route('/hello',method=['OPTIONS','GET'])
defindex():
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'
ifrequest.method=='OPTIONS':
return''
return'HelloWorld.'

测试结果：

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

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

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

4.Cookie同源策略

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

5.Flash/SilverLight跨域

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

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

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

6.总结

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

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

Reference

[1]白帽子讲Web安全:https://www.nhooo.com/books/164067.html
[2]使用JSONP实现跨域通信:http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/
[3]Cross-originresourcesharing:http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing
[4]Cross-domainpolicyforFlashmovies:http://kb2.adobe.com/cps/142/tn_14213.html

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

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

JavaScript同源策略和跨域访问实例详解

热门推荐

随机推荐