深入理解前端跨域問題的解決方案——前端面試

前言

受瀏覽器同源策略的限制，本域的js不能操作其他域的頁面對象（比如DOM），安全限制的同時也給注入iframe或是ajax應用帶來了不少麻煩。所以我們要通過一些方法使得本域的js能夠操作其他域的頁面對象，或者其他域的js能操作本域的頁面對象（iframe之間）。

這里需要明確的一點是：所謂的域跟js的存放服務器沒有關系，比如baidu.com的頁面加載了google.com的js，那么此js的所在域是baidu.com而不是google.com。也就是說，此時該js能操作baidu.com的頁面對象，而不能操作google.com的頁面對象。

跨域方法總結

單項跨域

一、使用JSONP跨域

原理：通過script標簽引入的js不收同源策略的限制，而XmlHttpRequest 對象受到同源策略的影響，可以加載跨域服務器上的腳本，用 JSONP 獲取的不是 JSON 數據，而是可以直接運行的 JavaScript 語句。

jsonp包含兩個參數：回調函數和數據。

回調函數是當響應到來時要放在當前頁面被調用的函數。

數據就是傳入回調函數中的json數據，也就是回調函數的參數了。

說了這么多，JSONP怎么用呢？方法有兩個：

1.使用 jQuery 集成的 $.ajax 實現 JSONP 跨域調用

下面的例子，我們將 服務器 3000 上的請求頁面的 JavaScript 代碼為：

// 回調函數
function jsonpCallback(data) {
    console.log("jsonpCallback: " + data.name)
}
$("#submit").click(function() {
    var data = {
        name: $("#name").val(),
        id: $("#id").val()
    };
    $.ajax({
        url: 'http://localhost:3001/ajax/deal',
        data: data,
        dataType: 'jsonp',
        cache: false,
        timeout: 5000,
        // jsonp 字段含義為服務器通過什么字段獲取回調函數的名稱
        jsonp: 'callback',
        // 聲明本地回調函數的名稱，jquery 默認隨機生成一個函數名稱
        jsonpCallback: 'jsonpCallback',
        success: function(data) {
            console.log("ajax success callback: " + data.name)
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus + ' ' + errorThrown);
        }
    });
});

 服務器 3001 上對應的處理函數為：

app.get('/ajax/deal', function(req, res) {
    console.log("server accept: ", req.query.name, req.query.id)
    var data = "{" + "name:'" + req.query.name + " - server 3001 process'," + "id:'" + req.query.id + " - server 3001 process'" + "}"
    var callback = req.query.callback  //獲得請求端回調函數
    var jsonp = callback + '(' + data + ')'
    console.log(jsonp)
    res.send(jsonp)
    res.end()
})

這里一定要注意 data 中字符串拼接，不能直接將 JSON 格式的 data 直接傳給回調函數，否則會發生編譯錯誤： parsererror Error: jsonpCallback was not called。

2.使用 <script> 標簽原生實現 JSONP

經過上面的事件，你是不是覺得 JSONP 的實現和 Ajax 大同小異？

其實，由於實現的原理不同，由 JSONP 實現的跨域調用不是通過 XmlHttpRequset 對象，而是通過 script 標簽，所以在實現原理上，JSONP 和 Ajax 已經一點關系都沒有了。看上去形式相似只是由於 jQuery 對 JSONP 做了封裝和轉換。

比如在上面的例子中，我們假設要傳輸的數據 data 格式如下：

{
    name: "chiaki",
    id": "3001"
}

那么數據是如何傳輸的呢？HTTP 請求頭的第一行如下：

GET /ajax/deal?callback=jsonpCallback&name=chiaki&id=3001&_=1473164876032 HTTP/1.1

可見，即使形式上是用 POST 傳輸一個 JSON 格式的數據，其實發送請求時還是轉換成 GET 請求。

其實如果理解 JSONP 的原理的話就不難理解為什么只能使用 GET 請求方法了。由於是通過 script 標簽進行請求，所以上述傳輸過程根本上是以下的形式：

<script src = 'http://localhost:3001/ajax/deal?callback=jsonpCallback&name=chiaki&id=3001&_=1473164876032'></script>

這樣從服務器返回的代碼就可以直接在這個 script 標簽中運行了。下面我們自己實現一個 JSONP：

服務器 3000請求頁面的 JavaScript 代碼中，只有回調函數 jsonpCallback：

 

function jsonpCallback(data) {
    console.log("jsonpCallback: "+data.name)
}

服務器 3000請求頁面還包含一個 script 標簽：

 

 

<script src = 'http://localhost:3001/jsonServerResponse?jsonp=jsonpCallback'></script>

服務器 3001上對應的處理函數：

 

app.get('/jsonServerResponse', function(req, res) {
    var cb = req.query.jsonp //這里得到請求頁面的回調函數
    console.log(cb)
      //思考一下為什么這里要這樣寫
    var data = 'var data = {' + 'name: $("#name").val() + " - server 3001 jsonp process",' + 'id: $("#id").val() + " - server 3001 jsonp process"' + '};'
    var debug = 'console.log(data);' //打印var data="";
    var callback = '$("#submit").click(function() {' + data + cb + '(data);' + debug + '});' 
    res.send(callback) //返回的是一個點擊按鈕的事件  
    res.end()
})

與上面一樣，我們在所獲取的參數后面加上 “ - server 3001 jsonp process” 代表服務器對數據的操作。從代碼中我么可以看到，處理函數除了根據參數做相應的處理，更多的也是進行字符串的拼接。

JSONP不足：

1. 只能使用 GET 方法發起請求，不安全，這是由於 script 標簽自身的限制決定的。
2. 不能很好的發現錯誤，並進行處理。與 Ajax 對比，由於不是通過 XmlHttpRequest 進行傳輸，所以不能注冊 success、 error 等事件監聽函數。

 

二、使用 CORS 實現跨域調用

原理：CORS的思想，就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是應該成功，還是應該失敗。

Cross-Origin Resource Sharing（CORS）跨域資源共享是一份瀏覽器技術的規范，提供了 Web 服務從不同域傳來沙盒腳本的方法，以避開瀏覽器的同源策略，是 JSONP 模式的現代版。與 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 請求。 CORS 一般用XMLHttpRequest，這種方式的錯誤處理比 JSONP 要來的好。另一方面，JSONP 可以在不支持 CORS 的老舊瀏覽器上運作。現代的瀏覽器都支持 CORS。

CORS的實現：

還是以 服務器 3000 上的請求頁面向 服務器 3001 發送請求為例。

服務器 3000 上的請求頁面 JavaScript 不變，服務器 3001上對應的處理函數：

app.post('/cors', function(req, res) {
    res.header("Access-Control-Allow-Origin", "*"); //設置請求來源不受限制
    res.header("Access-Control-Allow-Headers", "X-Requested-With");  
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); //請求方式
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    var data = {
        name: req.body.name + ' - server 3001 cors process',
        id: req.body.id + ' - server 3001 cors process'
    }
    console.log(data)
    res.send(data)
    res.end()
})

cors中屬性分析：

• Access-Control-Allow-Origin

The origin parameter specifies a URI that may access the resource. The browser must enforce this. For requests without credentials, the server may specify “*” as a wildcard, thereby allowing any origin to access the resource.

• Access-Control-Allow-Methods

Specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request. The conditions under which a request is preflighted are discussed above.

• Access-Control-Allow-Headers

Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.

 

三、window.name

window 對象的name屬性是一個很特別的屬性，當該window的location變化，然后重新加載，它的name屬性可以依然保持不變。那么我們可以在頁面 A中用iframe加載其他域的頁面B，而頁面B中用JavaScript把需要傳遞的數據賦值給window.name，iframe加載完成之后（iframe.onload），頁面A修改iframe的地址，將其變成同域的一個地址，然后就可以讀出iframe的window.name的值了（因為A中的window.name和iframe中的window.name互相獨立的，所以不能直接在A中獲取window.name，而要通過iframe獲取其window.name）。這個方式非常適合單向的數據請求，而且協議簡單、安全。不會像JSONP那樣不做限制地執行外部腳本。

 

四、服務端代理

在數據提供方沒有提供對JSONP協議或者window.name協議的支持，也沒有對其它域開放訪問權限，我們可以通過server proxy的方式來抓取數據。例如當baidu.com域下的頁面需要請求google.com下的資源文件getUsers.php時，直接發送一個指向google.com/getUsers.php的Ajax請求肯定是會被瀏覽器阻止。這時，我們在Baidu.com下配一個代理，然后把Ajax請求綁定到這個代理路徑下，例如baidu.com/proxy/,然后這個代理發送HTTP請求訪問google.com下的getUsers.php，跨域的HTTP請求是在服務器端進行的（服務器端沒有同源策略的限制），客戶端並沒有產生跨域的Ajax請求。這個跨域方式下不需要和目標資源簽訂協議，帶有侵略性。

 

五、flash URLLoader

flash有自己的一套安全策略，服務器可以通過crossdomain.xml文件來聲明能被哪些域的SWF文件訪問，SWF也可以通過API來確定自身能被哪些域的SWF加載。當跨域訪問資源時，例如從域baidu.com請求域google.com上的數據，我們可以借助flash來發送HTTP請求。首先，修改域google.com上的crossdomain.xml(一般存放在根目錄，如果沒有需要手動創建) ，把baidu.com加入到白名單。其次，通過Flash URLLoader發送HTTP請求，最后，通過Flash API把響應結果傳遞給JavaScript。Flash URLLoader是一種很普遍的跨域解決方案，不過需要支持iOS的話，這個方案就不可行了。

 

六、Access Control

 此跨域方法目前只在很少的瀏覽器中得以支持，這些瀏覽器可以發送一個跨域的HTTP請求（Firefox, Google Chrome等通過XMLHTTPRequest實現，IE8下通過XDomainRequest實現），請求的響應必須包含一個Access- Control-Allow-Origin的HTTP響應頭，該響應頭聲明了請求域的可訪問權限。例如baidu.com對google.com下的getUsers.php發送了一個跨域的HTTP請求（通過ajax），那么getUsers.php必須加入如下的響應頭：

header("Access-Control-Allow-Origin: http://www.baidu.com");//表示允許baidu.com跨域請求本文件

 

七、document.domain（兩個iframe之間）

通過修改document的domain屬性，我們可以在域和子域或者不同的子域之間通信。同域策略認為域和子域隸屬於不同的域，比如baidu.com和 youxi.baidu.com是不同的域，這時，我們無法在baidu.com下的頁面中調用youxi.baidu.com中定義的JavaScript方法。但是當我們把它們document的domain屬性都修改為baidu.com，瀏覽器就會認為它們處於同一個域下，那么我們就可以互相獲取對方數據或者操作對方DOM了。

問題：

1、安全性，當一個站點被攻擊后，另一個站點會引起安全漏洞。

2、如果一個頁面中引入多個iframe，要想能夠操作所有iframe，必須都得設置相同domain。

 

八、location.hash（兩個iframe之間），又稱FIM，Fragment Identitier Messaging的簡寫

因為父窗口可以對iframe進行URL讀寫，iframe也可以讀寫父窗口的URL，URL有一部分被稱為hash，就是#號及其后面的字符，它一般用於瀏覽器錨點定位，Server端並不關心這部分，應該說HTTP請求過程中不會攜帶hash，所以這部分的修改不會產生HTTP請求，但是會產生瀏覽器歷史記錄。此方法的原理就是改變URL的hash部分來進行雙向通信。每個window通過改變其他 window的location來發送消息（由於兩個頁面不在同一個域下IE、Chrome不允許修改parent.location.hash的值，所以要借助於父窗口域名下的一個代理iframe），並通過監聽自己的URL的變化來接收消息。這個方式的通信會造成一些不必要的瀏覽器歷史記錄，而且有些瀏覽器不支持onhashchange事件，需要輪詢來獲知URL的改變，最后，這樣做也存在缺點，諸如數據直接暴露在了url中，數據容量和類型都有限等。下面舉例說明：

 假如父頁面是baidu.com/a.html，iframe嵌入的頁面為google.com/b.html（此處省略了域名等url屬性），要實現此兩個頁面間的通信可以通過以下方法。

1、a.html傳送數據到b.html

（1） a.html下修改iframe的src為google.com/b.html#paco

（2） b.html監聽到url發生變化，觸發相應操作

2、b.html傳送數據到a.html，由於兩個頁面不在同一個域下IE、Chrome不允許修改parent.location.hash的值，所以要借助於父窗口域名下的一個代理iframe

（1） b.html下創建一個隱藏的iframe，此iframe的src是baidu.com域下的，並掛上要傳送的hash數據，如src="http://www.baidu.com/proxy.html#data"

（2） proxy.html監聽到url發生變化，修改a.html的url（因為a.html和proxy.html同域，所以proxy.html可修改a.html的url hash）

（3） a.html監聽到url發生變化，觸發相應操作 

b.html頁面的關鍵代碼如下

try {  
    parent.location.hash = 'data';  
} catch (e) {  
    // ie、chrome的安全機制無法修改parent.location.hash，  
    var ifrproxy = document.createElement('iframe');  
    ifrproxy.style.display = 'none';  
    ifrproxy.src = "http://www.baidu.com/proxy.html#data";  
    document.body.appendChild(ifrproxy);  
} 

proxy.html頁面的關鍵代碼如下

//因為parent.parent（即baidu.com/a.html）和baidu.com/proxy.html屬於同一個域，所以可以改變其location.hash的值  
parent.parent.location.hash = self.location.hash.substring(1);  

九、使用HTML5的postMessage方法（兩個iframe之間或者兩個頁面之間）

高級瀏覽器Internet Explorer 8+, chrome，Firefox , Opera  和 Safari 都將支持這個功能。這個功能主要包括接受信息的"message"事件和發送消息的"postMessage"方法。比如baidu.com域的A頁面通過iframe嵌入了一個google.com域的B頁面，可以通過以下方法實現A和B的通信

A頁面通過postMessage方法發送消息：

window.onload = function() {  
    var ifr = document.getElementById('ifr');  
    var targetOrigin = "http://www.google.com";  
    ifr.contentWindow.postMessage('hello world!', targetOrigin);  
};  

postMessage的使用方法：

otherWindow.postMessage(message, targetOrigin);

otherWindow:   指目標窗口，也就是給哪個window發消息，是 window.frames 屬性的成員或者由 window.open 方法創建的窗口

message:   是要發送的消息，類型為 String、Object (IE8、9 不支持)

targetOrigin:   是限定消息接收范圍，不限制請使用 '*'

B頁面通過message事件監聽並接受消息:

var onmessage = function (event) {  
  var data = event.data;//消息  
  var origin = event.origin;//消息來源地址  
  var source = event.source;//源Window對象  
  if(origin=="http://www.baidu.com"){  
console.log(data);//hello world!  
  }  
};  
if (typeof window.addEventListener != 'undefined') {  
  window.addEventListener('message', onmessage, false);  
} else if (typeof window.attachEvent != 'undefined') {  
  //for ie  
  window.attachEvent('onmessage', onmessage);  
} 

同理，也可以B頁面發送消息，然后A頁面監聽並接受消息。

總結

跨域的方法很多，不同的應用場景我們都可以找到一個最合適的解決方案。比如單向的數據請求，我們應該優先選擇JSONP或者window.name，雙向通信優先采取location.hash，在未與數據提供方達成通信協議的情況下我們也可以用server proxy的方式來抓取數據。