瀏覽器同源策略詳解

一、同源定義

同源即指兩個URL協議，域名和埠號都相同，這樣才可以互相訪問彼此的資源。如果兩個URL不滿足以上條件，那麼就是跨域請求。

例如：a.com和b.com之間的請求就是跨域請求，但是a.com和a.com:8080之間的請求就是同源請求。

二、同源策略的作用

瀏覽器的同源策略是為了防止惡意的網站竊取用戶的隱私信息而設計的。如果沒有同源策略，那麼一個網頁可以通過一些惡意的腳本來獲取另一個網頁中用戶的敏感信息，例如Cookie。

同源策略可以保護用戶的隱私信息，但也會限制網站與外部資源的交互，這就需要設計跨域解決方案。

三、同源策略的限制

1、Cookie、LocalStorage和IndexedDB無法讀取。同源A網頁下，無法讀取同源B網頁的Cookie、LocalStorage和IndexedDB。

<script>
let cookie = document.cookie; // 無法獲得
let localStorage = window.localStorage; // 無法獲得
let indexedDB = window.indexedDB; // 無法獲得
</script>

2、DOM無法獲取。同源A網頁無法獲取同源B網頁中的DOM元素。

<iframe src="http://b.com"></iframe>
<script>
let iframe = document.getElementsByTagName('iframe')[0];
let bDom = iframe.contentWindow.document.getElementsByTagName('body')[0]; // 無法獲得
</script>

3、AJAX請求無法發送。同源A網頁無法向同源B網頁發送AJAX請求。

fetch('http://b.com', {
  method: 'get'  // 無法請求
})

四、跨域解決方案

1、JSONP

JSONP利用script標籤不存在跨域限制的特性，可以通過動態創建script標籤，向另一個伺服器請求數據，將響應結果放到回調函數中返回到網頁中。

<script>
function handleData(res) {
  console.log(res);
}
let script = document.createElement('script');
script.src = "http://b.com/api?callback=handleData"; // 動態創建script標籤
document.head.appendChild(script);
</script>

2、CORS

CORS實現了前後端的協商機制，由後端設置Access-Control-Allow-Origin響應頭來允許跨域請求。

具體地，當瀏覽器發現請求不符合同源策略時，會進行一次CORS預檢請求，即向另一個伺服器發起OPTIONS請求，詢問是否允許跨域，如果得到響應，則可以進行跨域請求。

後端需要設置Access-Control-Allow-Origin、Access-Control-Allow-Credentials等響應頭，前端需要在AJAX請求中加上withCredentials和設置xhr的請求頭。

// 後端設置響應頭
Access-Control-Allow-Origin: http://a.com
Access-Control-Allow-Credentials: true

// 前端AJAX請求
let xhr = new XMLHttpRequest();
xhr.withCredentials = true; // 允許跨域帶Cookie
xhr.open("GET", "http://b.com/api");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send();

3、WebSocket

WebSocket是一種可以在單個TCP連接上進行全雙工通信的網路協議，在進行跨域通信時，WebSocket可以直接連接到另一個伺服器並發送數據，不再需要通過CORS等方式解決跨域問題。

let socket = new WebSocket('ws://b.com');
socket.onopen = function() {
  socket.send('hello, b');
}
socket.onmessage = function(event) {
  console.log(event.data);
}

五、小結

瀏覽器的同源策略可以保護用戶的隱私信息，但也會限制網站與外部資源的交互，需要設計跨域解決方案。常用的跨域解決方案有JSONP、CORS、WebSocket等。在使用跨域解決方案時，需要注意安全性和對瀏覽器的性能影響。