Abstract: The same origin policy means that it must be under the same protocol, domain name, and port number, and the three must be consistent.
This article will discuss the same origin policy from the following aspects:
First point: What is the same origin policy
Second, why is the same origin policy needed
Third point How: How to solve the classic cross-domain problem
What is the same origin policy
What is the same origin policy? Usually after a concept, I will find the analysis from the actual example of life, you can imagine, if your house, is not allowed to enter strangers, if you can enter casually, so long may be stolen, then at this time, the lock and the key appeared in order to ensure the security of the home.
So we introduce the same origin policy of the browser, which means that it must be under the same protocol, domain name, and port number, and all three must be consistent. At this point, we say homologous.
Here’s an example:
The http:// is what we call the protocol.
www.angular.cn is what we call a domain name.
80 represents the port number.
Therefore, there will be a problem of data interaction between different sources. If it is the following two linked interactive data, it can be detected by the same origin policy:
However, if the link interaction data is as follows, it will not pass the same origin policy detection:
What is not subject to the same origin policy
Links on the page, such as the A link.
Redirection.
Form submission.
Cross-domain resources such as script, img, link, iframe are introduced.
Solve cross-domain problems
Since there is a restriction of the same origin policy, there will be a cross-domain problem, which means that scripts from different sources will report errors when data is exchanged. This process is called cross-domain.
So what’s the solution?
JSONP addresses cross domains
CORS deals with cross domains
In general, these two are more classic, more commonly used in the work, so first talk about the above scheme.
JSONP addresses cross domains
What is JSONP, for example, is that a.com/jsonp.html wants to get the data that is, but it cannot get the data because of the browser same-origin policy. So we can create a script at a.com/jsonp.html with a… . The callback function XXX is called in main.js and passed as JSON data to complete the callback. Let’s look at the code:
There are several problems as follows:
Only GET requests can be used, not POST requests.
It can be injected with malicious code to tamper with the content of the page, which can be circumvented by using string filtering.
CORS deals with cross domains
CORS is a W3C standard, the full name is “Cross-Origin Resource Sharing”. It allows the browser to make XMLHttpRequest requests to cross-source servers, thereby overcoming the limitation that Ajax can only be used with one source. In the example above, we added the response header declaration to B.com to allow access to A.com. The code is:
Then AJAX can be used to retrieve data from B.com.
Click on the attention, the first time to understand Huawei cloud fresh technology ~