JavaScript兩種跨域技術全面介紹

這一策略對於JavaScript代碼能夠訪問的頁面內容做了很重要的限制，即JavaScript只能訪問與包含它的文檔在同一域下的內容。

JavaScript這個安全性原則在進行多iframe或多視窗編程、以及Ajax編程時顯得尤為重要。根據這個策略，在baidu.com下的頁面中包含的JavaScript代碼，不能訪問在google.com網域名稱下的頁面內容；甚至不同的子網域名稱之間的頁面也不能通過JavaScript代碼互相訪問。對於Ajax的影響在於，通過XMLHttpRequest實現的Ajax請求，不能向不同的域提交請求，例如，在abc.example.com下的頁面，不能向def.example.com提交Ajax請求，等等。

然而，當進行一些比較深入的前端編程的時候，不可避免地需要進行跨網域作業，這時候“同源策略”就顯得過於苛刻。本文就這個問題，概括了跨域所需要的一些技術。

下面我們分兩種情況討論跨域技術：首先討論不同子域的跨域技術，然後討論完全不同域的跨域技術。

（一）不同子域的跨域技術。

我們分兩個問題來分別討論：第一個問題是如何跨不同子域進行JavaScript調用；第二個問題是如何向不同子域提交Ajax請求。

先來解決第一個問題，假設example.com域下有兩個不同子域：abc.example.com和def.example.com。現在假設在def.example.com下面有一個頁面，裡面定義了一個JavaScript函數：
複製代碼 代碼如下:function funcInDef() {
    .....
}
我們想在abc.example.com下的某個頁面裡調用上面的函數。再假設我們要討論的abc.example.com下面的這個頁面是以iframe形式嵌入在def.example.com下面那個頁面裡的，這樣我們可能試圖在iframe裡做如下調用：

複製代碼 代碼如下:window.top.funcInDef();
好，我們注意到，這個調用是被前面講到的“同源策略”所禁止的，JavaScript引擎會直接拋出一個異常。
為了實現上述調用，我們可以通過修改兩個頁面的domain屬性的方法做到。例如，我們可以將上面在abc.example.com和def.example.com下的兩個頁面的頂端都加上如下的JavaScript程式碼片段：
複製代碼 代碼如下:document.domain = "example.com";

這樣，兩個頁面就變為同域了，前面的調用也可以正常執行了。

這裡需要注意的一點是，一個頁面的document.domain屬性只能設定成一個更頂級的網域名稱（除了頂層網域），但不能設定成比當前網域名稱更深層的子網域名稱。例如，abc.example.com的頁面只能將它的domain設定成example.com，不能設定成sub.abc.example.com，當然也不能設定成頂層網域com。

上面的例子討論的是兩個頁面屬於iframe嵌套關係的情況，當兩個頁面是開啟與被開啟的關係時，原理也完全一樣。

下面我們來解決第二個問題：如何向不同子域提交Ajax請求。
通常情況下，我們會用與下面類似的代碼來建立一個XMLHttpRequest對象：
複製代碼 代碼如下:factories = [function() {
    return new XMLHttpRequest();
},
function() {
    return new ActiveXObject("Msxml2.XMLHTTP");
},
function() {
    return new ActiveXObject("Microsoft.XMLHTTP");
}];
function newRequest() {
    for (var i = 0; i & lt; factories.length; i++) {
        try {
            var factory = factories[i];
            return factory();
        } catch(e) {}
    }
    return null;
}
上面的代碼中引用ActiveXObject，是為了相容IE6系列瀏覽器。每次我們調用newRequest函數，就獲得了一個剛剛建立的Ajax對象，然後用這個Ajax對象來發送HTTP請求。例如，下面的代碼向abc.example.com發送了一個GET請求：
複製代碼 代碼如下:
var request = newRequest();
request.open("GET", "http://abc.example.com" );
request.send(null);

假設上面的程式碼封裝含在一個abc.example.com網域名稱下的頁面裡，則這個GET請求可以正常發送成功，沒有任何問題。然而，如果現在要向def.example.com發送請求，則出現跨域問題，JavaScript引擎拋出異常。
解決的辦法是，在def.example.com域下放置一個跨域檔案，假設叫crossdomain.html；然後將前面的newRequest函數的定義移到這個跨域檔案中；最後像之前修改document.domain值的做法一樣，在crossdomain.html檔案和abc.example.com域下調用Ajax的頁面頂端，都加上：
複製代碼 代碼如下:document.domain = "example.com";

為了使用跨域檔案，我們在abc.example.com域下調用Ajax的頁面中嵌入一個隱藏的指向跨域檔案的iframe，例如：
複製代碼 代碼如下:<iframe name="xd_iframe" style="display:none" src="http://def.example.com/crossdomain.html">
</iframe>

這時abc.example.com域下的頁面和跨域檔案crossdomain.html都在同一個域（example.com）下，我們可以在abc.example.com域下的頁面中去調用crossdomain.html中的newRequest函數：
複製代碼 代碼如下:var request = window.frames["xd_iframe"].newRequest();
這樣獲得的request對象，就可以向http://def.example.com發送HTTP請求了。

（二）完全不同域的跨域技術。

如果頂級網域名稱都不相同，例如example1.com和example2.com之間想通過JavaScript在前端通訊，則所需要的技術更複雜些。

在講解不同域的跨域技術之前，我們首先明確一點，下面要講的技術也同樣適用於前面跨不同子域的情況，因為跨不同子域只是跨域問題的一個特例。當然，在恰當的情況下使用恰當的技術，能夠保證更優的效率和更高的穩定性。

簡言之，根據不同的跨域需求，跨域技術可以歸為下面幾類：
1、JSONP跨域GET請求
2、通過iframe實現跨域
3、flash跨域HTTP請求
4、window.postMessage
下面詳細介紹各種技術。
1. JSONP。
利用在頁面中建立<script>節點的方法向不同域提交HTTP請求的方法稱為JSONP，這項技術可以解決跨域提交Ajax請求的問題。JSONP的工作原理如下所述：
假設在http://example1.com/index.php這個頁面中向http://example2.com/getinfo.php提交GET請求，我們可以將下面的JavaScript代碼放在http://example1.com/index.php這個頁面中來實現：
複製代碼 代碼如下:var eleScript= document.createElement("script");
eleScript.type = "text/javascript";
eleScript.src = "http://example2.com/getinfo.php";
document.getElementsByTagName("HEAD")[0].appendChild(eleScript);

當GET請求從http://example2.com/getinfo.php返回時，可以返回一段JavaScript代碼，這段代碼會自動執行，可以用來負責調用http://example1.com/index.php頁面中的一個callback函數。

JSONP的優點是：它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制；它的相容性更好，在更加古老的瀏覽器中都可以運行，不需要XMLHttpRequest或ActiveX的支援；並且在請求完畢後可以通過調用callback的方式回傳結果。

JSONP的缺點則是：它只支援GET請求而不支援POST等其它類型的HTTP請求；它只支援跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript調用的問題。

2. 通過iframe實現跨域。

iframe跨域的方式，功能強於JSONP，它不僅能用來跨域完成HTTP請求，還能在前端跨域實現JavaScript調用。因此，完全不同域的跨域問題，通常採用iframe的方式來解決。

與JSONP技術通過建立<script>節點向不同的域提交GET請求的工作方式類似，我們也可以通過在http://example1.com/index.php頁面中建立指向http://example2.com/getinfo.php的iframe節點跨域提交GET請求。然而，請求返回的結果無法回調http://example1.com/index.php頁面中的callback函數，因為受到“同源策略”的影響。

為瞭解決這個問題，我們需要在example1.com下放置一個跨域檔案，比如路徑是http://example1.com/crossdomain.html。

當http://example2.com/getinfo.php這個請求返回結果的時候，它大體上有兩個選擇。
第一個選擇是，它可以在iframe中做一個302跳轉，跳轉到跨域檔案http://example1.com/crossdomain.html，同時將返回結果經過URL編碼之後作為參數綴在跨域檔案URL後面，例如http://example1.com/crossdomain.html?result=<URL-Encoding-Content>。

另一個選擇是，它可以在返回的頁面中再嵌入一個iframe，指向跨域檔案，同時也是將返回結果經過URL編碼之後作為參數綴在跨域檔案URL後面。

在跨域檔案中，包含一段JavaScript代碼，這段程式碼完成的功能，是從URL中提取結果參數，經過一定處理後調用原來的http://example1.com/index.php頁面中的一個預先約定好的callback函數，同時將結果參數傳給這個函數。http://example1.com/index.php頁面和跨域檔案是在同一個域下的，因此這個函數調用可以通過。跨域檔案所在iframe和原來的http://example1.com/index.php頁面的關係，在前述第一種選擇下，後者是前者的父視窗，在第二種選擇下，後者是前者的父視窗的父視窗。

根據前面的敘述，有了跨域檔案之後，我們就可以實現通過iframe方式在不同域之間進行JavaScript調用。這個調用過程可以完全跟HTTP請求無關，例如有些網站可以支援動態地調整在頁面中嵌入的第三方iframe的高度，這其實是通過在第三方iframe裡面檢測自己頁面的高度變化，然後通過跨域方式的函數調用將這個變化告知父視窗來完成的。

既然利用iframe可以實現跨域JavaScript調用，那麼跨域提交POST請求等其它類型的HTTP請求就不是難事。例如我們可以跨域調用目標域的JavaScript代碼在目標域下提交Ajax請求（GET/POST/etc.），然後將返回的結果再跨域傳原來的域。

使用iframe跨域，優點是功能強大，支援各種瀏覽器，幾乎可以完成任何跨域想做的事情；缺點是實現複雜，要處理很多瀏覽器安全色問題，並且傳輸的資料不宜過大，過大了可能會超過瀏覽器對URL長度的限制，要考慮對資料進行分段傳輸等。

3. 利用flash實現跨域HTTP請求

據稱，flash在瀏覽器中的普及率高達90%以上。

flash代碼和JavaScript代碼之間可以互相調用，並且flash的“安全沙箱”機制與JavaScript的安全機制並不盡相同，因此，我們可以利用flash來實現跨域提交HTTP請求（支援GET/POST等）。
例如，我們用瀏覽器訪問http://example1.com/index.php這個頁面，在這個頁面中引用了http://example2.com/flash.swf這個flash檔案，然後在flash代碼中向http://example3.com/webservice.php發送HTTP請求。

這個請求能否被成功發送，取決於在example3.com的根路徑下是否放置了一個crossdomain.xml以及這個crossdomain.xml的配置如何。flash的“安全沙箱”會保證：僅當example3.com伺服器在根路徑下確實放置了crossdomain.xml檔案並且在這個檔案中配置了允許接受來自example2.com的flash的請求時，這個請求才能真正成功。下面是一個crossdomain.xml檔案內容的例子：

複製代碼 代碼如下:
<?xml version="1.0"?>
<cross-domain-policy>
    <allow-access-from domain="example2.com" />
</cross-domain-policy>

4. window.postMessage
　　window.postMessage是HTML標準的下一個版本HTML5支援的一個新特性。受當前互連網技術突飛猛進的影響，瀏覽器跨域通訊的需求越來越強烈，HTML標準終於把跨域通訊考慮進去了。但目前HTML5仍然只是一個draft。
　　window.postMessage是一個安全的實現直接跨域通訊的方法。但是目前並不是所有瀏覽器都能支援，只有Firefox 3、Safari 4和IE8可以支援這個調用。

使用它向其它視窗發送訊息的調用方式大概如下:
複製代碼 代碼如下:otherWindow.postMessage(message, targetOrigin);
在接收的視窗，需要設定一個事件處理函數來接收發過來的訊息：
複製代碼 代碼如下:window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
    if (event.origin !== "http://example.org:8080") return;
}
訊息包含三個屬性：data、origin（攜帶發送視窗所在域的真實資訊）和source（代表發送視窗的handle）。

安全性考慮：使用window.postMessage，必需要使用訊息的origin和source屬性來驗證寄件者的身份，否則會造成XSS漏洞。

window.postMessage在功能上同iframe實現的跨域功能同樣強大，並且使用簡單，效率更高，但缺點是它目前在瀏覽器安全色方面有待提高。

需要對原文補充的是，在IE6，IE7下可利用IE的Opener可賦值為Object或Function的漏洞，提供postMessage方案的補充方案：
首頁面：

複製代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CrossDomain</title>
</head>
<body>
    <iframe src="http://sh-tanzhenlin/CrossDomain-child.html"
        frameborder="0" visible="false" height="0" width="0" id="ifrChild"></iframe>

    <script type="text/javascript">
        var child = document.getElementById("ifrChild");
        var openerObject = {
                funcInParent:function(arg){
                    alert(arg);
                    alert('executed by a function in parent page');
                }
            }

        if(!+'\v1' && !'1'[0]){ //test browser is ie6 or ie7  
            //crack
            child.contentWindow.opener = openerObject;
        }
        else{
            //postMessage showtime
        }

        function onClick(){
            //debugger;
            openerObject.funcInIframe('data from parent page ');
        }
    </script>
    <input type="button" value="click me" onclick="onClick()" />
</body>
</html>

用iframe內嵌其它域下的頁面：

複製代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
               <script type="text/javascript">
                        onload = function(){
                                if(!+'\v1' && !'1'[0]){ // test browser if is ie6 or ie7
                                        window.opener.funcInIframe=function(arg){
                                                alert(arg);
                                                alert('executed by a function in iframe');
                                        }
                                        window.opener.funcInParent('data from iframe')
                                }
                        }
                </script>
        </head>
        <body>
        </body>
</html>

註：postMessage方式正以意想不到的速度得到各種新瀏覽器的支援，應予以著重考慮。