Same-Origin Policy & cross-domain

Homologous policy

The browser is only allowed to interact with interfaces under this domain for security reasons. Client script from different sources cannot read and write to the other's resources without explicit authorization. This is the security policy of the browser.

"Homologous" refers to "three identical":

• Same protocol: HTTP or HTTPS, if all
• The same domain name: If all are http://www.abc.com/a and http://www.abc.com/b
• Ports are the same: if all are 80 ports

Note: For the current page, the page is stored in the domain of the JS file is not important, it is important to load the JS page in the same domain.

In the case of non-homologous, there are three types of behaviors that are restricted:

1) cannot read cookies, localstorage and IndexedDB of non-homologous web pages.

2) cannot touch the DOM of non-homologous web pages.

3) An AJAX request cannot be sent to a non-origin address (can be sent, but the browser refuses to accept the response).

For example, if you log on to an e-commerce website, the e-commerce website gives you some cookies, which generally contain your personal information and privacy, and when you leave the e-commerce website to browse other websites, if there is no homologous strategy, Then other websites can read your cookie and get your data, and can make changes, which is a very dangerous and scary thing! This is not only a disclosure of personal privacy, it may have other effects on users.

Cross-domain

Browsers request resources from sites that do not have the same origin, which can be said to be cross-domain.

Because of the same-origin policy, we ask for different sources of address resources will be affected by a lot, then how to reasonably avoid the above restrictions.

1. JSONP (JSON with padding)

JSONP is to load the data through the script tag to get the data as a JS code to execute, the premise of declaring a function on the page, the function name through the interface to pass the parameter to the background, the background parsing to the function name on the original data "package" the function name, sent to the front end. In other words, JSONP needs the back-end mates of the corresponding interfaces to be implemented.

The script tag in HTML can load JS under another domain, for example:

<src= "http://api.jirengu.com/weather.php"></script >

We get the data from this weather interface, but the problem is that the returned format is JSON data that we can't manipulate and use, and we can do

<src= "Http://api.jirengu.com/weather.phpcallback=showData?" ></ Script >

After the request arrives at the backend, back end resolves callback This parameter gets to the string showdate, sends the data to do the following processing:
Before the backend returns data: {"City": Hangzhou "," Weather ":" Sunny "} Now the backend returns data: Showdate ({"City": "Hangzhou", "Weather": "Sunny"}) the front script tag will "Showdate" ({"City": "Hangzhou", "weather" after loading the data): "Sunny"}) "as JS to execute, which is actually called showdate this function, colleague parameter is {" City ":" Hangzhou "," Weather ":" Sunny "}. The user simply needs to showdate this global function in the page definition in advance, and process the parameters inside the function.

< Script > function ShowData (ret) {Console.log (ret)} </ Script > <  src= "Http://api.jirengu.com/weather.php?callback=showData"></ Script >

2.CORS

CORS full name is cross-domain resource sharing (cross-origin Resource sharing), is an AJAX cross-domain request resources, support modern browser, IE support more than 10. The implementation is simple, when you use XMLHttpRequest to send a request, the browser discovers that the request does not conform to the same Origin policy, will add a request header to the request: Origin, the background for a series of processing, if the acceptance of the request will be added to the return result of a response header: Access-control-allow-origin, the browser determines whether the response header contains the value of Origin, and if so, the browser processes the response, we can get the response data, and if the browser does not include a direct rejection, then we cannot get the response data. So the appearance of CORS is that it makes you feel that it is no different from the same kind of Ajax request, the code is exactly the same.

About Cors communication, the entire process is done by the browser, so for the front end, as long as the AJAX request can be sent, for the server side to achieve a response to the Cors interface, you can cross-domain communication.

3. Descending domain

iframeElements can be embedded in the current page and embed other pages. Each iframe element forms its own window, which has its own window object. iframethe script in the window can get the parent window and child window. However, the parent window and child window can communicate only in the same origin, and if you cross the domain, you cannot get the DOM of the other.

If you want to get communication from another window of a different source, you can set the two pages document.domain property to drop two pages under the same domain name.

4.postMessage

This API window adds a new method to the object, window.postMessage allowing cross-window communication, regardless of whether the two windows are homologous, this method can safely implement cross-domain communication.

Window.frames[0].postmessage (this. Value, ' * ')

Listen for PostMessage in a webpage that needs access to the data.

Same-Origin Policy & cross-domain