JS cross-Domain Problem Detailed _ basics

JavaScript is a front-end dynamic scripting technique that is often used in web development. In JavaScript, there is a very important security limitation, known as the "Same-origin Policy" (Homology policy). This policy makes a significant restriction on the content of the page that JavaScript code can access, that is, JavaScript can only access content that is under the same domain as the document containing it.

JavaScript is a security policy that is especially important when it comes to multiple IFRAME or multiple window programming and AJAX programming. According to this strategy, the JavaScript code contained in the page under Baidu.com cannot access the content of the page under the google.com domain name, and even pages between different subdomains cannot be accessed through JavaScript code. The impact on Ajax is that Ajax requests implemented through XMLHttpRequest cannot submit requests to different domains, such as pages under Abc.example.com, no AJAX requests to def.example.com, and so on.

However, when some of the more in-depth front-end programming, the inevitable need for cross-domain operations, this time "homology strategy" is too harsh. In this paper, we generalize some techniques that need to cross domain.

Here we discuss Cross-domain technology in two ways: first we discuss cross-domain technologies for different subdomains, and then we discuss cross-domain technologies in disparate domains.

(i) Cross-domain technologies for different subdomains.
We discuss two issues separately: the first is how to make JavaScript calls across different subdomains, and the second is how to submit AJAX requests to different subdomains.

To solve the first problem, assume that there are two different subdomains in the example.com domain: abc.example.com and def.example.com. Now suppose there is a page underneath the def.example.com that defines a JavaScript function:

Copy Code code as follows:

function Funcindef () {
.....
}

We want to call the above function on a page under Abc.example.com. Assuming we're going to discuss the abc.example.com below the page is embedded in the def.example.com below the page, so we might try to do the following in the IFRAME:

Copy Code code as follows:

Window.top.funcInDef ();

Well, we noticed that this call was banned by the "homology policy" mentioned earlier, and the JavaScript engine throws an exception directly.

To implement the above call, we can do so by modifying the domain property of the two pages. For example, we could add the following JavaScript code snippet to the top of the two pages above abc.example.com and def.example.com:

Copy Code code as follows:

<script type= "Text/javascript" >
Document.domain = "example.com";
</script>

In this way, two pages become the same domain, the previous call can be performed normally.

One thing to note here is that the Document.domain property of a page can only be set to a more top-level domain name (except for a first-level domain name), but it cannot be set to a subdomain that is deeper than the current domain name. For example, Abc.example.com's page can only set its domain to example.com, can not be set to sub.abc.example.com, of course, can not be set to a level of domain name COM.

The above example discusses the case where two pages belong to an IFRAME nesting relationship, and the principle is exactly the same when two pages open and open.

Here's a second question: How to submit an AJAX request to a different subdomain.

Typically, we create a XMLHttpRequest object with code similar to the following:

Copy Code code as follows:

Factories = [
function () {return new XMLHttpRequest ();},
function () {return new ActiveXObject ("Msxml2.xmlhttp");},
function () {return new ActiveXObject ("Microsoft.XMLHTTP");}
];
function Newrequest () {
for (var i = 0; I <</SPAN> factories.length; i++) {
try{
var factory = Factories[i];
return Factory ();
catch (e) {}
}
return null;
}

ActiveXObject is referenced in the above code to be compatible with the IE6 series browser. Every time we call the Newrequest function, we get an Ajax object that we just created, and then we use this Ajax object to send the HTTP request. For example, the following code sends a GET request to abc.example.com:

Copy Code code as follows:

var request = Newrequest ();
Request.open ("Get", "http://abc.example.com");
Request.send (NULL);

Assuming the above code is contained in a page under a abc.example.com domain name, the GET request can be sent successfully without any problems. However, if you now want to send a request to def.example.com, a cross-domain problem occurs and the JavaScript engine throws an exception.

The solution is, Place a Cross-domain file under the def.example.com domain, assuming that it is called crossdomain.html, and then move the definition of the preceding newrequest function into the Cross-domain file, and finally, as before the Document.domain value, in the Crossdomain.h tml file and abc.example.com domain down with Ajax pages at the top, all plus:

Copy Code code as follows:

<script type= "Text/javascript" >
Document.domain = "example.com";
</script>
In order to use cross-domain files, we lowered the abc.example.com domain with an AJAX-enabled page to embed a hidden iframe that points to cross-domain files, for example:

[Code]
<iframe name= "Xd_iframe" style= "Display:none" src= "http://def.example.com/crossdomain.html" ></iframe>

At this point, the page under the abc.example.com domain and the Cross-domain file crossdomain.html are all under the same domain (example.com), and we can invoke crossdomain.html in Newrequest in the page under abc.example.com domain Function:

Copy Code code as follows:

var request = window.frames["Xd_iframe"].newrequest ();

This gets the request object, and you can send HTTP requests to http://def.example.com.

(b) Cross-domain technology in a completely different domain.
If top-level domain names are not the same, such as example1.com and example2.com want to communicate through JavaScript in front of each other, the technology needed is more complex.

Before we talk about Cross-domain technologies in different domains, let's be clear that the following techniques apply equally to the previous cases across different subdomains, because cross domains are only one special case of cross-domain problems. Of course, using the right technology in the right circumstances can ensure better efficiency and greater stability.

In short, Cross-domain technologies can be grouped into the following categories, depending on different cross-domain requirements:

1. Jsonp cross-domain GET request
2. Cross-domain through IFRAME
3. Flash cross-Domain HTTP request
4, Window.postmessage

This article is here first, followed by a detailed description of the 4 Cross-domain technologies mentioned above, later on!