Shulou(Shulou.com)06/02 Report--

This article focuses on "what is the cross-domain approach of the Web front end". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what the cross-domain approach of the Web front end is".

What is cross-domain?

For security reasons, JavaScript does not allow cross-domain calls to objects on other pages. So what is cross-domain? simply understand that due to the restriction of the same origin policy of JavaScript, the js under the a.com domain cannot manipulate the objects under the b.com or c.a.com domain name.

When any one of the protocol, subdomain name, primary domain name and port number is not the same, it is counted as a different domain. Requests for resources between different domains are considered "cross-domain".

It must be noted that the cross-domain request cannot be sent, the request can be sent, and the server can receive the request and return the result normally, but the result is blocked by the browser. The reason for cross-domain is that it is limited by the same origin policy, which requires the same source to communicate normally, that is, the protocol, domain name and port number are all the same.

You can refer to the figure below to help you understand cross-domain in depth.

In particular, there are two points:

*: the "foreground" is powerless if the cross-domain problem is caused by protocols and ports.

Second, in the cross-domain issue, the domain is only identified by the "header of URL", not based on whether the corresponding IP address of the domain name is the same. "URL header" can be understood as "protocol, domain name and port must match".

What is the homologous strategy and its limitation

The same origin policy restricts how documents or scripts loaded from one source interact with resources from another source. This is a key security mechanism for isolating potentially malicious files. Its existence can protect users' private information, prevent identity forgery, etc. (read Cookie).

The restrictions of the same origin policy include:

Cookie, LocalStorage, IndexedDB and other storage content

DOM node

AJAX request cannot be sent

However, there are three tags that allow cross-domain loading of resources:

Next, let's discuss some ways to deal with cross-domain. However, all cross-domains must be approved by the information provider. If it can be obtained without permission, there is a vulnerability in the browser's same origin policy.

Dealing with cross-domain method one-- JSONP

1.JSONP principle

Using this open strategy of elements, web pages can get JSON data dynamically generated from other sources. The JSONP request must be supported by the other party's server.

Comparison between 2.JSONP and AJAX

JSONP, like AJAX, is a way for the client to send a request to the server and get data from the server. But AJAX belongs to the same origin policy, and JSONP belongs to the non-same origin policy (cross-domain request)

Advantages and disadvantages of 3.JSONP

JSONP has the advantage of good compatibility and can be used to solve the problem of cross-domain data access in mainstream browsers. The disadvantage is that there are limitations to supporting only the get method.

The process of 4.JSONP (take the third-party API address as an example, do not consider the daemon)

Declare a callback function with a function name (such as fn) as a parameter value to be passed to the server that requests data across domains. The function parameter is to get the target data (the data returned by the server).

Create a tag, assign that cross-domain API data interface address to script's src, and pass the function name to the server in this address (you can pass the parameter:? callback=fn through the question mark).

After receiving the request, the server needs to do special processing: concatenate the passed function name and the data it needs to give you into a string, for example: the passed function name is fn, and the data it prepares is fn ([{"name": "jianshu"}]).

* the server returns the prepared data to the client through the HTTP protocol, and the client calls the previously declared callback function (fn) to operate on the returned data.

Fn is a callback function registered by the client to obtain the json data on the cross-domain server and process the data.

* * the format of data returned by the server to the client is as follows:

The jsonp form of 5.jQuery

JSONP are both GET and asynchronous requests, there are no other request methods and synchronous requests, and jQuery clears the cache for JSONP requests by default.

Dealing with cross-domain method II-- CORS

1.CORS principle

The whole CORS communication process is automatically completed by the browser and does not require the participation of users. For developers, CORS communication is no different from homologous AJAX communication, and the code is exactly the same. Once the browser finds that the AJAX request is cross-source, it will automatically add some additional header information, and sometimes an additional request, but the user will not feel it. Therefore, the server is the key to realize CORS communication. As long as the server implements the CORS interface, it can communicate across sources.

Advantages and disadvantages of 2.CORS

CORS requires both the browser (> IE10) and the server to support it at the same time, which is the fundamental solution across domains and is done automatically by the browser.

The advantage is that it is more powerful to support all kinds of HTTP Method, and the disadvantage is that the compatibility is not as good as JSONP.

You just need to make some small changes on the server side:

For example, the http://localhost:{{63342:0}}/ page of a website requests a http://localhost:3000/users/userlist page, and the userlist page returns a json string grid {name: 'Mr.Cao', gender:' male', career:'IT Education'}

Add an Access-Control-Allow-Origin attribute to the response header to specify the address of the same origin policy. The default address of the same origin policy is the page itself. As long as the browser detects a CORS in the response header and the allowed sources include this site, the request response will not be intercepted.

Dealing with cross-domain method 3-- WebSocket

Websocket is a persistent protocol of HTML5, which realizes full-duplex communication between browser and server, and is also a cross-domain solution. Both WebSocket and HTTP are application layer protocols based on the TCP protocol. But WebSocket is a two-way communication protocol. After establishing a connection, both server and client of WebSocket can actively send or receive data to each other. At the same time, WebSocket needs to use HTTP protocol to establish a connection. After the connection is established, the two-way communication between client and server has nothing to do with HTTP.

Native WebSocket API is not very convenient to use, we use Socket.io, which well encapsulates the webSocket interface, provides a simpler and flexible interface, and provides backward compatibility for browsers that do not support webSocket.

Dealing with cross-domain method 4-- postMessage

If two web pages come from different sources, you won't be able to get each other's DOM. Typical examples are iframe windows and windows opened by the window.open method, which cannot communicate with the parent window. To solve this problem, HTML5 introduced a new API: cross-document Communication API (Cross-document messaging). This API adds a window.postMessage method to the window object that allows communication across windows, regardless of whether the two windows are of the same origin or not. The * parameter of the postMessage method is the specific information content, and the second parameter is the source of the window that receives the message (origin), that is, "protocol + domain name + port". It can also be set to *, which means that the domain name is not restricted and is sent to all windows.

Let's look at an example:

At this point, I believe you have a deeper understanding of "how the cross-domain approach of the Web front end is". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.