Consider asserting a Cross-Origin-Resource-Policy?

[mikewest]

Hey folks! Hopefully this is a reasonable repository for requests like this one. :)

Cross-Origin-Resource-Policy (CORP) is an HTTP response header that asserts a scope in which a given resource is allowed to be embedded. Today, the default for all resources is to allow cross-site loads, which unfortunately creates the conditions for side-channel attacks via Spectre, et al. With this background, browser vendors are interested in changing this default generally in the long-term, and in the short-term will allow developers to require explicit opt-in via Cross-Origin-Embedder-Policy. This opt-in will be a prerequisite for some particularly interesting APIs like SharedArrayBuffer.

To support this migration, it would be ideal if y'all could begin adding this assertion explicitly to resources that are expected to be used by various sites out there on the internet (e.g. by sending a Cross-Origin-Resource-Policy: cross-origin header). This should be a no-op in the status quo, and will ensure that y'all aren't blocking developers from opting-into Cross-Origin-Embedder-Policy (and therefore exciting new APIs).

If there's any more context I can give you about this set of features, I'd be happy to chat!

[XhmikosR]

Hey, @mikewest. We can add it no problem. I'm wondering though, has anyone else added this already out there?

[mikewest]

I'm wondering though, has anyone else added this already out there?

I understand your risk-aversion, and it's not unreasonable. This should be a no-op for browsers generally, and I'm poking folks at CDNs, large and small. It's not a change you need to make tomorrow, and waiting for someone else to go first is probably fine. But I expect folks who rely on your CDN will start asking y'all to roll out CORP as browsers begin restricting SharedArrayBuffer and other new APIs behind COEP. I'd like it to be on your radar. :)

[XhmikosR]

@jdorfman @jmervine thoughts?

[jmervine]

No strong opinions, but this isn't really my area. If it's a noop and fairly straightforward to implement, seems reasonable.

[jdorfman]

@mikewest thanks for thinking of us =)

@XhmikosR yes, let me know what I need to do to get this going.

[XhmikosR]

@mikewest @jdorfman

C:\Users\xmr\Desktop>curl -ILl https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css
HTTP/1.1 200 OK
Date: Wed, 01 Apr 2020 16:21:30 GMT
Connection: Keep-Alive
Accept-Ranges: bytes
ETag: "1574963566"
Content-Length: 159515
Content-Type: text/css; charset=utf-8
Last-Modified: Thu, 28 Nov 2019 17:52:46 GMT
X-Cache: HIT
X-Hello-Human: Say hello back! @getBootstrapCDN on Twitter
Access-Control-Allow-Origin: *
Vary: Accept-Encoding
Cross-Origin-Resource-Policy: cross-origin
timing-allow-origin: *
cache-control: public, max-age=31536000

I have a branch pending to add the header to the required ones.

[XhmikosR]

So, let me know how to proceed and I'll publish the changes to the CDN and merge #1496.

[mikewest]

Wow, that was pretty fast!

As I said above, I expect this to be a no-op for your users today. If you don't want to just blindly trust someone who filed an issue on the internet (wise!), you can test that assertion before shipping it by loading the resource in some page somewhere in recent Firefox, Chrome, and Safari browsers. All of these support Cross-Origin-Resource-Policy, and should treat the cross-origin flag as non-blocking.

[XhmikosR]

If you don't want to just blindly trust someone who filed an issue on the internet

Hey, you are not a random person, but point taken 😛 Either way this was a temp test, I haven't enabled the header yet. 🙂

Is there a sample ready page I could use to test this working/failing?

[jdorfman]

If you don't want to just blindly trust someone who filed an issue on the internet

@mikewest I have to second @XhmikosR, you are a legend, we don't just do this for anyone! Any way we can help make the web faster and safer count us in. We know you have the ability to make stuff happen =)

[mikewest]

😊

Is there a sample ready page I could use to test this working/failing?

I put https://mikewest.github.io/scratchpad/maxcdn-bootstrapcdn-1495/ together, which should show that nothing blew up. :)

[XhmikosR]

Thanks for this!

So, to clarify, the header you suggest to make the transition smooth is Cross-Origin-Resource-Policy: cross-origin, right? I guess I don't need to test the error case myself since I suppose this will happen if Cross-Origin-Resource-Policy is set to something else.

[mikewest]

Yes, Cross-Origin-Resource-Policy: cross-origin is what you'd apply to resources that ought to be embeddable across the web. I'll add a failure case to the test file, just so you can see it. It's nothing special; the resource simply fails to load. :)

[XhmikosR]

Thanks!

I had to make some changes for this to work on Firefox 75 and Chrome 80.

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
  <h1>Test for <a href="https://github.com/MaxCDN/bootstrapcdn/issues/1495">MaxCDN/bootstrapcdn#1495</a></h1>
  <p>Loading <code>https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css</code>:
    <span></span>
  </p>
  <script>
    let s = document.querySelectorAll('span')[0];
    let l = document.createElement('link');
    l.rel = "stylesheet";
    l.href = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css";
    l.onerror = _ => { s.textContent = "Oh noes! The CSS file didn't load!"; };
    l.onload = _ => { s.textContent = "Huzzah! The CSS file loaded!"; };
    document.head.appendChild(l);
  </script>

  <p>Fetching <code>https://wpt.live/fetch/cross-origin-resource-policy/resources/hello.py?corp=same-origin</code>:
    <span></span>
  </p>
  <script>
    let ss = document.querySelectorAll('span')[1];
    fetch("https://wpt.live/fetch/cross-origin-resource-policy/resources/hello.py?corp=same-origin", { mode: "no-cors" })
      .then(_ => { ss.textContent = "Oh noes! The fetch succeeded!"; })
      .catch(_ => { ss.textContent = "Huzzah! The fetch failed!"; });
  </script>
</body>
</html>

I was getting errors about s being redeclared and also only the second span's text changed. I switched to textContent too, added charset and lang while at it.

Now it works fine here with Firefox 75/Chrome 80.

[mikewest]

Obviously I should actually run my test instead of just assuming whatever I typed into devtools will work. :) Thanks for the updates.

[XhmikosR]

I'm going to add the Cross-Origin-Resource-Policy: cross-origin in production later today. I have #1496 which will check for the header in all the CDN files.