Re: [w3c/ServiceWorker] "no-cors" CSS SOP violation (#719)

My concerns about this:

It's difficult for developers to understand which parts of their CSS is protected when loaded cross-origin:

**//cross-origin/user.css**

```css
@import 'user/styles/david-smith.css';
```

**//cross-origin/user/styles/david-smith.css**

```css
@font-face {
  font-family: 'david-loves-consolas';
  src: url('/fonts/consolas-v123.woff2');
}

body {
  font-family: david-loves-consolas;
}

.user-avatar {
  background: url('/images/me-and-samantha.jpg');
}

.davids-mother-is-called-jane {
  background: green;
}
```

Assuming we make the change proposed in this issue, what's private?

We can look at the computed style for body, and determine that the user is called david, and they love consolas. Again, using computed styles, we can determine they have a friend or relative called samantha, who is displayed in the image. We could use guesswork to figure out David's mother is called Jane.

The bits of information that this PR protects is David's surname, as it's only in the `@import` which isn't usually exposed. We also protect the version of the font (I think? Or is this exposed elsewhere?).

My advice to developers would be "Don't put private data in CSS". I realise we do our best to hide the source, as we do with JS, but we don't hide fetches from JS.

Also, as well as this change breaking existing sites, it may not be possible to fix. Although you can load a stylesheet with CORS, there's no way to mark additional imports as CORS.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/ServiceWorker/issues/719#issuecomment-415713603