說說瀏覽器的同源策略

摘要： 同源策略（Same origin policy）使得來自於不同來源的指令碼，無法讀取或修改當前源物件。它是瀏覽器最核心也是最基本的安全功能。 1 同源判斷規則 如果域名或 IP 地址、埠與協議都相同，那麼就會被判定為同源。 假設有這麼一個 URL： http:...

同源策略（Same origin policy）使得來自於不同來源的指令碼，無法讀取或修改當前源物件。它是瀏覽器最核心也是最基本的安全功能。

1 同源判斷規則

如果域名或 IP 地址、埠與協議都相同，那麼就會被判定為同源。

假設有這麼一個 URL： http://www.deniro.net ，下表中的 URL 與此比較，判斷是否同源：

URL	是否同源	原因
http://www.deniro.net/welcome.html	同源	-
https://www.deniro.net/welcome.html	不同源	協議不同
http://www.deniro.net:8080/welcome.html	不同源	埠號不同
http://book.deniro.net/welcome.html	不同源	域名不同

2 跨域載入資源

<script> 、 <img> 、 <iframe> 、 <link> 標籤不受同源策略限制，可以跨域載入資源。

比如我們可以在我們的專案中載入 CDN 上的 Vue.js：

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

CDN 的全稱是 Content Delivery Network ，即 內容分發網路 。CDN 是構建在網路之上的內容分發網路，依靠部署在各地的邊緣伺服器，通過中心平臺的負載均衡 、 內容分發 、 排程等功能模組，使使用者就近獲取所需內容，降低網路擁塞，提高使用者訪問響應速度和命中率 。

這些標籤載入資源時，瀏覽器會發起 Get 請求，獲取這些資源。但在載入 JavaScript 時，限制了讀寫返回內容的許可權。

3 XMLHttpRequest 物件

XMLHttpRequest 物件可以與伺服器交換資料。具體功能如下：

• 在不重新載入頁面的情況下更新網頁。
• 在頁面已載入後從伺服器請求資料。
• 在頁面已載入後從伺服器接收資料。
• 在後臺向伺服器傳送資料。

為了安全起見，XMLHttpRequest 物件，在預設情況下，不能跨域訪問資源，所以在 Ajax 開發中一定要注意哦O(∩_∩)O~

4 XMLHttpRequest 跨域訪問標準

瀏覽器會通過目標域所返回的 HTTP 頭（Access-Control-Allow-Origin）來判定是否允許跨域訪問，因為 JavaScript 無法操縱 HTTP 頭。