How to use cross-domain web development

This time I will bring you how to use cross-domain web development. What are the precautions for cross-domain use in web development? Here are practical cases, let’s take a look.

In the process of web development, everyone will have contact with cross-domain. Many people do not know what cross-domain is and how to solve cross-domain in web development. The following article will give you a detailed introduction to this. If you are interested, let’s learn about cross-domain and cross-domain solutions.

What is cross-domain?

The concept is as follows: as long as the protocol, domain name, and port are different, they are regarded as different domains

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

URL	illustrate	Whether to 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	Same domain name, different ports	Not allowed
http://www.a.com/a.js、https://www.a.com/b.js	Same domain name, different protocols	Not allowed
http://www.a.com/a.js, http://70.32.92.74/b.js	Domain name and domain name corresponding ip	Not allowed
http://www.a.com/a.js, http://script.a.com/b.js	The main domain is the same, but the subdomain is different	Not allowed (cookies are not allowed to be accessed in this case)
http://www.a.com/a.js, http://a.com/b.js	Same domain name, different second-level domain names (same as above)	Not allowed (cookies are not allowed to be accessed in this case)
http://www.cnblogs.com/a.js, http://www.a.com/b.js	Different domain names	Not allowed

1. document.domain cross-domain

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

Restrictions: Documents in the same domain provide interoperability between pages, and the iframe page needs to be loaded

Pages under the following domain names can be interoperated across domains through document.domain: http://a.com/foo, http://b.a.com/bar, http://c.a.com/bar. However, page interoperation can only be carried out in the form of page nesting. For example, the common iframe method can complete page nesting

// URL http://a.com/foo
var ifr = document.createElement('iframe');
ifr.src = 'http://b.a.com/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 where the above code is located is http://a.com/foo, and its DOM access to http://b.a.com/bar requires the latter to set document.domain one level higher

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

document.domain can only be set from a subdomain to the main domain. Settings downwards and to other domain names are not allowed. The error given in Chrome is like this

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

2. Tags with src

Principle: All HTML tags with the src attribute can be cross-domain, including , <script></script>

Limitation: A DOM object needs to be created, which can only be used for the GET method

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

In fact, the tag of the style sheet can also be cross-domain. As long as the HTML tag has src or href, it has cross-domain capabilities

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

var img = new Image();
img.src = 'http://some/picture';        // 发送HTTP请求
var ifr = $('<iframe>', {src: 'http://b.a.com/bar'});
$('body').append(ifr);                  // 发送HTTP请求</iframe>

3. JSONP

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

Limitation: A DOM object needs to be created and added to the DOM tree, which can only be used for the GET method

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

// URL: http://b.a.com/foo
var data = {
    foo: 'bar',
    bar: 'foo'
};
callback(data);

Then in our main website http://a.com, we can get the data of http://b.a.com across domains like this:

// URL: http://a.com/foo
var callback = function(data){
    // 处理跨域请求得到的数据
};
var script = $('<script>&#39;, {src: &#39;http://b.a.com/bar&#39;});
$(&#39;body&#39;).append(script);</script>

In fact, jQuery has encapsulated the use of JSONP, we can do it like this

$.getJSON( "http://b.a.com/bar?callback=callback", function( data ){
    // 处理跨域请求得到的数据
});

The difference between $.getJSON and $.get is that the former will convert 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</script>

4. navigation object

Principle: navigator object is shared between iframes and is used to transfer information

Requirements: IE6/7

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

// a.com
navigation.onData(){
    // 数据到达的处理函数
}
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. The same painful method is to pass Hash (some people call it anchor point). This is because every time the browser opens a URL, the #xxx part after the URL will be retained, so the new page can get the previous page from here. The data

5. Cross-domain resource sharing (CORS)

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

Restrictions: The browser needs to support HTML5 and can support POST, PUT and other methods

The cross-domain methods mentioned above are all hacks in a certain sense. The cross-domain resource sharing (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 cross-domain problems.

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

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

错误原因是被请求资源没有设置Access-Control-Allow-Origin，所以我们在b.com的服务器中设置这个响应头字段即可

Access-Control-Allow-Origin: *              # 允许所有域名访问，或者
Access-Control-Allow-Origin: http://a.com   # 只允许所有域名访问

六、window.postMessage

原理：HTML5允许窗口之间发送消息

限制：浏览器需要支持HTML5，获取窗口句柄后才能相互通信

这是一个安全的跨域通信方法，postMessage(message,targetOrigin)也是HTML5引入的特性。 可以给任何一个window发送消息，不论是否同源。第二个参数可以是*但如果你设置了一个URL但不相符，那么该事件不会被分发。看一个普通的使用方式吧

// 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);
});

七、访问控制安全的讨论

在HTML5之前，JSONP已经成为跨域的事实标准了，jQuery都给出了支持。 值得注意的是它只是Hack，并没有产生额外的安全问题。 因为JSONP要成功获取数据，需要跨域资源所在服务器的配合，比如资源所在服务器需要自愿地回调一个合适的函数，所以服务器仍然有能力控制资源的跨域访问

跨域的正道还是要使用HTML5提供的CORS头字段以及window.postMessage， 可以支持POST, PUT等HTTP方法，从机制上解决跨域问题。 值得注意的是Access-Control-Allow-Origin头字段是资源所在服务器设置的， 访问控制的责任仍然是在提供资源的服务器一方，这和JSONP是一样的

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

The above is the detailed content of How to use cross-domain web development. For more information, please follow other related articles on the PHP Chinese website!