Web安全技術之瀏覽器的跨域訪問

作者：gp_leo 2015-04-24 10:37:40

安全應用安全

對于Web應用來說，瀏覽器是最重要的客戶端。目前瀏覽器五花八門多得不得了，除了Chrome、IE、Firefox、Safari、Opera這些國外的瀏覽器外，百度、騰訊、360、淘寶、搜狗、傲游之類的，反正能做的都做了。

一、瀏覽器介紹

對于Web應用來說，瀏覽器是最重要的客戶端。

目前瀏覽器五花八門多得不得了，除了Chrome、IE、Firefox、Safari、Opera這些國外的瀏覽器外，百度、騰訊、360、淘寶、搜狗、傲游之類的，反正能做的都做了。

瀏覽器雖然這么多，但瀏覽器內核主要就以下4種：

Trident：IE使用的內核。

Gecko：Firefox使用的內核。

WebKit：Safair和Chrome使用的內核。WebKit由蘋果發明，Chrome也用了，但是Google又開發了V8引擎替換掉了WebKit中的Javascript引擎。

Presto：Opera使用的內核。

國內的瀏覽器基本都是雙核瀏覽器，使用基于WebKit的內核高速瀏覽常用網站，使用Trident內核兼容網銀等網站。

二、同源策略

同源策略是瀏覽器最基本的安全策略，它認為任何站點的內容都是不安全的，所以當腳本運行時，只被允許訪問來自同一站點的資源。

同源是指域名、協議、端口都相同。

如果沒有同源策略，就會發生下面這樣的問題：

惡意網站用一個iframe把真實的銀行登錄頁放到他的頁面上，當用戶使用用戶名密碼登錄時，父頁面的javascript就可以讀取到銀行登錄頁表單中的內容。

甚至瀏覽器的1個Tab頁打開了惡意網站，另一個Tab頁打開了銀行網站，惡意網站中的javascript可以讀取到銀行網站的內容。這樣銀行卡和密碼就能被輕易拿走。#p#

三、跨域訪問

由于同源策略的原因，瀏覽器對跨域訪問做了很多限制，但有時我們的確需要做跨域訪問，那要怎么辦?主要有以下幾種情況：

1. iframe的跨域訪問

同域名下，父頁面可以通過document.getElementById(‘_iframe’).contentWindow.document訪問子頁面的內容，但不同域名下會出現類似下面的錯誤：

Uncaught SecurityError: Blocked a frame with origin “http://a.com” from accessing a frame with origin “http://b.com”. Protocols, domains, and ports must match.

有兩種解決方法：

1). 當主域名相同，子域名不同時，比較容易解決，只需設置相同的document.domain即可。

如http://a.a.com/a.html使用iframe載入http://b.a.com/b.html，且在a.html中有Javascript要修改b.html中元素的內容時，可以像下面的代碼那樣操作。

a.html

<html> 
  <head> 
    <script> 
      document.domain = 'a.com';  
      function changeIframeContent() {  
        var _iframe = document.getElementById('_iframe');  
        var _p = _iframe.contentWindow.document.getElementById('_p');  
        _p.innerHTML = 'Content from a.html';  
      }  
    </script> 
  </head> 
  <body> 
    <iframe id="_iframe" src="http://b.a.com/demo/iframe/subdomain/b.html"></iframe> 
    <br> 
    <input type="button" value="Change iframe content" onclick="changeIframeContent();"/> 
  </body> 
</html>

b.html

<html> 
  <head> 
    <script> 
      document.domain = 'a.com';  
    </script> 
  </head> 
  <body> 
    <p id="_p">b.html</p> 
  </body> 
</html>

2). 當主域名不同時，就非常麻煩了。大致的方法像下面描述的那樣：

a.com下有a.html;

a.html創建iframe加載b.com下的b.html，可在加載b.html時通過?或#將參數傳遞到b.html中;

b.html加載后，可以通過提取location.search或location.hash中的內容獲取a.html傳過來的參數;

b.html創建一個iframe，加載a.com下的c.html，并且參數也通過?或#傳給c.html;

因為c.html和a.html是相同域名，所以c.html可以使用parent.parent訪問到a.html的對象，這樣也就可以將b.html需要傳遞的參數傳回到a.html中。#p#

2. Ajax的跨域訪問

Ajax主要通過XMLHttpRequest對象實現，但是如果通過XMLHttpRequest訪問不同域名下的數據，瀏覽器會出現類似下面的錯誤：

這時可由以下兩種方法解決：

1). 使用script代替XMLHttpRequest，也就是JSONP的方法。利用script標簽的src下加載的js不受同源策略限制，并且加載后的js運行在當前頁面的域下，所以可自由操作當前頁面的內容。

下面的代碼演示了在a.com下的a.html通過b.com下的b.js中的內容來更新自身的p標簽。

a.html

<html> 
  <head> 
    <script> 
      function update_p (content) {  
        document.getElementById("_p").innerHTML = content;  
      }  
      function getFromB() {  
        var _script = document.createElement("script");  
        _script.type = "text/javascript";  
        _script.src = "http://b.com/demo/ajax/b.js";  
        document.getElementsByTagName("head")[0].appendChild(_script);  
      }  
    </script> 
  </head> 
  <body> 
    <p id="_p">a.html</p> 
    <input type="button" value="Get from b.com" onclick="getFromB()"/> 
  </body> 
</html>

b.js

update_p("content from b.js");

在實際使用中，通常a.html會將update_p以callback參數名傳遞給b.com的服務器，服務器動態生成數據后，再用callback參數值包起來作為響應回傳給a.html。

2). 在b.com的服務器返回信息中增加以下頭信息：

Access-Control-Allow-Origin: http://a.com

Access-Control-Allow-Methods: GET

此時瀏覽器便允許a.com讀取使用GET請求b.com的內容。

對于flash來說，會要求在網站根目錄下放一個名為crossdomain.xml的文件，以指明允許訪問的域名來源。文件中的內容類似下面的樣子：

<cross-domain-policy> 
  <allow-access-from domain="*.a.com" /> 
</cross-domain-policy>

#p#

3. 使用HTML5的postMessage方法實現跨域訪問

HTML5增加了跨文檔消息傳輸，下面的例子實現了使用postMessage在不同域間傳遞消息：

a.html

<html> 
  <head> 
    <script> 
      function update_b () {  
        var _iframe = document.getElementById("_iframe");  
    _iframe.contentWindow.postMessage("content from a.html", "http://b.com");  
      }  
    </script> 
  <head> 
  <body> 
    <iframe id="_iframe" src="http://b.com/demo/html5/b.html"></iframe> 
    <br> 
    <input type="button" value="Update b.html" onclick="update_b()"></input> 
  </body> 
</html>

b.html

<html> 
  <head> 
    <script> 
      window.addEventListener("message", function (event) {  
        document.getElementById("_p").innerHTML = event.data;  
      }, false);  
    </script> 
  </head> 
  <body> 
    <p id="_p">b.html</p> 
  </body> 
</html>

在postMessage中要指定接收方的域名，如果發現目標頁面的域名不正確，將拋出類似下面這樣的錯誤：

Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘http://c.com’) does not match the recipient window’s origin (‘http://b.com’).

瀏覽器對跨域訪問的限制是出于安全考慮的，所以在使用一些方法實現跨域訪問時要特別小心。

責任編輯：藍雨淚來源： CSDN博客

Web安全瀏覽器跨域訪問