Cross origin cross domain request

Cookie

• 1993 ushered inimgLabel, this iswebResource loading for the first time

  <img src="foo.jpg" />
  <img src="https://imgs.developpaper.com/imgs/foo.jpg" />

• 1994

  Set-Cookie: foo=bar

• 1995

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

  At first, such a design would lead to serious problems: whether it is a website, as long as it contains the above label, it will carry cookies to visit.

Not to mention such a request.

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

thereforehttpadoptOriginUse this header to restrict access

• 1999

  //Predecessor of XMLHttpRequest
  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 passaccess-control-allow-originTo determine which resources can be accessed across domains, such as settingsaccess-control-allow-origin: *Allow all resources to be accessed. And by settingcredentialTo decide whether to carry itcookie 。

access-control-allow-credentials: trueDecide whether to allow you to visitcookie。 But at the same time, you must clearly passaccess-control-allow-originIndicates the web address accessed across domains.

These headers have been set in the request we send through the browser, and we don’t need to pay special attention. For example, we pass<form>When sending a request,Content-TypeHas been set to, for examplex-www-form-urlencoded 。

A little bit of knowledge: you can send settings asContent-type: text/plainofPOSTRequest. For example, through<form>To sendemail, as long as it’s guaranteedx-www-form-urlencodedEmpty line spacing.

Referrer

When you jump from one website to another, there will be this header

Origin

ReferrerUnreliable, so there isOriginThis header information.OriginAppears in cross domain requests.

Generally speaking, we limitaccess-control-allow-originThe website is safe enough.

exceptCORShave toGETOther than the requestGETNo requestsOrigin。 Can be judged byOriginKnow whether this is a cross domain request.

Dangerous cookies across domains

When we don’t bringcookieMany problems may arise when making a request. First we need to know what’s going onaccess-control-allow-origin: *It’s safe when, for example, it’s distributed at homeIoTDevice, local request. In addition, it may causeCSRFAttack.

Restrict cookies

For example, through image tracking. When you visitother.comWhen,<img />Will allow settingcookieFor tracking.

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

set upSameSite: Strict | Lax | None 。Laxnot allowimg、 iframe 、 AJAX 、 POSTForm carryingcookie (current site: other. Com)。 howeverLaxallow<a>Links, preload requests,GETThe form can be carried in these three casescookie 。

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

SameSite: StrictThis will result in no cross domaincookieFor example, in nongithubJump togithubWill not carrycookie, at this timegithubNot logged in will be displayed.

httponly: cannot passjavasriptobtaincookie

Cross domain resource policy (Corp)

Cross-Origin-Resource-Policy: same-siteMark assame-siteYour resources can only be loaded from the same site.

Cross-Origin-Resource-PolicyThe response header instructs the browser to block passive cross domain / cross site requests for the specified resource.

Add in the following requestCORPThe header information of the picture will fail to load.

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

Cross-Origin-Resource-Policy: same-site | same-origin |cross-origin

CORB

The following scenario cannot pass through the samecookieHandle, although you cancookiePut onhtmlRequest in progress.

<img src="https://example.com/secret.html" />

This request will stillhtmlThe file request is put into the process to indicate that the current request processing is completed. This may cause some problems.Meltdown and Spectre

Cross-Origin-Read-BlockingPrevent cross domain request actions and cross domain returns. For example, the above request will not enter the processing process of the browser.

Before entering the process, the request will pay attention tomine typeIf it isnosniff (nosniffThe browser will be blocked forcontent-typeSome optimizations of).ChromeBrowser forhtmlRequests for files that are not cross domain will be blocked.

CORBNo header information

Cross domain embedding strategy (COEP)

Cross-Origin-Embedder-Policy: require-corpDocuments can only load resources from the same source, or are explicitly marked as resources that can be loaded from another source.

In order to load resources from other sources, cross domain resource sharing needs to be supported(CORS)Or cross domain resource policy(CORP)。

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Resource-Policy: cross-origin