Cross origin cross domain request

Cookie

• 1993 In the img label , This is a web For the first time, resource loading

  <img src="foo.jpg" />
  <img src="http://somewhere.com/foo.jpg" />

• 1994

  Set-Cookie: foo=bar

• 1995

  <img src="http://somewhere.com/foo.jpg" />
  <script src="http://somewhere.com/foo.js" ></script>
  <iframe src="http://somewhere.com/foo.html" />

  At first, such a design will lead to serious problems ： Whether it's a website , As long as the label on it is included cookie visit .

Not to mention such a request .

<form action="http://somewhere.com./submit"></form>

therefore http adopt Origin This header is used to restrict access

• 1999

  // XMLHttpRequest  The forerunner of 
  new ActiveXObject('Microsoft.XMLHTTP');

• 2008

  var req = new XMLHttpRequest()
  req.addEventListener('load', loadListener);
  req.open('GET', 'https://example.com/data.txt');
  req.send();

Now?

const res = await fetch('http://example.com/data.txt', {
    credentials: 'include',
});

Now we have used this method to request , But it is also limited by whether the server responds （ The following is why some servers respond ）.

Cross-domain resource sharing （CORS）

We go through access-control-allow-origin To determine which resources can be accessed across domains , For example setting access-control-allow-origin: * Allow all resources to be accessed . And by setting credential To decide whether to carry cookie .

access-control-allow-credentials: true Decide whether you are allowed to visit cookie. But at the same time, you must definitely pass access-control-allow-origin Point out the web address accessed across domains .

These headers have been set in the request we send through the browser , We don't need special care . For example, we passed <form> When sending, when requesting , Content-Type It has been set to, for example x-www-form-urlencoded .

A little bit of knowledge ： You can send as Content-type: text/plain Of POST request . For example, through <form> To send the email, As long as you guarantee something like x-www-form-urlencoded Empty line spacing .

Referrer

When jumping from one website to another , There will be this header information

Origin

Referrer unreliable , So there is Origin This header message .Origin Will appear in cross domain requests .

Generally speaking , We restricted access-control-allow-origin The website is safe enough .

except CORS have to GET Out of request , Other GET No request Origin. By judgment Origin Know whether this is a cross domain request .

Dangerous across domains cookie

When we don't bring cookie When a request is made , May cause a lot of problems . First of all, we need to know what the situation is access-control-allow-origin: * It's safe when , For example, distributed in the home IoT equipment , Local requests . In addition, it may cause CSRF attack .

Limit cookie

For example, through image tracking . When you visit other.com when ,<img /> Will allow setting cookie To track .

<!-- site: other.com -->
<img src="http://statics.com/user-avatar-a.png" />

Set up SameSite: Strict | Lax | None .Lax Don't allow img、 iframe 、 AJAX 、 POST The form carries cookie( The current site is ：other.com ) . however Lax allow <a> link , Preload request ,GET Form this 3 Carry in case cookie .

Set-cookie: sessionid=1234567; SameSite=Lax; HttpOnly; Max-Age=3153600

SameSite: Strict This will result in no cross domain cookie , For example, in non github Jump to github Will not carry cookie , here github Not logged in... Will be displayed .

httponly： Cannot pass javasript obtain cookie

Cross domain resource policy （CORP）

In the LAN , There may be failure cookie Access to resources .

Cross-Origin-Resource-Policy: same-site Marked as  same-site  Resources of can only be loaded from the same site .

Cross-Origin-Resource-Policy The response header will instruct the browser to block passive cross domain access to the specified resource / Cross site requests .

CORB

Cross-Origin-Read-Blocking The request action will be blocked in the cross domain stage . Because for example CORS Our strategy is to prevent return .

Cross domain embedding strategy (COEP)

Cross-Origin-Embedder-Policy: require-corp Documents can only load resources from the same source , Or resources that are explicitly marked as loadable from another source .

To load resources from other sources , Need to support cross domain resource sharing (CORS) Or cross domain resource policy (CORP).