Detailed explanation of homology and cross-domain required for front-end interviews

Preface

As we all know, the browser's homology strategy and cross-domain method are also frequently encountered problems in front-end interviews. This article mainly shares with you the homology and cross-domain problems encountered in front-end interviews. 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 origin can interact with resources from another origin. It is a key security mechanism for isolating potentially malicious files.

What is homology?

If the protocol, domain name, and port are the same for two pages, then the two pages are from the same origin. For example, the website http://www.hyuhan.com/index.html has the protocol http, the domain name www.hyuhan.com, and the port number 80 (default port). Its homology is as follows:

• http://www.hyuhan.com/other.html: Same source
• http://hyuhan.com/other.html: Different source (different domain name)
• https://www.hyuhan.com/other.html: Different source (different protocol)
• http://www.hyuhan.com:81/other.html: Different source (different port)

The same-origin policy is to protect the security of user information. 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 request cannot be sent

How to perform cross-domain access

How to make AJAX requests across domains

There are three main ways 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 clients and servers. Use the cross-domain <script&bt; element to request json data from the server. After receiving the request, the server puts the data in a callback function and passes it back. 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. The data returned by the server is as follows:

test({
    "name": "Xiaoming",
    "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 and can perform cross-domain access as long as the server supports it. Moreover, WebSocket is not limited to communicating in Ajax mode, because Ajax technology requires the client to initiate a request, while WebSocket servers and clients can push information to each other.

CORS

CORS is the abbreviation of Access-Control-Allow-Origin (Cross-Origin Resource Sharing), which is a W3C standard. CORS requires support from both the browser and the server. Currently, almost all browsers support this function. The server-side support for CORS is mainly achieved by setting Access-Control-Allow-Origin. If the browser detects the corresponding settings, it can allow Ajax to access across domains.

document.domain

Cookies are information written by the server to the browser. For security reasons, only web pages with the same origin can share them. However, if the top-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, if one webpage domain name is http://w1.example.com/a.html and another webpage domain name is http://w2.example.com/b.html, these two webpages can share cookies as long as they are set with the same document.domain.

postMessage API

The postMessage() method allows scripts from different sources to communicate asynchronously in a limited manner, which can achieve cross-document, multi-window, and cross-domain message delivery. Use the postMessage() function to pass messages, and the target page listens to the window's message event to receive messages. Using postMessage, we can read LocalStorage, IndexDB and DOM data across domains.

window.name

The browser window has a window.name property, which stipulates that regardless of whether they have the same origin, as long as they are in the same window, if the previous web page sets this property, the next web page can read it. That is, during the life cycle of a window, all pages loaded into the window share a window.name, each page has read and write permissions to window.name, and window.name persists in all pages loaded into a window. Obviously, this can achieve cross-domain access.

Summarize

The above is the full content of this article. I hope that the content of this article will have certain reference learning value for your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support for 123WORDPRESS.COM.