Detailed explanation of JS origin policy + cross-domain access usage

This time I will bring you a detailed explanation of the use of the JS same-origin policy for cross-domain access. What are the precautions for the use of the JS same-origin policy for cross-domain access? The following is a practical case, let’s take a look.

1. What is the same-origin policy

To understand cross-domain, you must first understand the same-origin policy. The Same Origin Policy is a very important security policy implemented on browsers for security reasons.

What is the same origin:

URL consists of protocol, domain name, port and path. If the protocol, domain name and port of two URLs are the same, it means that they have the same origin. .

Same origin policy:

The browser's same origin policy restricts "documents" or scripts from different sources from reading or setting the current "document" certain attributes. (White hat talks about web security [1])

Scripts loaded from one domain are not allowed to access document attributes of another domain.

For example:

For example, a malicious website page embeds a bank’s login page through an iframe (the two are from different sources). If there is no same-origin restriction, the javascript script on the malicious webpage will The username and password can be obtained when the user logs into the bank.

In the browser, tags such as