同源策略

Posted angel648

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了同源策略相关的知识,希望对你有一定的参考价值。

同源策略

浏览器同源策略:同源指协议、域名、端口皆相同

使用同源策略的原因:出于安全考虑,主要时为了防止CSRF攻击【利用用户的登录专改发起恶意请求】

=>跨域主要时为了阻止用户读取到另一个域下的内容

请求跨域的结果是,请求被发送出去了,但是相应被浏览器拦截了。

跨域的几种方式:

  • JSONP(JSON with Padding)
  • CORS(跨域资源共享)
  • postMessage
  • document.domain

1、JSONP:JSONP是JSON的一种使用模式

  原理:利用<script>标签没有跨域限制的漏洞,通过<script>指向ige需要访问的地址并提供一个回调函数来接收数据

技术图片
1 <script src="http://domain/api?param1=a&parma2=b&callback=jsonp"></script>
2 <script>
3     function jsonp(data)
4 
5     
6 </script>
技术图片

  缺点:仅限于get请求

  数据接收原理:jsonP本质上是通过将情趣模拟为<script>加载,通常带有其他参数和一个callback函数名,然后服务器根据接收到的参数里的回调函数名如   callback(data...),拼装数据导函数里,然后脚本加载成功,执行本地同名回调函数,从而达到跨域。

2、CORS(跨域资源共享)

  CORS需要浏览器和后端同时支持

  浏览器会自动进行CORS通信,实现CORS通信的关键是通过后端,只要后端实现了CORS,就实现了跨域

  服务端设置Access-Control-Allow-Origin就可以开启CORS,该属性表示哪些域名可以访问资源,若设置通配符则表示所有网站都可以访问资源

3、postMessage

  常用于获取嵌入页面中的第三方页面的数据,一个页面发消息,另一个页面判断来源并接收消息

  1)发送端:

  window.parent.postMessage(‘message‘,‘http://test.com‘);

  2)接收端

  var mc = new MessageChannel();

  mc.addEventListener(‘message‘,event=>

    var origin = event.origin || event.originalEvent.origin;

    if(origin == ‘http://test.com‘)

      console.log(‘验证通过‘);

    

  );

4、document.domain

  只能用于主域名相同的情况下,如a.test.com和b.test.com

  著需要给页面添加document.domain = ‘test.com‘,表示主域名相同即可

 

 


1、先来说说什么是源
• 源(origin)就是协议、域名和端口号。
以上url中的源就是:http://www.company.com:80
若地址里面的协议、域名和端口号均相同则属于同源。
以下是相对于 http://www.a.com/test/index.html 的同源检测
• http://www.a.com/dir/page.html ----成功
• http://www.child.a.com/test/index.html ----失败,域名不同
• https://www.a.com/test/index.html ----失败,协议不同
• http://www.a.com:8080/test/index.html ----失败,端口号不同

2.什么是同源策略?
同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

• 不受同源策略限制的:
1、页面中的链接,重定向以及表单提交是不会受到同源策略限制的。
2、跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的<script src="..."></script>,<img>,<link>,<iframe>等。

二、跨域
1、什么是跨域
受前面所讲的浏览器同源策略的影响,不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是就需要跨域。

2、跨域的实现形式
• 降域 document.domain
同源策略认为域和子域属于不同的域,如:
child1.a.com 与 a.com,
child1.a.com 与 child2.a.com,
xxx.child1.a.com 与 child1.a.com
两两不同源,可以通过设置 document.damain=‘a.com‘,浏览器就会认为它们都是同一个源。想要实现以上任意两个页面之间的通信,两个页面必须都设置documen.damain=‘a.com‘。
此方式的特点:
1. 只能在父域名与子域名之间使用,且将 xxx.child1.a.com域名设置为a.com后,不能再设置成child1.a.com。
2. 存在安全性问题,当一个站点被攻击后,另一个站点会引起安全漏洞。
3. 这种方法只适用于 Cookie 和 iframe 窗口。
• JSONP跨域
JSONP和JSON并没有什么关系!
JSONP的原理:(举例:a.com/jsonp.html想得到b.com/main.js中的数据)在a.com的jsonp.html里创建一个回调函数xxx,动态添加<script>元素,向服务器发送请求,请求地址后面加上查询字符串,通过callback参数指定回调函数的名字。请求地址为http://b.com/main.js?callback=xxx。在main.js中调用这个回调函数xxx,并且以JSON数据形式作为参数传递,完成回调。我们来看看代码:
• // a.com/jsonp.html中的代码
• 

技术图片
 1 function addScriptTag(src)  
 2 •    var script = document.createElement(‘script‘); 
 3 •    script.setAttribute("type","text/javascript"); 
 4 •    script.src = src; 
 5 •    document.body.appendChild(script);
 6 •    
 7 •    window.onload = function ()  
 8 •    addScriptTag(‘http://b.com/main.js?callback=foo‘);
 9 •     //window.onload是为了让页面加载完成后再执行
10 •    function foo(data)  
11 •    console.log(data.name+"欢迎您");
12 •    ;
技术图片

 


//b.com/main.js中的代码
foo(name:"hl")
这样便实现了跨域的参数传递。

采用jsonp跨域也存在问题:
1. 使用这种方法,只要是个网站都可以拿到b.com里的数据,存在安全性问题。需要网站双方商议基础token的身份验证,这里不详述。
2. 只能是GET,不能POST。
3. 可能被注入恶意代码,篡改页面内容,可以采用字符串过滤来规避此问题。

• CORS
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
刚才的例子中,在b.com里面添加响应头声明允许a.com的访问,代码:
Access-Control-Allow-Origin: http://a.com
然后a.com就可以用ajax获取b.com里的数据了。
注意:此方法IE8以下完全不支持,IE8-10部分支持。详见caniuse-CORS
详细内容请参考:跨域资源共享 CORS 详解

• 其它方法
1. HTML5的postMessage方法
2. window.name
3. location.hash

以上是关于同源策略的主要内容,如果未能解决你的问题,请参考以下文章

同源策略CORS

同源策略

同源策略

同源策略

同源策略形象解读

浏览器的同源策略