Web development tutorial cross-domain solution detailed explanation

Preface

This article mainly introduces the cross-domain solution for web development, and shares it for your reference and learning. Let’s take a look at the detailed introduction.

What is cross-domain?

The concept is as follows: as long as there is any difference in protocol, domain name, or port, it will be considered as a different domain.

The following is a detailed explanation of the specific cross-domain situation

1. document.domain cross-domain

Principle: For pages under the same main domain but different subdomains, you can set document.domain to make them in the same domain

Limitation: Documents on the same domain provide interoperability between pages and need to load iframe pages

Pages under the following domain names can all interoperate across domains through document.domain: http://a.com/foo, http://bacom/bar, http://cacom/bar. However, page interoperability can only be achieved by nesting pages, such as the common iframe method.

// URL http://a.com/foo
var ifr = document.createElement('iframe');
ifr.src = 'http://bacom/bar'; 
ifr.onload = function(){
    var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
    ifrdoc.getElementsById("foo").innerHTML);
};
ifr.style.display = 'none';
document.body.appendChild(ifr);

The URL of the above code is http://a.com/foo. Its DOM access to http://bacom/bar requires the latter to set document.domain up one level.

// URL http://bacom/bar
document.domain = 'a.com'

document.domain can only be set from a subdomain to the main domain. Setting it downward or to other domains is not allowed. The error given in Chrome is as follows

Uncaught DOMException: Failed to set the 'domain' property on 'Document': 'baidu.com' is not a suffix of 'bacom'

2. Tags with src

Principle: All HTML tags with src attributes can be cross-domain, including <img>, <script>

Limitation: Need to create a DOM object, can only be used for GET method

Append an HTML tag with a src attribute in document.body . The URL pointed to by the src attribute value will be accessed with the GET method. This access is cross-domain.

In fact, the <link> tag of the style sheet can also cross domains. As long as there is a src or href HTML tag, it has the ability to cross domains.

Different HTML tags send HTTP requests at different times. For example, <img> sends a request when the src attribute is changed, while script, iframe, link[rel=stylesheet] only send HTTP requests after being added to the DOM tree:

var img = new Image();
img.src = 'http://some/picture'; // Send HTTP request var ifr = $('<iframe>', {src: 'http://bacom/bar'});
$('body').append(ifr); // Send HTTP request

JSONP

Principle: <script> can be cross-domain, and the function of the current script can be directly called back in the cross-domain script

Limitation: Need to create a DOM object and add it to the DOM tree, can only be used for GET method

JSONP uses the cross-domain feature of <script>. The script returned by the cross-domain URL contains not only data, but also a callback

// URL: http://bacom/foo
var data = {
    foo: 'bar',
    bar: 'foo'
};
callback(data);

Then in our main site http://a.com, we can cross-domain obtain the data of http://bacom like this:

// URL: http://a.com/foo
var callback = function(data){
    // Process the data obtained from the cross-domain request};
var script = $('<script>', {src: 'http://bacom/bar'});
$('body').append(script);

In fact, jQuery has already encapsulated the use of JSONP. We can do this

$.getJSON( "http://bacom/bar?callback=callback", function( data ){
    // Process the data obtained from the cross-domain request });

The difference between $.getJSON and $.get is that the former converts the responseText to JSON, and when the URL has a callback parameter, jQuery will interpret it as a JSONP request and create a <script> tag to complete the request.

4. Navigation Object

Principle: iframes share the navigator object and use it to pass information

Requirements: IE6/7

Some people have noticed a bug in IE6/7: the window.navigator object is shared between iframes. We can use it as a messenger to pass information. For example, a simple delegate:

// a.com
navigation.onData(){
    //Data arrival processing function}
typeof navigation.getData === 'function' 
    || navigation.getData()

// b.com
navigation.getData = function(){
    $.get('/path/under/b.com')
        .success(function(data){
            typeof navigation.onData === 'function'
                || navigation.onData(data)
        });
}

Similar to document.navigator , window.name is also shared by all pages in the current window. It can also be used to convey information. Another equally painful method is to pass a hash (some people call it an anchor). This is because every time a browser opens a URL, the #xxx part after the URL will be retained, so the new page can get the data of the previous page from here.

5. Cross-Origin Resource Sharing (CORS)

Principle: After the server sets the Access-Control-Allow-Origin HTTP response header, the browser will allow cross-domain requests

Limitations: The browser needs to support HTML5 and can support methods such as POST and PUT

The cross-domain methods mentioned above are all hacks in a sense. The Cross Origin Resource Share (CORS) proposed in the HTML5 standard is the right way. It supports other HTTP methods such as PUT, POST, etc., which can essentially solve the cross-domain problem.

For example, if you want to access data from http://a.com on http://b.com, Chrome will usually report an error due to cross-domain requests.

XMLHttpRequest cannot load http://b.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://a.com' is therefore not allowed access

The reason for the error is that the requested resource does not have Access-Control-Allow-Origin set, so we just need to set this response header field in the b.com server.

Access-Control-Allow-Origin: * # Allow all domain names to access, or Access-Control-Allow-Origin: http://a.com # Only allow all domain names to access

6. window.postMessage

Principle: HTML5 allows messages to be sent between windows

Limitation: The browser needs to support HTML5 and obtain the window handle before communicating with each other

This is a secure cross-domain communication method. postMessage(message,targetOrigin) is also a feature introduced by HTML5. You can send messages to any window, regardless of whether they have the same origin. The second parameter can be * but if you set a URL and it doesn't match then the event will not be dispatched. Let’s look at a common usage.

// URL: http://a.com/foo
var win = window.open('http://b.com/bar');
win.postMessage('Hello, bar!', 'http://b.com');

// URL: http://b.com/bar
window.addEventListener('message',function(event) {
    console.log(event.data);
});

7. Discussion on Access Control Security

Before HTML5, JSONP had become the de facto standard for cross-domain, and jQuery even supported it. It is worth noting that it is just a hack and does not create any additional security issues. Because JSONP needs the cooperation of the server where the cross-domain resource is located to successfully obtain data, such as the server where the resource is located needs to voluntarily call back a suitable function, so the server still has the ability to control cross-domain access to resources

The correct way to cross domain is to use the CORS header field and window.postMessage provided by HTML5, which can support HTTP methods such as POST and PUT to solve the cross domain problem from a mechanism perspective. It is worth noting that the Access-Control-Allow-Origin header field is set by the server where the resource is located. The responsibility for access control is still on the server that provides the resource, which is the same as JSONP.

Summarize

The above is the full content of this article. I hope that the content of this article can bring some help to your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support of 123WORDPRESS.COM.