跨域的那些事兒

前言

最近做項目的時候遇到了一些跨域問題，雖然網上對於跨域的問題分享還挺多的。不過當我實際遇到的時候還是有點懵。趁項目剛上線完，寫篇文章總結下。

造成跨域的兩種策略

瀏覽器的同源策略會導致跨域，這裡同源策略又分為以下兩種

• DOM同源策略：禁止對不同源頁面DOM進行操作。這裡主要場景是iframe跨域的情況，不同功能變數名稱的iframe是限制互相訪問的。

• XmlHttpRequest同源策略：禁止使用XHR對象向不同源的伺服器地址發起HTTP請求。

   

只要協議、功能變數名稱、埠有任何一個不同，都被當作是不同的域，之間的請求就是跨域操作。

為什麼要有跨域限制

瞭解完跨域之後，想必大家都會有這麼一個思考，為什麼要有跨域的限制，瀏覽器這麼做是出於何種原因呢。其實仔細想一想就會明白，跨域限制主要是為了安全考慮。

AJAX同源策略主要用來防止CSRF攻擊。如果沒有AJAX同源策略，相當危險，我們發起的每一次HTTP請求都會帶上請求地址對應的cookie，那麼可以做如下攻擊：

1. 用戶登錄了自己的銀行頁面 http://mybank.com，http://mybank.com向用戶的cookie中添加用戶標識。

2. 用戶瀏覽了惡意頁面 http://evil.com。執行了頁面中的惡意AJAX請求代碼。

3. http://evil.com向http://mybank.com發起AJAX HTTP請求，請求會預設把http://mybank.com對應cookie也同時發送過去。

4. 銀行頁面從發送的cookie中提取用戶標識，驗證用戶無誤，response中返回請求數據。此時數據就泄露了。

5. 而且由於Ajax在後臺執行，用戶無法感知這一過程。

    

DOM同源策略也一樣，如果iframe之間可以跨域訪問，可以這樣攻擊：

1. 做一個假網站，裡面用iframe嵌套一個銀行網站 http://mybank.com。

2. 把iframe寬高啥的調整到頁面全部，這樣用戶進來除了功能變數名稱，別的部分和銀行的網站沒有任何差別。

3. 這時如果用戶輸入賬號密碼，我們的主網站可以跨域訪問到http://mybank.com的dom節點，就可以拿到用戶的輸入了，那麼就完成了一次攻擊。

所以說有了跨域跨域限制之後，我們才能更安全的上網了。

跨域的解決方式

跨域資源共用

CORS是一個W3C標準，全稱是”跨域資源共用”（Cross-origin resource sharing）。
對於這個方式，阮一峰老師總結的文章特別好，希望深入瞭解的可以看一下http:<//www.ruanyifeng.com/blog/2016/04/cors.html>。
這裡我就簡單的說一說大體流程。

1. 對於客戶端，我們還是正常使用xhr對象發送ajax請求。
   唯一需要註意的是，我們需要設置我們的xhr屬性withCredentials為true，不然的話，cookie是帶不過去的哦，設置： xhr.withCredentials = true;

2. 對於伺服器端，需要在 response header中設置如下兩個欄位:
   Access-Control-Allow-Origin: http://www.yourhost.com
   Access-Control-Allow-Credentials:true
   這樣，我們就可以跨域請求介面了。

jsonp實現跨域

基本原理就是通過動態創建script標簽,然後利用src屬性進行跨域。

這麼說比較模糊，我們來看個例子:

返回的js腳本，直接會執行。所以就執行了事先定義好的fun函數了，並且把數據傳入了進來。

當然，這個只是一個原理演示，實際情況下，我們需要動態創建這個fun函數，並且在數據返回的時候銷毀它。

因為在實際使用的時候，我們用的各種ajax庫，基本都包含了jsonp的封裝，不過我們還是要知道一下原理，不然就不知道為什麼jsonp不能發post請求了~

伺服器代理

瀏覽器有跨域限制，但是伺服器不存在跨域問題，所以可以由伺服器請求所要域的資源再返回給客戶端。

伺服器代理是萬能的。

document.domain來跨子域

對於主功能變數名稱相同，而子功能變數名稱不同的情況，可以使用document.domain來跨域
這種方式非常適用於iframe跨域的情況，直接看例子吧
比如a頁面地址為 a.yourhost.com b頁面為 b.yourhost.com。
這樣就可以通過分別給兩個頁面設置 document.domain = yourhost.com 來實現跨域。
之後，就可以通過 parent 或者 window[‘iframename’]等方式去拿到iframe的window對象了。

使用window.name進行跨域

window.name跨域同樣是受到同源策略限制，父框架和子框架的src必須指向統一功能變數名稱。window.name的優勢在於，name的值在不同的頁面(或者不同的功能變數名稱)，載入後仍然存在，除非你顯示的更改。並且支持的長度達到2M.

location.hash跨域

location.hash方式跨域，是子框架具有修改父框架src的hash值，通過這個屬性進行傳遞數據，且更改hash值，頁面不會刷新。但是傳遞的數據的位元組數是有限的。

使用postMessage實現頁面之間通信

信息傳遞除了客戶端與伺服器之前的傳遞，還存在以下幾個問題：

• 頁面和新開的視窗的數據交互。

• 多視窗之間的數據交互。

• 頁面與所嵌套的iframe之間的信息傳遞。

   

window.postMessage是一個HTML5的api，允許兩個視窗之間進行跨域發送消息。這個應該就是以後解決dom跨域通用方法了，具體可以參照MDN。

補充： 其實還有一些方法，比如window.name和location.hash。就很適用於iframe的跨域，不過iframe用的比較少了，所以這些方法也就有點過時了。

這些就是我對跨域的瞭解了，實際情況下，一般用cors，jsonp等常見方法就可以了。不過遇到了一些非常規情況，我們還是需要知道有更多的方法可以選擇的

以上便是這次的文章分享了，可以給作者留言相互學習。也可以關註他的個人博客 https://wangningbo93.github.io/。

如果你喜歡我們的文章，關註我們的公眾號和我們互動吧。