Detailed explanation of JavaScript cross-domain summary and solutions

What is cross-domain

For security reasons, JavaScript does not allow cross-domain calls to other page objects. However, while the security restrictions also bring a lot of trouble to injecting iframes or ajax applications. Here I will briefly sort out some of the cross-domain issues:

First of all, what is cross-domain? Simply understand is that due to the limitations of JavaScript homologous policy, JS under the domain name cannot be operated or objects under the domain name. For more detailed instructions, please refer to the table below:

Pay special attention to two points:

First, if it is a cross-domain problem caused by protocols and ports, the "front desk" is powerless.

Second: On the cross-domain issue, the domain is only recognized through the "header of the URL" without trying to determine whether the same IP address corresponds to two domains or two domains on the same IP.

"The header of the URL" refers to +, which can also be understood as "Domains, protocols and ports must match".

Next, I will briefly summarize the general cross-domain approach in the "front desk". The background proxy solution involves background configuration, so I will not explain it here.

1. +iframe settings
For examples where the main domain is the same but the subdomain is different, it can be solved by setting the method. The specific method is to/and/Add = ‘' to the two files; then create an iframe in the file to control the iframe's contentDocument, so that the two js files can "interaction". Of course, this method can only solve the situation where the main domain is the same but the second-level domain names are different. If you set the domian to be a whimsical method, it will obviously cause an error! The code is as follows:

On

 = '';
var ifr = ('iframe');
 = '/';
 = 'none';
(ifr);
 = function(){
  var doc =  || ;
  // Manipulate here  alert(("h1")[0].childNodes[0].nodeValue);
};

On

 = '';

This method is suitable for any page in {, , , } to communicate with each other.

Note: The domain of a certain page is equal to the default. The main domain name is a domain name without www. For example, the prefixed primary domain name is usually a second-level domain name or a multi-level domain name, for exampleIt's actually a secondary domain name. Domain can only be set as the main domain name, and domain cannot be set as in.

question:

1. Security. When one site () is attacked, another site () will cause a security vulnerability.

2. If multiple iframes are introduced into a page, in order to be able to operate all iframes, the same domain must be set.

2. Dynamically create scripts

Although the browser prohibits cross-domain access by default, it does not prohibit referencing JS files from other domains in the page, and can freely execute functions in the imported JS files (including operating cookies, Dom, etc.). According to this, it is convenient to achieve fully cross-domain communication by creating script nodes. For specific practices, please refer to YUI's Get Utility

It is quite interesting to judge that the script node has been loaded here: ie can only pass the script's readystatechange property, and other browsers are script's load events. The following are some methods to determine whether script is loaded.

 =  = function() {
  if (! ||  === 'loaded' ||  === 'complete') {
    // callback is executed here     =  = null;
  }
};

3. Use iframes and

This method is quite confusing, but it can solve the problem of step replacement in completely cross-domain situations. The principle is to use it to pass values. In the url:#hellowordThe '#helloworld' in it means that changing the hash will not cause the page to refresh, so the hash value can be used for data transmission, of course the data capacity is limited. Assuming that the file under the domain name needs to pass information to the domain name, first create an automatically created iframe. The src of the iframe points to the page under the domain name. At this time, the hash value can be used for parameter transfer. After responding to the request, the data will be passed through the modified hash value (since the two pages are not in the same domain that IE and Chrome do not allow modification, so it is necessary to use a proxy iframe under the domain name; Firefox can modify it). At the same time, add a timer to determine whether the value has changed after a period of time. If there is a change, get the hash value. The code is as follows:

First, the file file:

function startRequest(){
  var ifr = ('iframe');
   = 'none';
   = '/lab/cscript/#paramdo';
  (ifr);
}

function checkHash() {
  try {
    var data =  ? (1) : '';
    if () {
      ('Now the data is '+data);
    }
  } catch(e) {};
}
setInterval(checkHash, 2000);

Under the domain name:

//Simulate a simple parameter processing operationswitch(){
  case '#paramdo':
    callBack();
    break;
  case '#paramset':
    //do something……
    break;
}

function callBack(){
  try {
     = 'somedata';
  } catch (e) {
    // The security mechanisms of ie and chrome cannot be modified.    // So you need to use the proxy iframe under the intermediate cnblogs domain    var ifrproxy = ('iframe');
     = 'none';
     = '/test/cscript/#somedata'; // Note that the file is under the "" domain    (ifrproxy);
  }
}

The domain name below

//Because it belongs to the same domain as itself, its value can be changed = (1);

Of course, there are many disadvantages to doing this, such as the data is directly exposed to the url, and the data capacity and type are limited...

4. Cross-domain data transmission realized

There are three pages:

1. /: Application page.
2. /: A proxy file, generally an html file without any content, needs to be in the same domain as the application page.
3. /: The page where the application page needs to obtain data can be called a data page.

The basic steps to implement are as follows:

1. Create an iframe in the application page (/) and point its src to the data page (/).
The data page will attach the data to this iframe, the code is as follows:

<script type="text/javascript">
   = 'I was there!';  // Here is the data to be transmitted, the size is generally 2M, and it can be as large as about 32M under IE and firefox                   // The data format can be customized, such as json and string</script>

2. Listen to the onload event of the iframe in the application page (/). In this event, set the src of this iframe to point to the proxy file of the local domain (the proxy file and the application page are in the same domain, so they can communicate with each other). Some of the codes are as follows:

<script type="text/javascript">
  var state = 0, 
  iframe = ('iframe'),
  loadfn = function() {
    if (state === 1) {
      var data = ;  // Read data      alert(data);  //Popt 'I was there!'    } else if (state === 0) {
      state = 1;
       = "/";  // Set proxy file    } 
  };
   = '/';
  if () {
    ('onload', loadfn);
  } else {
     = loadfn;
  }
  (iframe);
</script>

3. After obtaining the data, destroy this iframe and free up memory; this also ensures security (not accessed by other domain frame js).

<script type="text/javascript">
  ('');
  ();
  (iframe);
</script>

5. Use HTML5 postMessage

One of the coolest new features in HTML5 is Cross Document Messaging. Next-generation browsers will support this feature: Chrome 2.0+, Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, and Safari 4.0+. Facebook has used this feature to support web-based real-time messaging using postMessage.

(message, targetOrigin);

otherWindow: Reference to the window that receives the information page. It can be the contentWindow property of the iframe in the page; the return value; the value obtained from the name or subscript.

message: The data to be sent, string type.

targetOrigin: used to restrict otherWindow, "*" means no restrictions

Code in /:

<iframe  src="/"></iframe>
<script type="text/javascript">
 = function() {
  var ifr = ('ifr');
  var targetOrigin = ''; // If written as '/c/', the effect is the same                    // If written as '', the postMessage will not be executed  ('I was there!', targetOrigin);
};
</script>

Code in /:

<script type="text/javascript">
  ('message', function(event){
    //Judge the source address through the origin attribute    if ( == '') {
      alert();  // "I was there!" pops up      alert(); // Reference to and in window objects                 // However, due to the same-origin policy, the window object cannot be accessed here    }
  }, false);

6. Use flash
This is the method seen from the IO component of YUI3.
You can see more cross-domain proxy file specifications in Adobe Developer Connection: ross-Domain Policy File Specifications, HTTP Headers Blacklist.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.