問答

什么是同源策略

同源策略是瀏覽器安全的基石, 規定了不同源的網站不能相互讀取資源

• 同源定義
  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()，是一個安全的跨源通信的方法
  語法:
  <blockquote>otherWindow.postMessage(message, targetOrigin); --- MDN</blockquote>
  然后目標窗口通過監聽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