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 aess property 'body'
Document对象的domain属性存放着装载文档的服务器的主机名，可以设置它。
例如来自"blog.jb51."和来自"bbs.jb51."的页面，都将document.domain设置为"jb51."，则来自两个子域名的脚本即可相互访问。
出于安全的考虑，不能设置为其他主domain，比如https://.jb51./不能设置为sina.
2. Ajax跨域
Ajax (XMLHttpRequest)请求受到同源策略的限制。
Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互，XMLHttpRequest是一个纯粹的Javascript对象，这样的交互过程，是在后台进行的，用户不易察觉。
，XMLHTTP实际上已经突破了原有的Javascript的安全限制。
举个例子
假设某网站引用了其它站点的javascript，这个站点被promise并在javascript中加入获取用户输入并通过ajax提交给其他站点，这样就可以源源不断收集信息。
或者某网站因为存在漏洞导致XSS注入了javascript脚本，这个脚本就可以通过ajax获取用户信息并通过ajax提交给其他站点，这样就可以源源不断收集信息。
如果我们又想利用XMLHTTP的无刷新异步交互能力，又不愿意公然突破Javascript的安全策略，可以选择的方案就是给XMLHTTP加上严格的同源限制。
这样的安全策略，很类似于Applet的安全策略。IFrame的限制还仅仅是不能访问跨域HTMLDOM中的数据，而XMLHTTP则根本上限制了跨域请求的提交。（实际上狼蚁网站SEO优化提到了CORS已经放宽了限制）
随着Ajax技术和网络服务的发展，对跨域的要求也越来越强烈。狼蚁网站SEO优化介绍Ajax的跨域技术。
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
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的响应头中加入（页面层次的控制模式）
Aess-Control-Allow-Origin: example. Aess-Control-Request-Method: GET, POST Aess-Control-Allow-Headers: Content-Type, Authorization, Aept, Range, Origin Aess-Control-Expose-Headers: Content-Range Aess-Control-Max-Age: 3600
多个域名之间用逗号分隔，表示对所示域名提供跨域访问权限。""表示允许所有域名的跨域访问。
客户端可以有两种行为
1. 发送OPTIONS请求，请求Aess-Control信息。如果自己的域名在允许的访问列表中，则发送真正的请求，否则放弃请求发送。
2. 直接发送请求，然后检查response的Aess-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',
suess: 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("Aess-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'},
suess: 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['Aess-Control-Allow-Origin'] = 'http://localhost:8080'
response.headers['Aess-Control-Allow-Methods'] = 'GET, OPTIONS'
response.headers['Aess-Control-Allow-Headers'] = 'Origin, Aept, Content-Type'
if request.method == 'OPTIONS':
return ''
return 'Hello World.'
测试结果
1. Ajax函数会发送OPTIONS请求
2. 针对OPTIONS请求服务器
3. 客户端匹配CORS header中的allow headers and in后会正确发送GET请求并获取结果
测试发现，Aess-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://.macromedia./xml/dtds/cross-domain-policy.dtd"> <cross-domain-policy> <allow-aess-from domain=""/> <allow-http-request-headers-from domain="" headers=""/> </cross-domain-policy>
通常crossdomain.xml放置在网站根目录。
6.
互联网的发展催生了跨域访问的需求，各种跨域方法和协议满足了需求但也增加了各种风险。尤其是XSS和CSRF等攻击的盛行也得益于此。
了解这些技术背景有助于在实际项目中熟练应用并规避各种安全风险。
Reference
[1] 白帽子讲Web安全: https://.jb51./books/164067.html
[2] 使用 JSONP 实现跨域通信: http://.ibm./developerworks//web/wa-aj-jsonp1/
[3] Cross-origin resource sharing: http://en.wikipedia./wiki/Cross-Origin_Resource_Sharing
[4] Cross-domain policy for Flash movies: http://kb2.adobe./cps/142/tn_14213.html
更多关于JavaScript相关内容可查看本站专题《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程