Note: This article is only used as a personal summary, rough writing style, logical thinking is not very clear, if can help you is honored; If you can correct the mistakes and unreasonable, thank you!

Same-origin policy: The same-origin policy restricts how documents or scripts loaded from the same source can interact with resources from another source. This is an important security mechanism for isolating potentially malicious files. It is a platitude that origin, protocol and port are all the same, which is the basis of Web security. This paper mainly records the points that were not noticed before.

classification

I understand that there are DOM same-origin policy and store same-origin policy

DOM same-origin Policy

Divided into three categories

  1. Allows cross-domain write operations. Such as linking, redirecting, submitting orders (non-Ajax)
  2. Allows cross-domain resource embedding. Such as Script, IMG, video, CSS style sheet introduction, iframe and so on.
  3. Cross-domain read operations are not allowed. Such as ajax or the Fetch API.

Or to sum it up:

The same origin policy allows cross-domain reading, writing and embedding of HTML tags. Cross-domain reads, writes, or embeds generated in JavaScript scripts are not supported

Most of the cross-domain problems we talk about are in the third type. Talk about cross-domain solutions

Ajax cross-domain solutions

  1. Jsonp (ancient). Using the same origin policy to support cross-domain embedding (question why not use IMG), callback is now defined in the script and returned on the remote server.
  2. CORS (most commonly used). Cross-domain resource sharing is an official method for cross-domain resource sharing. See next CORS.
  3. The node transfer. Route the outfield interface through the Node layer.
  4. Nginx reverse proxy. Not very well understood TODO

Storing the Same-Origin Policy

Storage includes localStorage (or sessionStorage), indexDB, and cookie. Localstorage and indexDB strictly enforce the same origin policy. Non-same origin cannot be read or written. But cookies have a different strategy.

For cookies, the sub-domain reads and writes cookies under the parent domain name, but the parent domain name cannot read cookies of the sub-domain name, and the sub-domain names cannot read cookies of each other.

subsequent

The same origin policy does not limit all requests, but mostly XMLHttpRequest, Fetch Api, and web font references (yes, you read that right, @font-face cross-domain considerations when using fonts), canvas drawImage, and WebGL maps. For example, a script script introduces a malicious script under an unknown domain name. However, the same-origin policy does not limit requests for script resources, so malicious scripts can be loaded easily. In general, this situation involves Web security issues (XSS, CSRF, etc.), and the solution to this situation is the CSP (Content security Policy), which is a form of whitelist to accomplish these things.

TODO

  1. CORS detailed
  2. Nginx reverse proxy implementation across domains
  3. CSP content security policy
  4. Security (XSS, CSRF)

reference

The same origin policy – the foundation of all security

mdn w3