JS同源策略和跨域访问

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现.

1. 什么是同源策略

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

何谓同源:

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

同源策略:

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

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

举个例子：

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

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

另外同源策略只对网页的HTML文档做了限制，对加载的其他静态资源如javascript、css、图片等仍然认为属于同源。

例如，我要在测试代码里iframe百度的首页：

<html>

<head><title>test same origin policy</title></head>

<body>

<iframe id="test" src="https://www.baidu.com/"></iframe>

<script type="text/javascript">

    document.getElementById("test").contentDocument.body.innerHTML = "write somthing";

</script>

</body>

</html>

协议不同，拒绝访问。

Document对象的domain属性存放着装载文档的服务器的主机名，可以设置它。
例如来自"blog.csdn.net"和来自"bbs.csdn.net"的页面，都将document.domain设置为"csdn.net"，则来自两个子域名的脚本即可相互访问。
出于安全的考虑，不能设置为其他主domain，比如http://www.csdn.net/不能设置为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.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的响应头中加入（页面层次的控制模式）：

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等攻击的盛行也得益于此。

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

JS同源策略和跨域访问的更多相关文章

JS同源策略和跨域问题
同源策略和跨域问题:http://www.cnblogs.com/chaoyuehedy/p/5556557.html 深入浅出JSONP--解决ajax跨域问题:http://www.cnblogs ...
1.7 xss之同源策略与跨域访问
同源策略: 同源策略在web应用的安全模型中是一个重要概念.在这个策略下,web浏览器允许第一个页面的脚本访问第二个页面里的数据,但是也只有在两个页面有相同的源时.源是由URI,主机名,端口号组合而 ...
第二百七十四节，同源策略和跨域Ajax
同源策略和跨域Ajax 什么是同源策略尽管浏览器的安全措施多种多样,但是要想黑掉一个Web应用,只要在浏览器的多种安全措施中找到某种措施的一个漏洞或者绕过一种安全措施的方法即可.浏览器的各种保安措 ...
js,java,ajax实现跨域访问及其原理
http://blog.csdn.net/saytime/article/details/51540876 这篇文章对跨域访问做了较为细致得分析,我这里做下简单总结 1.实现跨域访问原理: 浏览器由于 ...
Ajax_同源策略以及跨域问题
Ajax_同源策略同源策略是浏览器的一种安全策略, 同源指的是:协议.域名.端口.必须完全相同. 违背同源策略就是跨域. 而AJAX是默认遵循同源策略的: 同源说通俗一点呢就是页面跟获取请求的接口是 ...
11. cookie_session_原生ajax_readyState的值_同源策略_跨域_jsonp的使用
1. cookie 浏览器存储技术.(服务器将少量数据交于浏览器存储管理) 作用: 存储数据, 解决 http 协议无状态问题工作流程: 浏览器发送请求给服务器,请求登录服务器返回响应给浏览器,此 ...
cors跨域和jsonp劫持漏洞和同源策略和跨域请求解决方案
cors跨域和jsonp劫持漏洞: https://www.toutiao.com/a6759064986984645127/ 同源策略和跨域请求解决方案:https://www.jianshu.co ...
同源、同源策略、跨域问题、django解决方案
什么是同源: URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源. 注意:假如你的网站ip是123.123.123.123,网站的域名是www.abc.com. ...
XSS中的同源策略和跨域问题
转自 https://www.cnblogs.com/chaoyuehedy/p/5556557.html 1 同源策略所谓同源策略,指的是浏览器对不同源的脚本或者文本的访问方式进行的限制.比如源a ...

随机推荐

WinForm下的Nhibernate+Spring.Net的框架配置文件
1.先将配置文件放到如下:<?xml version="1.0" encoding="utf-8"?> <configuration> ...
Java基础知识陷阱(一)
本文发表于本人博客. 事隔好多年了,重新拿起来Java这门语言,看似熟悉其实还很陌生,想想应该梳理下顺便提高下自己.这次先来看看Java里面的String这个对象. 经典的先看下面一段代码,请问最终创 ...
LeetCode：累加数【306】
LeetCode:累加数[306] 题目描述累加数是一个字符串,组成它的数字可以形成累加序列. 一个有效的累加序列必须至少包含 3 个数.除了最开始的两个数以外,字符串中的其他数都等于它之前两个数相 ...
微信小程序 canvas 生成随机验证码
转载:https://blog.csdn.net/qq_16646819/article/details/81020245?utm_source=blogxgwz0 js // pages/bind/ ...
CodeForces - 86D Powerful array (莫队)
题意:查询的是区间内每个数出现次数的平方×该数值的和. 分析:虽然是道莫队裸体,但是姿势不对就会超时.答案可能爆int,所以要开long long 存答案.一开始的维护操作,我先在res里减掉了a[p ...
Hbase 布隆过滤器BloomFilter介绍
转载自:http://blog.csdn.net/opensure/article/details/46453681 1.主要功能提高随机读的性能 2.存储开销 bloom filter的数据存在S ...
【Head First Servlets and JSP】笔记21：从有脚本到无脚本
可以建立多态的bean引用吗使用type,但没有class scope属性默认为“page” 从有脚本到无脚本 1.快速搭建一个测试环境:输入用户名,返回“Hello, 用户名” index.htm ...
求最小生成树——Kruskal算法和Prim算法
给定一个带权值的无向图,要求权值之和最小的生成树,常用的算法有Kruskal算法和Prim算法.这两个算法其实都是贪心思想的使用,但又能求出最优解.(代码借鉴http://blog.csdn.net/ ...
使用buildroot创建自己的交叉编译工具链【转】
本文转载自:https://blog.csdn.net/linczone/article/details/45894181 使用buildroot创建自己的交叉编译工具链关键字:buildroot ...
unbntu修改mac地址
分享下Ubuntu下更改MAC地址的简单方法: 首先把网卡设备给 down 掉,否则会报告系统忙,无法更改. sudo ifconfig eth0 down 然后修改 MAC 地址,这一步较 Wind ...

JS同源策略和跨域访问

JS同源策略和跨域访问的更多相关文章

随机推荐

热门专题