同源策略, 跨域, JSONP

问答

什么是同源策略

同源策略是浏览器安全的基石, 规定了不同源的网站不能相互读取资源

• 同源定义
  1. 相同协议
  2. 相同主机
  3. 相同端口
• 目的
  为了用户的信息安全, 防止恶意网站盗窃数据
• 限制范围
  同源政策越来越严格, 共有三种行为受到限制
  1. Cookie, LocalStorage和IndexedDB无法读取
  2. DOM 无法获得
  3. AJAX 请求不能发送

什么是跨域？跨域有几种实现形式?JSONP原理?CORS是什么?

跨域就是绕过浏览器的同源政策, 实现跨源通信

• 降域
  通过降域可以使两个一级域名相同, 二级域名不同的网页实现跨域资源共享, 但是ajax请求不能通过这种方式跨域, 只有cookie和iframe可以
  • cookie共享
    例如:

//a.guoqichen.com
document.cookie = 'name=gqc;domain=guoqichen.com'
//那么这个cookie在一级域名为guoqichen.com的网站就能共享

2016-09-17_141823.png

- iframe资源共享
例如:

//a.guoqichen.com
//b.guoqichen.com
window.domain='guoqichen.com'

• postMessage
  HTML5的API, 在window对象上增加了一个方法window.postMessage()，是一个安全的跨源通信的方法
  语法:
  

  otherWindow.postMessage(message, targetOrigin); --- MDN

  
  然后目标窗口通过监听message事件来获取数据, 其中message事件提供data API来获取接受到的数据

window.addEventListener('message',function(event){
    console.log(event.data)
})

• JSONP
  全称JSON with padding, 注意与JSON数据格式区别, 只是因为传输的数据以JSON格式, 所以叫JSONP, AJAX请求跨域的常用方法, 特点是简单实用, 兼容性强, 实现原理是利用网页添加一个script标签, 向服务器请求JSON数据, 这种做法不受同源政策限制, 服务器接到请求后, 将数据放在指定名字的回调函数里传回来, 但是只能发送get请求

• CORS
  cross origin resource sharing, W3C的标准, 跨域AJAX请求的根本解决办法, 主要需要服务器端实现了CORS的接口, 实现原理是服务器在响应头加入Assess-Control-Allow-Origin字段, 如果发出请求的网站包含在被请求网站的允许名单中, 就能实现跨域AJAX请求

演示

1. 同个IP不同域名
   通过设置hosts文件, 对本机127.0.0.1设置多个域名

   
   
   

   2016-09-17_154431.png
   
   

   通过不同网址访问

   
   
   

   2016-09-17_154907.png

2. 演示浏览器同源政策
   从a.guoqichen.com向b.guoqichen.com发送AJAX请求失败

   
   
   

   2016-09-17_154027.png
3. 规避同源政策

   1. jsonp
      发出请求的网页, 动态的创建script标签, 指定回调函数

      
      
      

      2016-09-16_012125.png
      
      

      服务端接受到请求后, 把数据作为回调函数的参数

      
      
      

      2016-09-16_012217.png
      
      因为script的返回的数据会直接被浏览器执行, 所以不需要JSON.parse
      
      

      2016-09-16_012258.png
   2. cors
      发出请求的网页, 与普通ajax请求一样
      
      

      2016-09-17_155219.png
      
      服务端设置header
      
      

      2016-09-17_155113.png
      
      请求成功, 响应的头部包含Access-Control-Allow-Origin: *,即允许所有非同源网站的ajax请求
      
      

      2016-09-17_154133.png