A summary of various cross-domain problems in JS

What is cross domain? Why do you want to implement Cross-domain?

This is because JavaScript, for security reasons, does not allow you to call objects across domains for other pages. This means that only resources from the same domain can be accessed. I think it's important to know what's going on with the homology strategy in javascript: JavaScript's homology strategy

So when we think of certain functions, it is more important to implement a reasonable cross-domain request.

-->1. Native Ajax object XHR cross-domain

-->2. Simple Jsonp

-->3. Image Ping

-->4.document.domain+iframe implementation across domains

Native Ajax objects in JavaScript XMLHttpRequest

First look at the native Ajax implementation code:

var xhr = createxhr ();//for ie encapsulates different Ajax objects for browsers
Xhr.onload = function (event) {//Ensure that the appropriate response is received
if ((xhr.status >=200&&xhr.status<300) Xhr.status = = 304) {
alert (Xhr.responsetext);
}else{
Alert ("Error:" +xhr.status);
}
}
Xhr.open ("Get", "**.php", true), parameter of the//open method open (Get/post,url, whether to send an asynchronous request)
Xhr.send (null);//open simply initiates a request, does not send it, calls send () to send the request

We know that the above can send AJAX requests, the resulting response data will automatically populate the properties of the Xhr object, we can access it.

However, with the restrictions mentioned above, you can only want to send a request with a URL that uses the same port and protocol in the same domain. Then it solves the problem of Cross-domain.

Fortunately there is a thing called cors (Cross source resource sharing), the idea behind it is to use a custom HTTP header to communicate with the server to determine whether the request or response should succeed or fail.

Implementation method:

1. When sending a get/post request, add an additional origin header to it that contains the source information (protocol, domain name, and port) of the requesting page so that the server can decide whether to respond based on this header information, like this:

Origin:http://www.nczonline.net

2. If the server considers the request acceptable, it sends back the same source information in the header:

Access-control-allow-origin:http://www.nczonline.net

If there is no header or the source information does not match, then the server will dismiss the request, and normally the browser will process the request.

Deep Research cors:http access control (CORS)

In addition, when it comes to HTTP headers, I think it's also important to understand what the usual request headers and response headers usually have, and they tell us a lot of information:

The reason why I think about it is because I remember reading this article, the mustache uses the date in response to the head to achieve a countdown: Use the XMLHttpRequest response header date Implementation Countdown

JSONP (bidirectional)

1, what is JSONP:

JSONP (JSON with padding), Jsonp looks just like JSON, except that JSONP is a JSON contained in a function call. JSONP is composed of two parts, one part is a callback function, and the other is data. The callback function is the function that should be called on the page when the response arrives, and the data is the JSON data in the incoming callback function. His advantage is: first, he can directly access the response text; second, JSONP supports two-way communication between browsers and servers. But there are drawbacks: it does not guarantee that code that is loaded from other domains is safe, and that it is impossible to tell if a JSONP request failed.

2, the use of methods:

Dynamic Creation 标签嵌入跨域脚本。语法错误信息只能在同源脚本中捕捉到。上面jsonp也用到了呢。

(2) 标签嵌入CSS。由于CSS的松散的语法规则，CSS的跨域需要一个设置正确的Content-Type消息头。不同浏览器有不同的限制： IE, Firefox, Chrome, Safari (skip to cve-2010-0051) section and Opera.

(3) and embedding multimedia resources.

(4) 的插件。

(5) @font-face The imported font. Some browsers allow Cross-domain fonts (Cross-origin fonts), and some require homologous fonts (Same-origin fonts).

(6) and 载入的任何资源。站点可以使用</code> x-frame-options message headers to block this form of cross-domain interaction.</p></p> <p><p>Document.domain+iframe implementation across domains</p></p> <p><p>First of all to know, just on the page through the <iframe> load resources, is not able to interact with him, like my blog on the right of that GitHub fllow the same, can only visit. Then we want to achieve interaction, for the primary domain is the same as the subdomain different scenarios, can be implemented with the help of Document.domain.</p></p> <p><p>Www.one.com on the a.html:</p></p> <p><p>Document.domain = "A.com";<br>var IFR = document.createelement ("iframe");<br>IFR.SRC = "http://script.a.com/b.html";<br>Ifr.style.display = "None";<br>Document.body.appendChild (IFR);<br>Ifr.onload = function () {<br>var doc = Ifr.contentdocument ifr.contentWindow.document;<br>To manipulate b.html here.<br>Alert (Doc.getelementsbytagname ("H1") [0].childnodes[0].nodevalue);<br>};</p></p> <p><p>W3w.one.com on the b.html:</p></p> <pre> Document.domain = "A.com";</pre> <p><p>This way you can achieve a page and B page interaction. Applies to the pages under a domain name such as {www.kuqin.com, kuqin.com, script.kuqin.com, css.kuqin.com}, where they use the same protocol and port by default.</p></p> <p><p>Note: The domain default for a page is equal to Window.location.hostname. The main domain name is the domain name without www, for example a.com, the main domain name prefix is usually two level domain name or multi-level domain name, for example, www.a.com is actually a level two domain name. Domain can only be set as the primary domain name, you cannot set domain to c.a.com in b.a.com.</p></p> <p><p>At the same time, when revising the document.domain also need to pay attention to some problems, and the possible impact: Modify Document.domain may have the impact</p></p> <p><p>This part of the reference here: JS in the cross-domain problem summary document.domain+iframe part</p></p> <p><p>Speaking of Document.domain, then I also thought of the other attributes of document, put this together to look at:</p></p> <p><p>(1) Document.referrer in simple terms, in general, the browser request a when the header sent in Referer is what, then get a page after the Document.referre value is what. we You can find out where our pages come from by accessing this property of the document. You can usually see some parameters.</p></p> <p><p>(2) Document.links it can get the href attribute value of all <a> and <area> tags in the page.</p></p> <p><p>(3) Document.compatmode if the resulting value is CSS1COMPAT then the standard mode, Backcompat is promiscuous mode</p></p> <p><p>(4) The Document.readystate document loading property value is complete load complete loading is loading.</p></p> <br> <br>