Detailed introduction to same-origin and cross-domain front-end interviews

Cross-domain is caused by the browser's same-origin policy. It refers to the url address requested by the page. It must be in the same domain as the url address on the browser (that is, the domain name, port, and protocol are the same). The following article explains Let me introduce to you the relevant information about the same origin and cross-domain that are necessary for front-end interviews. The article introduces it in detail through sample code. Friends who need it can refer to it.

Preface

As we all know, the browser’s same-origin strategy and cross-domain methods are also issues with a high appearance rate in front-end interviews. This article I mainly shared with you about the same-origin and cross-domain issues that will be encountered during front-end interviews. I won’t go into more details below. Let’s take a look at the detailed introduction.

What is the same-origin policy

The same-origin policy is used to restrict how documents or scripts loaded from one source can interact with documents or scripts loaded from another source. It is a key security mechanism for isolating potentially malicious files.

What is the same origin?

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 For this website, the protocol is http, the domain name is www.hyuhan.com, the port is 80 (default port), and its origin is as follows:

• http://www.hyuhan.com/other.html: same origin

• http://hyuhan.com/other.html: different origin ( Different domain names)

• https://www.hyuhan.com/other.html: Different sources (different protocols)

• http:/ /www.hyuhan.com:81/other.html: Different sources (different ports)

The same-origin policy is to protect the security of user information. The main restrictions restricted by the same-origin policy are The following behaviors:

1. Cookie, LocalStorage and IndexDB cannot be read

2. DOM cannot be operated

3. AJAX request cannot be sent

How to perform cross-domain access

How to perform cross-domain AJAX request

There are three main methods to bypass the restrictions of the same-origin policy and make cross-domain AJAX requests.

JSONP

JSONP is a common method for cross-domain communication between the client and the server. Use the cross-domain

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 needs to be called by the backend. The data returned by the server is as follows:

test({
    "name": "小明",
    "age": 24
    })

In this way, the front-end can read the back-end data across domains. However, jsopn can only make get requests and cannot send post requests.

WebSocket

WebSocket is a new network protocol based on TCP. It does not implement the same-origin policy. As long as the server supports it, cross-domain access is possible. And WebSocket is not limited to Ajax communication, because Ajax technology requires the client to initiate a request, and the WebSocket server and client can push information to each other.

CORS

CORS is the abbreviation of Access-Control-Allow-Origin (cross-domain resource sharing), which is a W3C standard. CORS needs to be supported by both the browser and the server. Currently, basically all browsers support this feature. Server-side support for CORS is mainly performed by setting Access-Control-Allow-Origin. If the browser detects the corresponding settings, it can allow Ajax cross-domain access.

document.domain

Cookie is information written by the server to the browser. For security reasons, only web pages with the same origin can be shared. However, if the first-level domain names of the two web pages are the same but the domain names of the headphones are different, you can share cookies by setting document.domain.

For example, the domain name of one web page is http://w1.example.com/a.html and the domain name of another web page is http://w2.example.com/b.html. As long as they are set the same document.domain, the two web pages can share cookies.

postMessage API

The postMessage() method allows scripts from different sources to communicate in an asynchronous manner in a limited manner, enabling cross-document, multi-window, and cross-domain messaging. . Use the postMessage() function to pass the message, and the target page listens to the message event of the window to receive the message. Using postMessage, we can read LocalStorage, IndexDB and DOM data across domains.

window.name

The browser window has the window.name attribute. This attribute stipulates that regardless of whether it has the same source or not, as long as it is in a window, the previous web page is set This attribute can be read by the next web page. That is, within the life cycle of a window (window), all pages loaded by the window share a window.name. Each page has read and write permissions for window.name. Window.name persists in a window. of all pages loaded. Obviously, this can achieve cross-domain access.

The above is the detailed content of Detailed introduction to same-origin and cross-domain front-end interviews. For more information, please follow other related articles on the PHP Chinese website!