web跨域问题

　　Recently, I joined on a program about the chrome extension and met with some problem that is about web cross doamin. so I collect some information about this.

　　First, We must know what is cross domain. Popularly, cross domain is that a domain sends a request to another domain. There are 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 are different.

　　As mentioned above, there are all cross domain, however, why has cross domain? please following up with me.

　　Now we must mention a word, SOP(same origin policy), this is about web browser safety, if not sop, we maybe afford some hack behavoirs, like Xss, CSFR...

　　So, there are 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.

1 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);
5 
6 
7 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 parent window to open another window and post message to it, but the child window must use window.addEventListener to llisten the message. however, sometimes, the child window maybe listen a lot of message, you shouldn't use the origin with *, and attention, the child window must be fully loaded ,the parent window can send　message to it ,otherwise the child window can't get message.

1 // parentWinow
2 childWindow.postMessage(data, "domain");
3 
4 //child window
5 window.onload = function(){
6     window.addEventListener("mesage", function(data){
7         console.log(data);
8     })  
9 }

　　　　3: cors. maybe this method is common . you need to set ajax request with withCredentials and set property(Access-Control-Allow-Credentials) is true,

　　　　　　and property(Access-Control-Allow-Origin) to yuor domain.

Also, there are 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.

猜你喜欢