解決瀏覽器跨域限制發送ajax請求

標籤：使用   log   標準   script   eve   wss   master   參數   ip地址   

一.什麼是瀏覽器跨域限制？本質是什嗎？

所謂瀏覽器跨域限制，其實是為了資料安全的考慮由Netscape提出來限制瀏覽器跨域訪問資料的策略，這是一中約定，正式叫法為瀏覽器同源策略，目前已經在大多數瀏覽器中支援。

本質上，所謂瀏覽器同源策略即：不允許瀏覽器訪問跨域的Cookie，ajax請求跨域介面等。也就是說，凡是訪問與自己不在相同域的資料或介面時，瀏覽器都是不允許的。 最常見的例子：對於前後端完全分離的Web項目，前端頁面通過rest介面訪問資料時，會出現如下問題：

• 不允許發送POST請求：在發送POST請求之前會發送OPTIONS請求，HTTP響應狀態代碼為403（Forbidden）。同時，在瀏覽器（firefox調試）控制台可以看到如下提示：

  已攔截跨源請求：同源策略禁止讀取位於 http://host:port/path 的遠端資源。（原因：CORS 頭缺少 ‘Access-Control-Allow-Origin‘）。

• 允許發送GET請求：HTTP響應狀態代碼為200，但是不能讀取伺服器返回的資料。同時，在瀏覽器（firefox調試）控制台可以看到如下提示：

  已攔截跨源請求：同源策略禁止讀取位於 http://host:port/path 的遠端資源。（原因：CORS 頭缺少 ‘Access-Control-Allow-Origin‘）。

對URL來說，所謂的“同源”包含3個要素：協議相同，主機（網域名稱或IP地址，IP地址則看做是根網域名稱）相同，連接埠相同。 舉例來說，對於“http://test.chench.org/page.html”這個地址，以下情況被認為是同源與不同源的：

URL	結果	原因	說明
http://test.chench.org/page2.html	同源	協議相同，主機相同，連接埠相同
http://test.chench.org/dir2/page.html	同源	協議相同，主機相同，連接埠相同	相同網域名稱下的不同目錄
http://102.12.34.123/page.html	不同源	主機不同	網域名稱與網域名稱對應ip也不同源
http://test2.chench.org/page.html	不同源	主網域名稱相同，子網域名稱不同
http://chench.org/page.html	不同源	網域名稱不同	相同頂層網域，不同次層網域
http://test.chench.org:81/page.html	不同源	連接埠不同	相同網域名稱，不同連接埠
https://test.chench.org/page.html	不同源	協議不同	相同網域名稱，不同協議
http://blog.icehoney.me/page.html	不同源	主機不同	不同網域名稱

二.為什麼會存在瀏覽器跨域限制？

既然目前各主流瀏覽器都存在跨域限制，那麼為什麼一定要存在這個限制呢？如果沒有跨域限制會出現什麼問題？ 首先，瀏覽器同源策略的提出本來就是為了避免資料安全的問題，即：限制來自不同源的“document”或指令碼，對當前“document”讀取或設定某些屬性。 如果沒有這個限制，將會出現什麼問題？不妨看一下幾個情形：

1. 可能 a.com 的一段 JavaScript 指令碼，在 b.com 未曾載入此指令碼時，也可以隨意塗改 b.com 的頁面（在瀏覽器的顯示中）。
2. 在瀏覽器中同時開啟某電商網站（網域名稱為b.com），同時在開啟另一個網站(a.com)，那麼在a.com網域名稱下的指令碼可以讀取b.com下的Cookie資料，如果Cookie中包含隱私資料，後果不堪設想。
3. 因為可以隨意讀取任意網域名稱下的Cookie資料，很容易發起CSRFg攻擊。

所以，瀏覽器的同源策略是瀏覽器安全的基礎，同源策略一旦出現漏洞被繞過，也將帶來非常嚴重的後果，很多基於同源策略制定的安全方案都將失去效果。

三.對於瀏覽器來說，哪些資源（操作）會受到同源策略的限制？

對於瀏覽器來說，除了DOM，Cookie，XMLHttpRequest會受到同源策略的限制外，瀏覽器載入的一些第三方外掛程式也有各自的同源策略。 最常見的一些外掛程式如 Flash，Java Applet，Silverlight，Google Gears等都有自己的控制策略。 另外，儲存在瀏覽器中的資料，如localStorage和IndexedDB，以源進行分割。每個源都擁有自己單獨的儲存空間，一個源中的Javascript指令碼不能對屬於其它源的資料進行讀寫操作。

四.瀏覽器跨域限制會帶來什麼問題？

隨著互連網的發展，對使用者體驗的要求越來越高，AJAX應用也就越發頻繁，AJAX的本質就是XMLHttpRequest。但XMLHttpRequest受到同源策略的約束，所以不能跨域訪問資源。

五.解決瀏覽器跨域限制的方法有哪些？如何選擇合適的方案？1. JSONP

在瀏覽器中，<script>，<img>，<iframe>，<link>等標籤都可以跨域載入資源，而不受同源策略的限制。這些帶"src"屬性的標籤每次載入時，實際上是由瀏覽器發起了一次GET請求。不同於 XMLHttpRequest 的是，通過src屬性載入的資源，瀏覽器限制了JavaScript的許可權，使其不能讀、寫返回的內容。詳細說明如下：

• <script src="..."></script>標籤嵌入跨域指令碼。語法錯誤資訊只能在同源指令碼中捕捉到。
• <link rel="stylesheet" href="...">標籤嵌入CSS。由於CSS的鬆散的文法規則，CSS的跨域需要一個設定正確的Content-Type訊息頭。不同瀏覽器有不同的限制。
• <img>內嵌圖片。支援的圖片格式包括PNG,JPEG,GIF,BMP,SVG,...
• <video> 和 <audio>嵌入多媒體資源。
• <object>, <embed> 和 <applet>的外掛程式。
• @font-face引入的字型。一些瀏覽器允許跨域字型（ross-origin fonts），一些需要同源字型（same-origin fonts）。
• <frame>和 <iframe>載入的任何資源。網站可以使用X-Frame-Options訊息頭來阻止這種形式的跨域互動。

JSONP就是利用這個特性，可以載入對應的資源，間接繞開了瀏覽器同源策略的限制。 具體來說，就是在用戶端通過動態建立javascript標籤，並給標籤設定src屬性，在訪問請求參數中傳遞需要回調的函數名；同時，服務端在響應jsonp請求時，將資料作為請求參數指定的用戶端回呼函數參數作為傳回值，這樣對於用戶端來說伺服器的響應資料其實是回呼函數的參數，是javascipt對象，而不是字串，因此避免了使用JSON.parse的步驟。

2. CORS（Cross-Origin Resource Sharing）

CORS是一個W3C標準，全稱是"跨域資源共用"（Cross-origin resource sharing）。 它允許瀏覽器向跨原始伺服器發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。 具體來說，根據CORS標準定義，服務端需要在瀏覽器的跨域請求響應中包含指定訊息頭，瀏覽器根據響應訊息決定是否可以訪問跨域資源。

3. WebSocket

WebSocket是一種通訊協定，使用ws://（非加密）和wss://（加密）作為協議首碼。該協議不實行同源政策，只要伺服器支援，就可以通過它進行跨源通訊。

4. 解決方案總結

方案	優點	缺點
jsonp	簡單實用，老式瀏覽器全部支援，伺服器改造非常小。	只支援GET請求，不支援POST等其他類型的HTTP請求，不能解決跨域頁面之間的javasript調用問題
CORS	W3C標準，是跨源AJAX請求的根本解決方案，允許任何類型的請求。
WebSocket	不受瀏覽器同源策略影響	需要服務端支援協議，瀏覽器支援websocket，並非所有瀏覽器都支援websocket。

 

【參考】

https://github.com/acgotaku/WebSecurity/blob/master/docs/content/Browser_Security/Same-Origin-Policy.md 同源策略基本介紹https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy 瀏覽器的同源策略https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS HTTP access control (CORS)http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html 瀏覽器同源政策及其規避方法https://www.zhihu.com/question/25427931 對於瀏覽器的同源策略你是怎樣理解的呢？http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html#m1 JavaScript跨域總結與解決辦法https://www.zhihu.com/question/26379635 為什麼瀏覽器要限制跨域訪問?

 

解決瀏覽器跨域限制發送ajax請求