淺析跨域請求

前言

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

造成跨域的原因

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

• 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)

CORS是一個W3C標准，全稱是”跨域資源共享”（Cross-origin resource sharing）。
對於這個方式，阮一峰老師總結的文章特別好，希望深入了解的可以看一下http://www.ruanyifeng.com/blog/2016/04/cors.html。

通過在HTTP Header中加入擴展字段，服務器在相應網頁頭部加入字段表示允許訪問的domain和HTTP method，客戶端檢查自己的域是否在允許列表中，決定是否處理響應。

實現的基礎是JavaScript不能夠操作HTTP Header。某些瀏覽器插件實際上是具有這個能力的。

服務器端在HTTP的響應頭中加入（頁面層次的控制模式）：

Access-Control-Allow-Origin: example.com
Access-Control-Request-Method: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin

Access-Control-Expose-Headers: Content-Range

Access-Control-Max-Age: 3600

多個域名之間用逗號分隔，表示對所示域名提供跨域訪問權限。"*"表示允許所有域名的跨域訪問。

客戶端可以有兩種行為：

1. 發送OPTIONS請求，請求Access-Control信息。如果自己的域名在允許的訪問列表中，則發送真正的請求，否則放棄請求發送。
2. 直接發送請求，然后檢查response的Access-Control信息，如果自己的域名在允許的訪問列表中，則讀取response body，否則放棄。

本質上服務端的response內容已經到達本地，JavaScript決定是否要去讀取。

這里我就簡單的說一說大體流程。

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
   這樣，我們就可以跨域請求接口了。

在django的實際項目中,跨域用CORS技術構建一個中間件，來解決跨域問題：

class CORSMiddleware(MiddlewareMixin):

    def process_response(self, request, response):
        """
        解決跨域問題
        :param request:
        :param response:
        :return:
        """
        # 添加響應頭

        # 允許你的域名來獲取我的數據
        response['Access-Control-Allow-Origin'] = "*"

        # 允許你攜帶Content-Type請求頭
        # response['Access-Control-Allow-Headers'] = "Content-Type"

        # 允許你發送DELETE,PUT
        # response['Access-Control-Allow-Methods'] = "DELETE,PUT"

        return response

jsonp實現跨域

基本原理就是通過動態創建script標簽,然后利用src屬性進行跨域。
這么說比較模糊，我們來看個例子:

<script>
//定義一個fun函數
function fun(data) { 
    console.log(data); 
} 

// 創建一個腳本，並且告訴后端回調函數名叫fun 
var body= document.getElementsByTagName('body')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.src= 'demo.js?callback=fun'; 
body.appendChild(script); 
</script>

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

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

當然，這個只是一個原理演示，實際情況下，我們需要動態創建這個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.

代碼如下：

//a頁面的代碼
<script type="text/javascript">
    iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    var state = 0;

    iframe.onload = function() {
      if(state === 1) {
          var data = iframe.contentWindow.name;
          console.log(data);
          iframe.contentWindow.document.write('');
          iframe.contentWindow.close();
          document.body.removeChild(iframe);
      } else if(state === 0) {
          state = 1;
          iframe.contentWindow.location = 
          'http://m.zhuanzhuan.58.com:8887/b.html';
      }
    };
    document.body.appendChild(iframe);
</script>

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

window.location.hash跨域

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

注意：父子框架受同源策略的限制

代碼如下:

//a頁面的代碼
<script type="text/javascript">
    iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    var state = 0;

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

window.top

window.top方法可以訪問最頂層的window對象，可以取到最頂層window對象的屬性和方法。這樣子框架就可以操作父頁面的交互了。window.parent可以得到父框架的window對象。

代碼如下：

//a頁面代碼
<script type="text/javascript">
    function funa(){
        console.log("a頁面的方法");
    }
    iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = 'http://m.zhuanzhuan.58.com:8887/b.html';
    document.body.appendChild(iframe);
</script>
//b頁面的代碼
<script type="text/javascript">
console.log(window.top.funa());
function funb(){
  console.log("b頁面的方法");
}
iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = 'http://m.zhuanzhuan.58.com:8887/c.html';
document.body.appendChild(iframe);
</script>
//c頁面的代碼
<script type="text/javascript">
  console.log(window.parent.funb());
</script>

使用postMessage實現頁面之間通信

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

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

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

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

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