preface

The author has used Nginx, Node.js, JSONP methods to solve the front-end cross-domain, the recent project to expose a method to other domains under the page call, so it is in touch with cross-domain, take this opportunity here in the AJAX aspect of cross-domain and manipulation of JS interactive script aspects of cross-domain these two dimensions to a simple summary. This article is the author of the first article digging gold, it is the supervision of their own, everyone a lot of advice.

The body of the

1. What is cross-domain?

Common cross-domain behaviors:

A) Resource jump: <a> tag jump link, redirection, form submission;

B), resource request, <link>, <script>, <img>, <frame> URL request, @font-face() reference

C), jS-initiated script requests, DOM and JS object cross-domain operations

2. Same-origin policy

The source code is the same only when the protocol, host, and port are the same.

For security reasons, the browser sets the same origin policy. If the value is not the same origin, the browser will restrict:

A) Network: AJAX cannot be sent;

B), DOM and JS objects cannot be obtained and manipulated;

C) Cookies, localStorage and IndexDB cannot be read;

The author refers to point B and C as the cross-domain of JS script manipulation, and point A as the cross-domain of AJAX.

3. Cross-domain solutions for AJAX

(1) document.domain + ifame

Principle: Two pages are forced to set document.domain as the basic primary domain through JS, so that the two are in the same domain, to achieve cross-domain.

Disadvantages: Document.domain Settings are limited, so it is only applicable to scenarios where the primary domain is the same and the subdomain is different.

Implementation:

  • The parent window (http://mainDomain.com/a.html) :

<iframe src="http://child.mainDomain.com/b.html"></iframe>

<script>

document.domain = ‘mainDomain.com’; // Set the primary domain

    var publicKey = 'value';       

</script>

  • Child Windows (http://child.mainDomain.com/b.html) :

<iframe src="http://child.mainDomain.com/b.html"></iframe>

<script>

document.domain = 'mainDomain.com'; // Set the primary domain

console.log(parent.publicKey); // Successfully access the publicKey value of the parent window

</script>

(2) document.hash+ ifame

Principle: Parent window can read and write iframe SRC, child window can nest the same domain of the parent window page, parent-parent-callback access parent window JS, and the server ignores the # character in the URL, Changes to location.hash are monitored through the browser’s Hashchange event. In this way, iframes can communicate with each other.

Example: to implement communication between A.HTML and B.HTML in different domains.

         

Key code:

  • a.html

Document.getelementbyid ('iframe').src = 'http:domain2.com/b.html#msg=hello'; // Expose the callback function window.oncallback =function() {/ /... Callback function}Copy the code
  • b.html

window.onhashchange = function(e) {// location.hash, handle data, execute callback document.getelementById ('proxy').src = 'http:domain1.com/proxy#data=123';
}Copy the code

  • proxy.html

window.onhashchange = function(e) {
    parent.parent.oncallback(loaction.hash)
}Copy the code

(3) Through parent-parent-oncallback, through the proxy window of nested iframe for cross-domain

The principle is similar to point 2, this one is relatively simple and elegant, through the window URL parameters to communicate. The implementation is shown as follows:



(4) postMessage is cross-domain

PostMessage is an API in HTML5 XMLHttpRequest Level 2 that can be safely implemented across domains

Otherwindow.postmessage (message, targetOrigin, [Transfer])

OtherWindow: indicates the target window.

Message: data sent to other Windows (basic types and objects, some browsers do not support objects);

TargetOrigin: protocol + host + port number, can also be set to “*”, target source limit

(5) the window. The name

Principle: The window.name property of the same window is always saved after the page is refreshed, so that data can be shared.

4. Cross-domain solutions for AJAX

(1) the json

Principle: The browser’s same-origin policy does not restrict cross-domain requests for

Native implementation:



(2) Reverse proxy, such as Nginx, Node.js and other back-end server proxies

How it works: The browser has the same origin policy to restrict AJAX requests, but there is no restriction on the communication between servers. Therefore, AJAX requests can be accepted through the same origin proxy server to achieve cross-domain implementation

(3) Cross-domain through CORS

The key to CORS communication is the server. As long as the server implements the CORS interface, cross-source communication is possible.

conclusion

This article is divided into two categories across the domain to summarize, summarize to point summary, some methods are just a brush over, and the need for students can view other detailed articles digging gold.


Reference article:

  • Common Cross-domain solutions at the front end (full)
  • Nine Cross-domain Implementation Principles (Full version)