JavaScript cross domain method summary

Doing Web development often requires you to face cross-domain problems. The root cause of cross-domain problems is the same origin policy in browser security. For example, for http://www.a.com/1.html:

1. http://www.a.com/2.html is homologous;
2. https://www.a.com/2.html is different sources, different reason is that the agreement;
http://www.a.com 3. : 8080/2. HTML is different sources, the reason is that different ports;
4. http://sub.a.com/2.html is different sources, the reason is the host.

In the browser, < Script> , < Img> , < Iframe> And < Link> These labels can be loaded cross domain (the same), resources, and is equivalent to a normal loading the GET request, the only difference is that in order to be on the safe side, the browser does not allow this way of loading to the resources to read and write operations, and can only use the tag itself should have the ability (such as script execution, styling, etc.).

The most common cross-domain problem is the problem of Ajax cross-domain access, where cross-domain urls are not accessible through Ajax by default. Here I record what I know about cross-domain methods:

1. Server-side proxy The downside is that the server that receives the Ajax request by default cannot get the client's IP and UA.

2. The iframe , the use of iframe is actually equivalent to opening A new web page, the specific cross-domain method is roughly, the mother page opened by domain A nested an iframe pointing to domain B, and then submit data, after completion, the server of B can:

low returns A 302 redirect response, pointing the result back to field A;
low inside this iframe, nest an iframe that points to the A field.

Both achieve the cross-domain calls, this way the function than to introduce below the json stronger, because after the cross-domain DOM manipulation and JavaScript calls between each other is no problem, but also has some limitations, such as the results to the URL parameter passing, this means that the needs in segmentation results at large quantity of data transmission, is in trouble; Another problem is the iframe itself, where the interaction between the mother page and the iframe itself has its own security constraints.

3. Use script tags to cross fields Script tags can be loaded and executed with exotic JavaScript, and the parent page can be interacted with by predefined callback functions. It has a name, it's called JSONP cross field, and JSONP is an acronym for JSON with Padding. It's an unofficial protocol, but it's a script, so why bother with JSON? This is the callback function, and a typical way to use it is to use JSON to pass arguments, to fill the callback with JSON data, which is what JSONP means by JSON+Padding.

There are many JSONP services on the Internet to provide data, which is essentially a cross-domain request, and a callback is specified in the request URL, such as callback=result. After obtaining the data, the result function will be automatically called and the data will be passed in the form of JSON, for example (search for "football") :

http://ajax.googleapis.com/ajax/services/search/web? V = 1.0 & q = football&callback = the result

Using JQuery to call is written as:

$.getJSON("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=football&callback=?",function(data){

    //...

});

In general, the limitations of JSONP's cross-domain approach are that you can only use GET requests and cannot solve the problem of how to make JavaScript calls between two pages in different domains.

4. Flash cross-domain:

It will access the crossdomain. XML file under the root directory of the target website and determine whether to allow this cross-domain access based on the contents of the file:

<cross-domain-policy>

    <allow-access-from domain="xxx.xxx.com" />

</cross-domain-policy>

5. Img tags can also be used ", which is also a very common method, is a bit weaker, can only send a get request, there is no callback, so the Google click count is determined.

7. The Access Control

8. The window. The name

This thing was used to hack XSS, essentially, because when the location of the window changes, the page reloads, but interestingly, the window.name doesn't change, so you can use it to pass values. Working with the iframe, changing the window object of the iframe a few times completes useful cross-domain data transfer.

9. The document domain

This works for cross-domain communication between a.example.com and b.example.com, because they have a common domain called example.com, and you can just set document.domain to example.com, but if you want to communicate between a.example1.com and b.example2.com, it can't.

10. Fragment Identitier Messaging (FIM)

11. Cross Frame (CF)

This method is a variation of the FIM method, CF and the essence of the FIM is in my experience at the beginning of the GWT, this article has introduced history and back (but is used to realize function), it can dynamically create an invisible iframe, pointing to a foreign land, after processing, the iframe in the URL Fragment Identitier contains processing results, for the parent page access, and browser URL without any changes.

12. The Cookie + P3P agreement

Using the cross-domain access Cookie under the P3P protocol to achieve cross-domain access, is an odd move. P3P is a W3C privacy recommendation designed to provide privacy for Internet users who surf the web. Set the path of Cookie to "/", that is, there is no restriction of any domain. At this time, some browsers allow other URL pages to be read under the browser, while others do not. In this case, it is necessary to set the header of P3P above the header of the response of the mother page:

P3P: CP="CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR"