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请求. 注意在这里, 模式匹配有点像内容脚本匹配, 但是这里的任何域名后的路径信息都被忽略

安全性考虑

每当使用通过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事件，用来返回进度信息。

它分成上传和下载两种情况

１）下载的progress事件属于XMLHttpRequest对象

２）上传的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事件：传输结束，但是不知道成功还是失败。