Cross-origin Javascript knowledge

Javascript cross-origin knowledge details JS cross-origin knowledge summary:

Before the term "cross-origin" often appeared, we used it frequently. For example, if the img and src of website A point to an image address of website B, there is no doubt that this is normally displayed (regardless of anti-leech technology). Similarly, you can direct the src attribute of the script tag to the script resources of other websites (in some cases, you may even encourage it to take full advantage of the load advantages of other websites and reduce the concurrency of your servers ). However, if you use js to actively request data from other websites, such as ajax, you will encounter depressing cross-origin problems, which is what we usually call cross-origin. For security reasons, cross-origin access is disabled by various browsers by default. This involves the concept of a same-origin policy: a same-origin policy prevents scripts loaded from one domain from obtaining or operating document properties in another domain. That is to say, the domain of the requested URL must be the same as that of the current Web page. This means that the browser isolates content from different sources to prevent operations between them.

The specific security problems brought about by cross-origin are not discussed in detail by bloggers.

However, in many cases, especially as the Internet continues to grow, we need to request frontend interfaces from different partners or data providers, before the cross-origin access method is standardized (the client's cross-origin access needs also attract w3c attention. See the reference that the html5 WebSocket standard supports cross-Origin data exchange, it should also be an optional cross-Origin data exchange solution in the future.) Is there any way to bypass its restrictions? There are many answers (though difficult). The most common answer is the so-called JSONP cross-origin.

JSONP Principle

The most basic principle of JSONP is to dynamically Add a script tag, while the src attribute of the script tag has no cross-domain restrictions. In this case, this cross-origin method is not related to the ajax XmlHttpRequest protocol.

JSONP is JSON with Padding. Due to the same-origin policy restrictions, XmlHttpRequest only allows requests to resources of the Current Source (domain name, protocol, port. If you want to perform a cross-origin request, you can use the html script tag to perform a cross-origin request and return the script code to be executed in the response. This cross-origin communication method is called JSONP.

Here is a simple example:

  Test Jsonp