JavaScript cross-origin summary and Solutions

JavaScript cross-origin summary and Solutions

• What is cross-Origin
• 1. document. domain + iframe settings
• 2. dynamically create scripts
• 3. Use iframe and location. hash
• 4. Cross-Origin data transmission implemented by window. name
• 5. Use HTML5 postMessage
• 6. use flash

  This article is from the Internet (http://f2e.me/200904/cross-scripting/, which cannot be accessed). It is only used for personal reading notes, and is slightly modified and supplemented.

  What is cross-Origin

  For security reasons, JavaScript does not allow cross-origin calls to objects on other pages. However, security restrictions also bring a lot of trouble to inject iframe or ajax applications. Here we will simply sort out the cross-origin problems:

  First of all, what is cross-origin is simply because of restrictions on the JavaScript same-origin policy. js under the.com domain name cannot operate on B .com or the objects under the c.a.com domain name. For more details, see the following table:

  URL	Description	Allow communication?
  Http://www.a.com/a.js Http://www.a.com/ B .js	Under the same domain name	Allow
  Http://www.a.com/lab/a.js Http://www.a.com/script/ B .js	Different folders under the same domain name	Allow
  Http://www.a.com: 8000/a. js Http://www.a.com/ B .js	Different ports for the same domain name	Not Allowed
  Http://www.a.com/a.js Https://www.a.com/ B .js	Different protocols for the same domain name	Not Allowed
  Http://www.a.com/a.js Http: // 70.32.92.74/B. js	Corresponding ip addresses of domain names and domain names	Not Allowed
  Http://www.a.com/a.js Http://script.a.com/ B .js	The primary domain is the same and the subdomain is different.	Not Allowed
  Http://www.a.com/a.js Http://a.com/ B .js	Same domain name, different second-level domain names (same as above)	Not allowed (cookie Access is not allowed in this case)
  Http://www.cnblogs.com/a.js Http://www.a.com/ B .js	Different domain names	Not Allowed

  Pay special attention to the following two points:

  First, if the cross-domain problem caused by protocols and ports is "front-end,

  Second, on cross-origin issues, the domain is identified only by the "URL Header" instead of trying to determine whether the same ip address corresponds to two domain or two domain names on the same ip address.
  "URL Header" refers to window. location. protocol + window. location. host. It can also be understood as "Domains, protocols and ports must match ".

  Next, let's briefly summarize the general cross-origin processing methods at the "front-end". The background proxy scheme involves background configuration, which is not described here. If you are interested, please refer to yahoo's article: javaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest CILS

  1. document. domain + iframe settings

  For examples with the same primary domain and different subdomains, you can set document. domain. The specific method is to create an iframe through the.html file after creating = 'a.com', to control the contentDocument of iframe, so that the two js files can "interact. Of course, this method can only solve the problem where the primary domain is the same but the second-level domain name is different. If you set the domian of script.a.com to alibaba.com in a whimsical manner, it will obviously report an error! The Code is as follows:

  A.html on www.a.com

  Document. domain = 'a. com '; var ifr = document. createElement ('iframe'); ifr. src = 'HTTP: // script.a.com/ B .html'{ifr.style.display = 'none'; document. body. appendChild (ifr); ifr. onload = function () {var doc = ifr. contentDocument | ifr.content20.doc ument; // click B .html alert (doc. getElementsByTagName ("h1") [0]. childNodes [0]. nodeValue );};

  B .html on script.a.com

  document.domain = 'a.com';

  This method applies to communication between any pages in {www.kuqin.com, kuqin.com, script.kuqin.com, and css.kuqin.com.

  Note: The domain of a page is equal to window. location. hostname by default. The primary domain name is a domain name without www, such as a.com. The primary domain name is usually prefixed with a second-level domain name or multi-level domain name. For example, www.a.com is actually a second-level domain name. Domain can only be set as the primary domain name. You cannot set domain to c.a.com in B .a.com.

  Problem:

  1. Security: When a site (B .a.com) is attacked, another site (c.a.com) will cause a security vulnerability.

  2. If multiple iframe is introduced to a page, you must set the same domain to operate all iframe operations. 2. dynamically create scripts

  Although cross-origin access is disabled by default, the browser does not prohibit reference JS files of other domains in the page, and can freely execute the functions (including cookie and Dom operations) in the introduced JS files ). Based on this, you can easily create a script node to implement full cross-origin communication. For specific practices, refer to the YUI Get Utility

  It is quite interesting to judge whether the script node is loaded: ie can only use the readystatechange attribute of the script, and other browsers are the load events of the script. The following describes how to determine whether a script has been loaded.

  Js. onload = js. onreadystatechange = function () {if (! This. readyState | this. readyState = 'loaded' | this. readyState = 'complete') {// callback executes js. onload = js. onreadystatechange = null ;}};

  3. Use iframe and location. hash

  This method is relatively difficult, but it can solve the problem of step replacement in the case of full cross-origin. The principle is to use location. hash to transmit values. '# Helloworld' in url: http://a.com # helloword is location. changing the hash does not cause page refreshing. Therefore, you can use the hash value for data transmission. Of course, the data capacity is limited. In this case, the hash value can be used for parameter transfer. Cs2.htmlafter the request is received, the modified cs1.html hash value will be passed for data transmission (because the two pages are not in the same domain, IE and Chrome cannot modify the parent. location. hash Value, so you need to use a proxy iframe under the.com domain name; Firefox can be modified ). Add a timer to cs1.html at the same time to judge whether the location. hash Value has changed over a period of time. If there is any change, obtain the hash value. The Code is as follows:

  First, the cs1.html file under a.com:

  function startRequest(){    var ifr = document.createElement('iframe');    ifr.style.display = 'none';    ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo';    document.body.appendChild(ifr);}function checkHash() {    try {        var data = location.hash ? location.hash.substring(1) : '';        if (console.log) {            console.log('Now the data is '+data);        }    } catch(e) {};}setInterval(checkHash, 2000);

  Cs2.html under cnblogs.comdomain Name:

  // Simulate a simple parameter processing operation switch (location. hash) {case '# paramdo': callBack (); break; case '# paramset': // do something ...... Break;} function callBack () {try {parent. location. hash = 'somedata';} catch (e) {// ie, chrome's security mechanism cannot be modified. location. hash, // so use the proxy iframe var ifrproxy = document under an intermediate cnblogs domain. createElement ('iframe'); ifrproxy. style. display = 'none'; ifrproxy. src = 'HTTP: // a.com/test/cscript/cs3.html?somedata'; // note that the file is in the "a.com" Domain document. body. appendChild (ifrproxy );}}

  A.comdomain name cs3.html

  // Because of parent. the parent and itself belong to the same domain, so you can change its location. hash Value parent. parent. location. hash = self. location. hash. substring (1 );

  Of course, this operation also has many disadvantages, such as direct data exposure to URLs, limited data capacity and types ......

  4. Cross-Origin data transmission implemented by window. name

  This article is not easy to read. For more information, see cross-domain data transmission implemented by window. name.

  5. Use HTML5 postMessage

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

  OtherWindow. postMessage (message, targetOrigin );

  OtherWindow: Reference to the window on the receiving information page. It can be the contentWindow attribute of iframe on the page, the return value of window. open, and the value obtained from window. frames through name or subscript.
  Message: The data to be sent, of the string type.
  TargetOrigin: used to restrict otherWindow. "*" indicates no restriction.

  A.com/index.html code:

  <Iframe id = "ifr" src = "B .com/index.html"> </iframe> <script type = "text/javascript"> window. onload = function () {var ifr = document. getElementById ('ifr'); var targetOrigin = 'HTTP: // B .com '; // If 'HTTP: // B .com/c/proxy.html' is the same, // If 'HTTP: // c.com 'will not execute postMessage ifr. contentWindow. postMessage ('I was there! ', TargetOrigin) ;}; </script>

  B .com/index.html code:

  <Script type = "text/javascript"> window. addEventListener ('message', function (event) {// determine the message source address if (event. origin = 'HTTP: // a.com ') {alert (event. data); // The "I was there! "Alert (event. source); // reference the window object in a.comw.index.html // However, due to the same-origin policy, event. source cannot access window objects }}, false); </script>

  Chapter 5 of "proficient in HTML5 programming" -- Cross-document message mechanism, https://developer.mozilla.org/en/dom/window.postmessage

  6. use flash

  This is the method we can see from YUI3's IO components. For details, see http://developer.yahoo.com/yui/3/io /.
  You can see more cross-origin proxy File Specifications in Adobe Developer Connection: ross-Domain Policy File Specifications and HTTP Headers Blacklist.