同源策略、跨域通訊

一、前言

• 同源策略以及限制
• 如何建立Ajax
• 先後端通訊
• 跨域通訊的幾種方式

二、同源策略及限制

• 概念：同源策源限制從一個源文件或者腳本如何來與另外一個源的資源進行交互，是一個用於隔離潛在惡意文件的安全機制。
• 源的概念：協議（http/https）、域名、端口。
• 限制：不是一個源，沒有權限操做另外一個源的文檔。

1. Cookie、localStorage、indexDB等沒法讀取。
2. 沒法獲取操做DOM。
3. AJAX請求不能發送。

三、先後端通訊

1. Ajax --> Ajax只適合同源通訊
2. WebScoket --> 不受同源策略限制
3. CORS --> 是新的通訊標準,支持同源通訊也支持跨域通訊。

四、如何建立Ajax

1. XMLHttpRequest對象的工做原理。
2. 兼容性處理。
3. 事件的觸發條件。
4. 事件的觸發順序。

關鍵代碼：
// 1. 第一步，申明xhr對象，考慮ie的兼容性。
var xhr = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveObject('Microsoft.XMLHTTP');
// 2. 肯定請求的方式，get/post等, get參數拼接在url中。
xhr.open(method, url, true)
// 3. 發送數據
3. xhr.send() /  xhr.send(data)
// 判斷http的狀態
4. xhr.onload = function() {
    // 判斷xhr.status
    if(xhr.status === 200 || xhr.status === 304 || xhr.status === 206) {
        // 304,服務器判斷本地有緩存
        // 206，請求媒體資源可能返回資源的一部分
    } else {}
}
複製代碼

五、跨域通訊的幾種方式

1. JSONP

// 原理：利用script標籤的異步加載來實現。就像在head頭中加載script標籤同樣。
// jsonp,和後臺約定的回調函數名
var jsonp = function() {
  // 建立script標籤
  var script = document.createElement('script');
  // 給script添加屬性，如src，在src中約定callback函數。
  script.src = 'http:/www.test.com/?name=zhangsan&callback=jsonp'
  // script加載完的回調
  script.onload = function() {}
  // script加載失敗的回調
  script.onerror = function() {}
  // 將script添加到head標籤中
  document.getElementsByTagName('head')[0].appendChild(script);
}
複製代碼

2. Hash

// 原理：Hash改變頁面不會刷新，search的改變會刷新頁面
// 在A中，代碼以下
var objB = document.getElementsByTagName('iframe')[0];
objB.src = objB.src + '#' + 'data';
// 在B中，監聽hash的變化
window.onhashchange = function() {
  var data = window.location.hash  // 拿到是#後面全部的內容
};
複製代碼

3. postMessage

// 如A源向B源發送數據data
// A, 參數含義：發送的數據，接受方的源或者"*"
window.postMessage('data', 'http/B.com'); 
// B: 監聽message，判斷消息來源，接受數據
window.addEventListerr('message', function(event) {
    console.log(event);
    // event.origin // 消息來源，'http/A.com'
    // event.source // A的引用window
    // event.data  // 接受的數據
}, false)
複製代碼

4. WebSocket

// 1. 申明
var ws = new WebSocket('wss://....'); // wss/ws => 加密/不加密
// 2. 創建連接
ws.onopen = function(e) {
  console.log('開始鏈接...');
  ws.send('hello WebSocket!');
}
// 3. 接受消息
ws.onmessage = function(e) {
  console.log('接收數據：'+ e.data);
  ws.close() // 關閉鏈接
}
// 4. 關閉鏈接的回調,肯定以關閉鏈接
ws.onclose= function(e) {
  console.log('鏈接關閉');
}
複製代碼

5. CORS

// 能夠簡單的理解爲支持跨域通訊的Ajax
// 原理：瀏覽器會攔截ajax請求，若是發現是跨域請求，則會在請求頭中加一個origin
// 須要用到es6的fetch API
fetch('/api/uri', {
  // 在這裏配置跨域參數
  method: 'get',
  params: {}
}).then(res => {
  // 成功的回調
}).catch(error => {
  // 失敗的回調
})
複製代碼

六、總結

• 本文主要介紹了同源策源的概念以及實現跨域通訊的經常使用方式。