跨域的那些事兒

前言

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

造成跨域的兩種策略

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

1. DOM同源策略：禁止對不同源頁面DOM進行操作。這裡主要場景是iframe跨域的情況，不同域名的iframe是限制互相訪問的。
2. 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屬性進行跨域。

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

// 定義一個fun函數nfunction fun(fata) {n console.log(data);n};n// 創建一個腳本，並且告訴後端回調函數名叫funnvar body = document.getElementsByTagName(body)[0];nvar script = document.gerElement(script);nscript.type = text/javasctipt;nscript.src = demo.js?callback=fun;nbody.appendChild(script);n

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

fun({"name": "name"})n

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

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

> 伺服器代理

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

伺服器代理是萬能的。

> document.domain來跨子域

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

使用window.name進行跨域

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

//a頁面的代碼n<script type="text/javascript">n iframe = document.createElement(iframe);n iframe.style.display = none;n var state = 0;nn iframe.onload = function() {n if(state === 1) {n var data = iframe.contentWindow.name;n console.log(data);n iframe.contentWindow.document.write();n iframe.contentWindow.close();n document.body.removeChild(iframe);n } else if(state === 0) {n state = 1;n iframe.contentWindow.location = n http://m.zhuanzhuan.58.com:8887/b.html;n }n };n document.body.appendChild(iframe);n</script>n

//b頁面代碼n<script type="text/javascript">n window.name = "hello";n</script>n

> location.hash跨域

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

//a頁面的代碼n<script type="text/javascript">n iframe = document.createElement(iframe);n iframe.style.display = none;n var state = 0;nn iframe.onload = function() {n if(state === 1) {n var data = window.location.hash;n console.log(data);n iframe.contentWindow.document.write();n iframe.contentWindow.close();n document.body.removeChild(iframe);n } else if(state === 0) {n state = 1;n iframe.contentWindow.location = n http://m.zhuanzhuan.58.com:8887/b.html;n }n };n document.body.appendChild(iframe);n</script>n

//b頁面代碼n<script type="text/javascript">n parent.location.hash = "world";n</script>n

> 使用postMessage實現頁面之間通信

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

• 頁面和新開的窗口的數據交互。
• 多窗口之間的數據交互。
• 頁面與所嵌套的iframe之間的信息傳遞。

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

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

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

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