Jsliang Job Search Series – 17 – Cross domain

Learning with questions:

• What is cross-domain?
• Why cross domain?
• How to resolve cross-domain?

[1] What is the same origin policy?

By source, you can mean URL.

Let’s look briefly at a URL composition;

• Github.com/LiangJunron…

Here:

If no port is specified in the URL, HTTP defaults to port 80 and HTTPS to port 443.

In the same origin policy, the three protocols (protocol, domain name, and port) belong to the same source.

For the following urls, we determine which belong to the same source and which belong to different sources:

• Github.com/LiangJunron…

Above, if two pages correspond to different sources of address, then the browser will determine cross-domain, resulting in the following problems:

• AjaxRequest cannot be sent
• Unable to getDOMElement and perform operations
• Unable to readCookie,LocalStorage 和 IndexDB

So, what is the reason for [2] browsers to be cross-domain?

First of all, cross-domain only exists on the browser side, because we know that browsers are very open, so we need to limit it.

Second, the same origin policy is mainly to ensure the security of user information. It can be divided into Ajax same origin policy and DOM same origin policy.

The Ajax same-origin policy mainly prevents pages from different sources from obtaining cookies and initiating Ajax requests, thus preventing CSRF attacks at a certain level.

DOM same-origin policy is the same. It restricts different source pages from obtaining DOM, which can prevent some malicious websites from using IFrame to embed regular websites in their own websites and confuse users, so as to steal user information.

[3] Why cross-domains occur in actual development scenarios:

1. The servers deployed at the front and rear ends do not belong to the same cloud server.
2. Same cloud server, but you’re inhttps://github.comThe request ishttps://github2.comResources on.

Then, [4] how to solve the cross-domain problem?

1. Using a proxy (proxy)
2. Set up theCORS
3. JSONP
4. … Etc.

Let’s take a closer look at several solutions for cross-domain solutions.

Web pages can get JSON data dynamically generated from other sources by taking advantage of the

The advantages and disadvantages:

1. “Advantages”Ajax 和 JSONPBoth are ways in which the client sends a request to the server to obtain data. butAjaxBelongs to the same origin policy, andJSONPBelongs to a non-same-origin policy.
2. [Advantages] Good compatibility, can solve the problem of cross-domain access by mainstream browsers.
3. [Disadvantages] Only supportedgetrequest
4. Disadvantages: unsafe, may sufferXSSAttack.

Implementation process: omit, see JS handwritten code part.

CORS cross-domain principle.

Cross-domain resource sharing (CORS) is a mechanism that is a W3C standard. It allows the browser to issue XMLHttpRequest or Fetch requests across source servers. And the whole CORS communication process is automatically completed by the browser, without user participation.

To use cross-domain resource sharing, the browser must support it and the server must agree to the “cross-domain” request. So the key to CORS implementation is that the server needs the server.

The browser will automatically carry out CORS communication, the key to achieve CORS communication is the back end. As long as the backend implements CORS, cross-domain is achieved.

To enable CORS, set access-Control-allow-Origin on the server.

This attribute indicates which domain names can access resources. If a wildcard is set, all websites can access resources.

CORS requests fall into two categories:

• A simple request
• Complex request

A simple request looks something like this.

HTTP methods are one of the following:

• HEAD
• GET
• POST

The HTTP header does not exceed the following fields

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• … And so on.

Any request that does not meet the preceding requirements is a complex request.

A complex request contains not only a request for communication content, but also a pre-request.

The difference between simple and complex requests:

• The sending of a simple request looks pretty much the same in code as normal XHR, but HTTP headers always require an Origin message. This field contains the protocol name, address, and an optional port.
• Complex requests send more than one request. The first one is a “pre-request,” and the server needs to return a “pre-response.” A pre-request is actually a permission request to the server. The actual request is executed only when the pre-request is successfully returned.

PostMessage is an API in HTML5 XMLHttpRequest Level 2 and is one of the few Window properties that can be manipulated across domains.

It can be used to solve the following problems:

• Data transfer between the page and the new window it opens
• Messaging between multiple Windows
• Pages with nestediframeThe messaging
• Cross-domain data transfer for the three scenarios above

The postMessage() method allows scripts from different sources to communicate asynchronously in a limited manner, enabling cross-text file, multi-window, cross-domain messaging.

WebSocket is a persistent protocol of HTML5, which realizes the full duplex communication between browser and server, and is also a cross-domain solution.

WebSocket is a two-way communication protocol. After a connection is established, both the WebSocket server and client can actively send or receive data to each other.

The use of WebSocket is covered in the computer networking section and will be covered later.

The same origin policy is the standard that browsers need to follow, but not if the server is making requests to the server.

So we can use Node middleware code (twice across domains) :

• Accept client requests
• Forwards the request to the server
• Get the server response data
• The response is forwarded to the client

Nginx reverse proxy is the simplest way to cross domains.

Nginx only needs to change the configuration to solve the cross-domain problem, support all browsers, support sessions, no code changes, and do not affect server performance.

Other ways are:

1. window.name + iframe
2. location.hash + iframe
3. document.domain + iframe
4. …

But I don’t think Jsliang will be used in my lifetime.

• Summary of browser same-origin policy and Ajax cross-domain methods【 Reading Suggestions: 15min】
• Nine Cross-domain Implementation Principles (Full version)【 Reading Suggestions: 15min】
• How does front-end development solve cross-domain problems independently【 Reading Suggestions: 5min】
• CORS principle and implementation[Recommended Reading: 30min]
• JSONP principle and implementation[Recommended Reading: 30min]
• Interviewer: Is Nginx configured? Does the reverse proxy know?【 Reading Suggestions: 10min】
• 10 Cross-domain Solutions (with The Ultimate Trick)[Reading Suggestions: 1H]
• CORS Cross-domain requests [Simple versus complex requests]【 Reading Suggestions: 20min】

Jsliang’s document library is licensed by Junrong Liang under the Creative Commons Attribution – Non-commercial – Share alike 4.0 International License. Based on the github.com/LiangJunron… On the creation of works. Outside of this license agreement authorized access can be from creativecommons.org/licenses/by… Obtained.