The origin and cross-domain details of the front-end interview

Cross-domain is caused by the browser's same-origin policy, refers to the page request URL address, must be on the same domain as the browser URL address (that is, the domain name, port, the same protocol), the following article on the front-end interview necessary for the homologous and cross-domain related information, the article through the sample code introduced in very detailed, You need a friend to refer to below.

Objective

It is well known that the browser of the same-origin strategy and cross-domain approach in the front-end interview is also very high out of the question, this article is mainly to share with you about the front-end interview will encounter the same origin and cross-domain issues, the following words do not say, come together to see the detailed introduction bar.

What is a homologous policy

The same-origin policy is a key security mechanism used to isolate potentially malicious files by restricting which documents are loaded from one source or how the script interacts with resources from another source.

What is homology

If the protocol, domain name, and port are the same for two pages, then the two pages are of the same origin. For example: http://www.hyuhan.com/index.html This site, the protocol is HTTP, the domain name is www.hyuhan.com, the port is 80 (the default port), its homologous situation is as follows:

• Http://www.hyuhan.com/other.html: Homologous

• Http://hyuhan.com/other.html: Non-homologous (domain name is different)

• Https://www.hyuhan.com/other.html: Non-homologous (protocol differs)

• Http://www.hyuhan.com:81/other.html: Non-homologous (port different)

The same-origin policy is designed to protect the security of user information, and the following behaviors are restricted by the same origin policy:

1. Cookies, Localstorage, and indexdb cannot be read

2. Dom cannot be manipulated

3. Ajax requests cannot be sent

How to do cross-domain access

How to make Ajax requests across domains

There are three main ways to bypass the limitations of the same-origin policy for cross-domain AJAX requests.

JSONP

Jsonp is a common method for client-to-server communication across domains. Using the <script&bt; element that can cross the domain, request the JSON data to the server, and after the service side receives the request, the data is sent back in a callback function. The implementation is as follows:

Window.onload = function () {    var script = document.createelement (' script ');    SCRIPT.SRC = "Http://example.com/callback=test";    Document.appendchild (script);} function Test (res) {    console.log (res);}

The callback parameter of SRC is used to set the name of the callback function that the backend needs to call, and the data returned by the server is as follows:

Test ({    "name": "Xiaoming",    "age": +    })

This allows the front end to read back-end data across domains. However, JSOPN can only take a GET request and cannot send a POST request.

WebSocket

WebSocket is a new TCP-based network protocol, it does not implement the same-origin policy, as long as the server support, you can cross-domain access. And WebSocket is not limited to Ajax communication, because AJAX technology requires client-initiated requests, and WebSocket servers and clients can push information to each other.

CORS

Cors is the abbreviation for Access-control-allow-origin (cross-domain resource sharing), which is a standard for the global. Cors requires both browser and server support, which is currently supported by all basic browsers. The server-side support for cors is mainly done by setting up Access-control-allow-origin. If the browser detects the appropriate settings, it can allow Ajax for cross-domain access.

Document.domain

Cookies are information that the server writes to the browser, so that only the same-origin pages can be shared for security purposes. However, if the first-level domain name of the two pages is the same, but the headset domain name is different, you can share the cookie by setting Document.domain.

For example, a web domain name is http://w1.example.com/a.html, another web domain name is http://w2.example.com/b.html, These two pages can share cookies as long as you set the same document.domain for them.

PostMessage API

The PostMessage () method allows scripts from different sources to communicate in an asynchronous manner with limited communication, allowing for cross-document, multi-window, cross-domain messaging. Using the PostMessage () function to pass a message, the target page listens to the message event of the window to receive messages. With PostMessage, we can read Localstorage and INDEXDB and DOM data across domains.

Window.name

The browser window has the Window.name property, which specifies whether or not the same origin, as long as in a window, the previous page set this property, the next page can read it. That is, in the life cycle of a window, all the pages loaded in the window are shared by a window.name, each page has permission to read and write to Window.name, and Window.name is persisted on all pages loaded in a window. Obviously, this is possible for cross-domain access.