Web cross-domain issues

Recently, I joined on a program about the Chrome extension and met with some problem that's about Web cross doamin. So I collect some information.

First, We must know what are cross domain. Popularly, cross domain is the a domain sends a request to another domain. There is some performances.

1:same domain, but not port. Like this, www.domain.com:80, www.domain.com:8080.

2:same domain, but not scheme. Like this, http://www.domain.com, https://www.domain.com.

3:the domain with corresponding IP. Like this, http://www.domain.com, http://128.112.1.21/.

4:different domain.

5:subdomains is different.

As mentioned above, there is all cross domain, however, why have cross domain? Following up with me.

Now we must mention a word, SOP (same Origin policy), which is about the Web browser safety, if not sop, we maybe afford some H Ack Behavoirs, like Xss, CSFR ...

So, there is some SOP limits to web browser:

1:can ' t send Ajax

2:can ' t read cookie, indexdb or something

3:dom and JS object can ' t be got.

But we can move around by some solutions.

1:jsonp. We cant create a tag script and request to domain.

　　　　

var scripttag = document.createelement ("script"); 2 scripttag.src = "Http://www.domain.com?user=admin&callback=callBackFunction"; 3 Scripttag.type = "Text/javascript"; 4 Document.head.appendChiild (scripttag); function callbackfunction (data) {8    console.log (data);            9}

Also, you can use Jquery. But the server must return callback function.

2:postmessage.

Targetwindow.postmessage (Message, origin). You can use the parent window to open another window and post message to it, but the child window must use Window.addeventlist Ener to llisten the message. However, sometimes, the child window maybe listen a lot of message, you shouldn ' t use the origin with *, and attention, t He child window must is fully loaded, the parent window can send message to it, otherwise the child window can ' t get Messa Ge.

　　　　

1 //Parentwinow2Childwindow.postmessage (data,"Domain");3 4 //Child Window5Window.onload =function () {6Window.addeventlistener ("mesage", function (data) {7console.log (data);8     })  9}

3:cors.  Maybe this method is common. You need to set the AJAX request with Withcredentials and set property (Access-control-allow-credentials) is true,

and property (Access-control-allow-origin) to yuor domain.

　　　　　

Also, there is some resolutions to solve with the problem. And for Chrome extension, don't add request domain to permissions (Manifest.json), because of the security for customer.

　　

　　

Web cross-domain issues