跨域 XMLHttpRequest 請求

普通網(wǎng)頁能夠使用XMLHttpRequest對象發(fā)送或者接受服務(wù)器數(shù)據(jù), 但是它們受限于同源策略. 擴(kuò)展可以不受該限制. 任何擴(kuò)展只要它先獲取了跨域請求許可，就可以進(jìn)行跨域請求。

需要特別注意的是：在請求信息中，瀏覽器使用 Origin 這個 HTTP 頭來標(biāo)識該請求來自于 http://xxx:801；在返回的響應(yīng)信息中，使用 Access-Control-Allow-Origin 頭來控制哪些域名的腳本可以訪問該資源。如果設(shè)置 Access-Control-Allow-Origin:*，則允許所有域名的腳本訪問該資源。如果有多個，則只需要使用逗號分隔開即可。

Response.AddHeader("Access-Control-Allow-Origin", "http://xxx:801");

跨域允許設(shè)置可以使用完整域名, 例如:

• "http://www.google.com/"
• "http://www.gmail.com/"

或者使用模式匹配, 例如:

• "http://*.google.com/"
• "http://*/"

模式匹配"http://*/" 表示可以發(fā)起到所有域的HTTP請求. 注意在這里, 模式匹配有點像內(nèi)容腳本匹配, 但是這里的任何域名后的路徑信息都被忽略

ie 下提示no transport，表示跨域，jquery.support.cors只是對CORS協(xié)議的一種實現(xiàn)，具體可以看jQuery的源代碼，這里不多說。

安全性考慮

每當(dāng)使用通過XMLHttpRequest獲取的資源時, 你編寫的背景頁需要注意不要成為跨域腳本的犧牲品. 特別注意避免使用像下面這樣的危險API:

background.html
===============
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // 警告! 這里有可能執(zhí)行了一段惡意腳本!
    var resp = eval("(" + xhr.responseText + ")");
    ...
  }
}
xhr.send();

background.html
===============
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // 警告! 這樣處理有可能被注入惡意腳本!
    document.getElementById("resp").innerHTML = xhr.responseText;
    ...
  }
}
xhr.send();

實際上我們應(yīng)該首選不會執(zhí)行腳本的安全API:

background.html
===============
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // JSON解析器不會執(zhí)行攻擊者設(shè)計的腳本.
    var resp = JSON.parse(xhr.responseText);
  }
}
xhr.send();

background.html
===============
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // innerText不會給攻擊者注入HTML元素的機會.
    document.getElementById("resp").innerText = xhr.responseText;
  }
}
xhr.send();

另外在使用通過協(xié)議HTTP獲取的資源時要特別小心. 如果你開發(fā)的擴(kuò)展被應(yīng)用在惡意網(wǎng)絡(luò)環(huán)境中，網(wǎng)絡(luò)攻擊者(又叫 ) 可能篡改服務(wù)器響應(yīng)內(nèi)容從而可能攻擊你編寫的擴(kuò)展. 事實上，你應(yīng)該盡可能地首選使用HTTPS協(xié)議.

我 們先定義progress事件的回調(diào)函數(shù)。

xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;

然后，在回調(diào)函數(shù)里面，使用這個事件的一些屬性。

function updateProgress(event) { if(event.lengthComputable) { var percentComplete = event.loaded / event.total;
    }
}

上面的代碼中，event.total是需要傳輸?shù)目傋止?jié)，event.loaded是已經(jīng)傳輸?shù)淖止?jié)。如果event.lengthComputable不為真，則event.total等于0。

與progress事件相關(guān)的，還有其他五個事件，可以分別指定回調(diào)函數(shù)：
* load事件：傳輸成功完成。

* abort事件：傳輸被用戶取消。

* error事件：傳輸中出現(xiàn)錯誤。

* loadstart事件：傳輸開始。

* loadEnd事件：傳輸結(jié)束，但是不知道成功還是失敗。