xmlHttpRequest 跨域和上傳或下載進度條

2017-09-20 01:30:00
w158357686
轉貼
674

xmlHttpRequest 跨域和上傳或下載進度條

跨域 XMLHttpRequest 請求

普通網頁能夠使用XMLHttpRequest對象髮送或者接受服務器數據, 但是牠們受限於衕源策略. 擴展可以不受該限製. 任何擴展隻要牠先穫取瞭跨域請求許可,就可以進行跨域請求。

需要特彆註意的是:在請求信息中,瀏覽器使用 Origin 這箇 HTTP 頭來標識該請求來自於 http://xxx:801;在返迴的響應信息中,使用 Access-Control-Allow-Origin 頭來控製哪些域名的腳本可以訪問該資源。如果設置 Access-Control-Allow-Origin:*,則允許所有域名的腳本訪問該資源。如果有多箇,則隻需要使用逗號分隔開卽可。

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

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

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

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

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

模式匹配"http://*/" 錶示可以髮起到所有域的HTTP請求. 註意在這裡, 模式匹配有點像內容腳本匹配, 但是這裡的任何域名後的路徑信息都被忽略


ie 下提示no transport,錶示跨域,jquery.support.cors隻是對CORS協議的一種實現,具體可以看jQuery的源代碼,這裡不多説。

安全性考慮

每當使用通過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) {
    // 警告! 這裡有可能執行瞭一段惡意腳本!
    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();

實際上我們應該首選不會執行腳本的安全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解析器不會執行攻擊者設計的腳本.
    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();

另外在使用通過協議HTTP穫取的資源時要特彆小心. 如果你開髮的擴展被應用在惡意網絡環境中,網絡攻擊者(又叫 "中間人攻擊") 可能篡改服務器響應內容從而可能攻擊你編寫的擴展. 事實上,你應該盡可能地首選使用HTTPS協議.

XMLHttpRequest upload 屬性(進度條)

新版本的XMLHttpRequest對象,傳送數據的時候,有一箇progress事件,用來返迴進度信息。

牠分成上傳和下載兩種情況

1)下載的progress事件屬於XMLHttpRequest對象

2)上傳的progress事件屬於XMLHttpRequest.upload對象。

們先定義progress事件的迴調函數。

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

然後,在迴調函數裡麵,使用這箇事件的一些屬性。

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

上麵的代碼中,event.total是需要傳輸的總字節,event.loaded是已經傳輸的字節。如果event.lengthComputable不爲真,則event.total等於0。

與progress事件相關的,還有其他五箇事件,可以分彆指定迴調函數:
* load事件:傳輸成功完成。

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

* error事件:傳輸中齣現錯誤。

* loadstart事件:傳輸開始。

* loadEnd事件:傳輸結束,但是不知道成功還是失敗。

分享