XMLHttpRequest cross-domain and upload or download progress bars

Cross-domain XMLHttpRequest requests

Normal Web pages can use XMLHttpRequest objects to send or accept server data, but they are limited to the same Origin policy. The extension is not subject to this restriction. Any extension can make cross-domain requests as long as it acquires cross-domain request permissions first.

It is important to note that in the request message, the browser uses Origin, the HTTP header, to identify the request from http://xxx:801; In the returned response, use the Access-control-allow-origin Header to control which domain names the script can access the resource. If you set access-control-allow-origin:*, scripts for all domain names are allowed to access the resource. If you have more than one, you only need to separate them with commas.

Response.AddHeader ("Access-control-allow-origin", "http://xxx:801");

Cross-domain allow settings can use the full domain name, for example:

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

Or use pattern matching, for example:

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

Pattern matching "http://*/" indicates that HTTP requests can be initiated to all domains. Note here that pattern matching is a bit like a content script match, but the path information behind any domain name here is ignored

Security Considerations

Every time you use a resource obtained through XMLHttpRequest, you need to be careful not to be a victim of cross-domain scripting when you write a background page. Pay particular attention to avoiding the use of dangerous APIs like the following:

Background.html===============var xhr = new XMLHttpRequest (); Xhr.open ("GET", "Http://api.example.com/data.json", true); Xhr.onreadystatechange = function () {  if (xhr.readystate = = 4) {    //warning! It is possible to execute a malicious script here!    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) {    //warning! This processing may be injected into a malicious script!    document.getElementById ("resp"). InnerHTML = Xhr.responsetext;    ...  }} Xhr.send ();

In fact, we should prefer a security API that does not execute scripts:

Background.html===============var xhr = new XMLHttpRequest (); Xhr.open ("GET", "Http://api.example.com/data.json", true); Xhr.onreadystatechange = function () {  if (xhr.readystate = = 4) {    //JSON parser does not execute the attacker-designed script.    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 does not give attackers the opportunity to inject HTML elements.    document.getElementById ("resp"). InnerText = Xhr.responsetext;  }} Xhr.send ();

In addition, use special care when using resources obtained through protocol HTTP. If you develop an extension that is applied in a malicious network environment, a network attacker (also called a "man-in-the-middle attack") can tamper with the server response content and potentially attack the extensions you write. In fact, you should use the HTTPS protocol as much as you can.

XMLHttpRequest Upload Property (progress bar)

The new version of the XMLHttpRequest object, when transmitting data, has a progress event that is used to return the progress information.

It is divided into two cases of uploading and downloading

1) The downloaded Progress event belongs to the XMLHttpRequest object

2) The uploaded progress event belongs to the Xmlhttprequest.upload object.

We first define the callback function for the progress event.

xhr.onprogress = Updateprogress;xhr.upload.onprogress = updateprogress;

Then, in the callback function, use some of the properties of this event.

function UpdateProgress (event) {    if (event.lengthcomputable) {        var percentcomplete =  event.loaded/ Event.total;}}     

In the above code, Event.total is the total byte that needs to be transmitted, and event.loaded is the byte that has been transferred. If event.lengthcomputable is not true, then event.total equals 0.

In connection with the progress event, there are five other events that can be assigned to a callback function:
* Load Event: Transfer completed successfully.

* Abort event: The transfer was canceled by the user.

* Error Event: A failure occurred in the transmission.

* Loadstart Event: Transfer started.

* Loadend Event: Transfer ended, but did not know success or failure.

XMLHttpRequest cross-domain and upload or download progress bars