We continue and it's a little bit of a set talk because there is a thing that's on the
bring beauty to the web which is both CSS and I think that we will have here starting
now that everything is beautiful that but I am very pleased to be on the web.
Thanks for the introduction.
So my name is Daniel and today, yes, we're here to talk about CSS, Cascading Style Sheets
or as we like to call them Cascading Spy Sheets.
So why are we here?
Basically, I'm going to show you how you can profile recipients of an email climb.
So you send over an email to someone and then you magically figure out which operating system
they're using which software have installed at least some of those features to then just
better think and print your clients.
What you can also do and we will see that in the second half of the talk is you can send
over an email with an encrypted content, so we're talking about enter and encryption
years, especially PGP and then magically you can decrypt the content and all that with CSS.
So the rough agenda is of course first off we are introducing CSS and especially some
neat features that we use in our research and afterwards we're talking about client
thing operating.
So what can you learn about a client by just sending them some CSS and some let's call
it a special email and in the end we will leak and exploit actual text from an email
client.
So who are we?
I'm saying we because originally this talk was supposed to be given by three people,
Leon Trumbert, Misha Elchvadz and me, unfortunately two of us couldn't make it, so I'm
here alone.
Our group typically works a lot on microarchitectural attacks and side channel attacks
and what we're seeing today is a little bit towards our side channel attacks and
evap and in email clients.
So first off, well, CSS, I am pretty sure most of you have seen CSS and some
form or the other already, what probably especially in this room most of you already also
know is you can even have CSS and HTML in emails nowadays.
So if you for example want to send an email with some orange text you can just use that
use a little bit of CSS to color your text and well that just works because email clients
render CSS as well.
So CSS nowadays can do a little bit more than that.
So modern CSS of course still has some basic features like properties for example to encode
the colors but it goes also a little bit deeper nowadays because you have functions.
You can even have something like the call function which gives you automatic expressions
that you can abuse and we'll see that later on or you can just do things like fetching
and remote image and loading for example a different background or something.
And we of course also have selectors so we can apply these slides to certain elements
on your website and we nowadays also have ad queries.
So conditionals inside CSS so for example this query is only what a style inside that
at rule is only applied when your screen is at least 700px in it's with and these conditionals
are quite neat because you can have something like this depending on the screen size
of your device you fetch two different images from the server because they evaluated
in the order of specificality so which means the second query is a little bit more specific
than the first one so it takes precedence which means if your screen is at least 700px
in it's with for example a normal desktop then you will fetch the later image and if
it's smaller than that for example because you're in a smartphone you will fetch the first
image which means that if you're the one operating that server where those images are
posted you will directly learn something about your user's devices you will learn its
screen size and that's the idea that we're following here but we're not talking only about
things that typically use CSS so like browsers but we're talking about email clients right
so email clients will become in all forms and colors and whatnot so with web mails we have
desktop clients and we of course also have more web clients and the neat thing about that
is especially when we're talking about CSS that under the hood a lot of these features are
very similar why is that because well for web mail we of course for styling can use the rendering
engine of the web browser for desktop clients we sometimes do the very same thing and just
use the rendering engine of a modern browser and for mobile clients we typically use the rendering
engines of the standard browser of the device so essentially make clients also just restricted
I have to say that but essentially just browsers and well there's even one exception to that rule
because typically you would now say okay but you cannot execute JavaScript or anything fancy
like that in a made client which is technically true almost everywhere well during our research
we figured out that for some of those clients this case some of the email you sometimes find
weird corner cases so you could load an iFrame there and inside that iFrame you could actually
execute JavaScript which means you could execute JavaScript code to fingerprint users which
well was also considered a backup by some of the email and is by now fixed so it does no longer
look like this instead you cannot do that anymore but still just with styles so CSS you can still
categorize make lines in basically two groups we call them lenient lines and restrictive clients
whereas lenient lines allow a little bit more than the others and basically in our research we did
we sent out a lot of automated the generated emails to the look at the responses from all kinds
of different made clients and ended up with this list of clients and everything that is on the left
hand side also one very cool UCS feature called container queries and container queries well you see
one here so based on the width of a container you either apply your style or you don't which is
I have to say that very given very similar to media queries but with one important difference
you do not check for the screen width but for the relative size of some container so something
where the element you're talking about is inside so the parent of that element which means you
can actually reason about the size of something on your website so well how is that now relevant
in any case um do you think is you can do with measurements with that okay I have to maybe say
why that is important now um well take a look at different clients and different clients may look
the same but if you can have very precise measurements of the width we will also preserve the
depending on the fonts that are applied by a certain client you will also see elements of a different
width if you can now measure this width you can of course learn which font was applied to that
which means if you have a client that has font x installed and another client doesn't have that
font you can actually distinguish that and well if you want to build code extracting that information
it could look like this so here we have two elements two diff elements and the inner is just
called yes the outer is called target and the target one basically um x is our container so
we can define that this container now or suddenly uses the font chilled sense and chilled sense is
a very nice font for that because it's typically just installed once you have the office suit
installed so without Microsoft Office you probably don't have that font on your machine and then we
give it a width that is relative to that font itself because one cap is a special unit always
defined by the font in place and now if we have a conditional based on that based on the size of
that container which has the size of its font we can actually query for example url on our server
and we only fetch the resource if the client has office installed so that actually leaks that
information to us which font you have installed and we can do some ferritrix like this for example
we build an automated tool to just execute code expressions to figure out whether there are differences
in there and it turns out if you have the following code expression and you execute that on an
inter CPU you end up with 13 obviously if you execute the same thing on an arm CPU you end up with
almost 13 and of course you can now do the same thing you can build a conditional differentiating
those two values so whether something is bigger than 13 or not and yes and that's very continues
for quite a while and our paper we have more details on different features that you can abuse and
turn into conditionals and leak them and again and then you learn a lot of information about
your clients when they're opening an email but well how is emailing or printing even useful
and of course it's always in life they're different motivations striving people so we can for
example assume everyone only has good things in mind then we can build something like leak detection for
example suppose you have a very important email and your company you send that to all your employees
and you now want to see whether that what you want reading that email was actually from your company
or not you could build a fingerprint only matching people from your company and well if it matches
someone from your company you know everything is fine if someone else tries to open that email
well then that fingerprint of someone who's not belonging to a email is also sent to you
and you can see that difference at fingerprint so you learn someone in your company leak that
information through some way else at least forwarded that email of course um speaking about
fingerprinting naturally we can also speak about tracking here you can also use that to enhance
things like the tracking pixels well now you can also add to your tracking pixel the operating system
of your user for example which is a need depending on your perspective and your take on privacy
so what can we do about this well of course all these things rig or so far we've seen required
resources to be loaded from some remote server so we can stop these remote resources from being
accessed and typically also may clients nowadays do that so they if you open an email for
example you typically see that that they prompt you for your that you actually have to accept
loading remote content and the reason are exactly things like that so you do not want to fetch remote
content of course what you can also do and for example proton mail dust is you can as a mail
server you can just unconditionally fetch all the resources so depending no matter which
your unconditionally also flight you just fetch everything proxy everything and then only handle
those requests from your proxy server which means on this server side as a attacker you only see
all the requests being requested at once and then you don't learn anything but even if you add
these things you can still do a little bit of nasty stuff for example you can build very sophisticated
speed fishing miles now you can craft an email that for one thing a print looks like a fishing email
but for someone else for example your IT department opening that mail it looks completely benign
and if you don't look behind you certain of what actually goes on in the source kind of that
mail you don't see that difference at all so maybe accept those two mitigations we also want to
think about restricting some of these HTML and CSS features in our mail clients well and that's
quite some tricks that you can use to think up print mail clients but the question here is of course
that's everything and here can we do more than thing-apprenting and of course I
spoil out myself in the beginning of this talk we can do a little bit more and how did we can
end up with this is funny thing so during our research we tried something like this we used a style
but instead of directly loading that style we imported it from some remote URL and if you think
about that from a mail client perspective it's a little bit harder to sanitize some of these things
correctly because you cannot just go over it sanitize all these things because some are just
lazily fetched from some remote URL and it turns out if we did that and you so go make a client
and for example just apply the purple background our make lines suddenly look like that
which means we could apply this style not only to our email but to the entire the client and
we then ask ourselves like okay that's weird our client now looks well not as good as before anymore
but we also apply this style now to a lot of text also text that we are supposedly not be able to read
which brings us to leaking actual text with CSS so how can we do that and the idea that we follow here
are basically three separated steps first off we measure the dimension or we generate text based
dimensions then we measure those dimensions and then we repeat everything so the first property that
we abuse are fonts and one certain feature of fonts, ligatures so ligatures um for those of you that
are not aware of those features you see in the right hand side of this slide basically you can
fuse certain characters together to look better in your font and how that works is interesting
because you can just build something similar to regaxes so you pattern matching in your font
where you can say if f is followed by an i then you apply the following ligature
which means that if we for example for one second assume we know two characters already let's see
let's say we know s and e of our text we can build 26 different ligatures for the next character we
can build a ligature matching s e a s e b and s e c and because we're designing a font now we
can of course also choose the width of these ligatures and we can just make them unique and well
if we apply this depending on which character is actually third one we see a different
ligature in that font hence a different width again which brings us back to where we were before
measuring width and we see already how we can do so we can just now build a cascade of
lot of container queries depending on which width we apply it we can just delete that character
to our remote server just again accessing summary mode URL well the only stuff that remains
now is we can leak one character how can we leak multiple and for that um well
Leon had a very smart idea here we can just use cs as animations so yeah
thank you so the idea is well we can just apply different animations and for each animation we
leak the next character and what we do here looks like the following first off we do the same trick
that we already seen to mention the very first character of our font or of our text that is
inside an email then we sent that leak to our server now on your server side we create a new
font that already contains that first character and we sent that new font or we hosted new font
on our server and if now the animation triggers while we are or after we process that new font on
our server and hosted a new font and now the client reloads everything well then we can apply
that new font because luckily animations lazy load fonts so we can build the font for the second
character based on the observations from the previous ones and all that it takes years that our
server is fast enough before the animation actually um steps to the next step so the our performance
here is just a round trip time that we have to beat a little bit of computing the next font
and if we do so for example for the so-called client we could leak everything in that box so we could
actually read subjects of other males so we just sent you an email you open that email and we could
immediately send cd text that you see on your screen there and we can just leak these subjects of
other emails that was also assigned to cve and a spinoff fixed but that brings me to email and to
an encryption because now that we've seen how we can actually leak text we can do also
the same thing for end to end encrypted emails so for end to end encrypted emails basically our
fat monolistic following use an email to some recipient and every server along that chain is
untrusted you don't trust anyone basically and what these servers can now do is what they can't
read your email because it's encrypted but I can for example append something to that email but
why should that matter anyway so if we talk about emails and now a little bit about the
form of an action email we can have so-called multi-part mixed males which means we have two parts
these two parts can for example one-half HTML and if your client doesn't support it doesn't show
HTML you can just have a fallback so some plain text here but what we can also of course do
is an attacker we can attach some of our evil HTML containing some CSS now the big question is
is that CSS applied to whatever comes afterwards and of course sometimes it is always a wooden
show this here and the very cool thing here is from an attacker's perspective that your clients
decrypt the encrypted emails for you so if they show everything to you they of course have to
decrypt that so when is our style applied is well a question of in which order everything is
rendered here and the thing is what happens for some of those clients is you actually decrypt
that mail in your client and then you apply this style so what you end up with is the attacker
controlled CSS applied to initially encrypted emails and of course then we're just back to
leaking an encrypted message because the encrypted message is just now decrypted automatically by
your may client and well then we do the same trick again and we can leak the content and
that works on what worked on Mozilla Thunderbird it got assigned in CVE and is by now fixed it
also worked on KDE mail and it almost worked on Apple mail the Apple mail the thing there is that
they don't naturally support PGP so you need to have an additional app in this case GPG so
that you could do the same trick but because that's an external app again that you cannot extract
something from there we could not leak that content so well that basically shows you a lot of things
can go wrong and well we wanted to end this talk with well because some of your are trusting your
may client some of your building your own may clients you wanted to just end this talk with
the lessons that we think are the most important after these two research papers and that is
if you design your own may clients if you're making choice of a certain may client maybe think
about the following two things what can go wrong is message isolation we've seen that you should
probably isolate every message on its own and by message there by I mean not only email threats
so replies can also be malicious for example every message on its own and also be careful to not
apply everything to or if you render something do not apply trusted and untrusted stuff in the same
domain also sanitization can easily go wrong we've seen that in the so-called may client for
example but it tried to sanitize your HTML mail but then once you have recursive imports for that
and import at import rule for example things get very hard to to correctly sanitize again so
you can do it but it gets hard so be careful there our recommendation instead is for if you really
want to protect the privacy and and the security of enter anecdote emails is you may think about
isolating per entire message and maybe because just our feeling is academic researchers it's
maybe a less error prone think about framing instead of sanitization on namespacing so do not
add some random prefix to your elements but for example just use an i frame or something and
sandbox that so that brings me to the end of this talk um well i hope i convinced you that CSS
and style sheets are general are very powerful and they're more than well just some style that
is applied to your mail but in the hands of an attacker malicious person they can actually be used to
infiltrate your privacy or security so well that's an actual threat by now and especially in
the context of enter-end encrypted emails message isolation gets important because we've initially
also seen that a couple years ago with e-fail and we think that what e-fail showed us back then was
the tip of the iceberg but the bigger picture that we now also try to evaluate is that you should
just isolate trusted and untrusted content from each other and be careful also with applying
styles from one thing to another there thank you very much i'm happy to take your questions
you mentioned a message isolation but I suppose that more parts isolation like parts of a
yes the question is about message isolation and whether we want to isolate the parts in
the message yes definitely so we we're also really when in this angle slides thinking about what
term we use there but yes the most specific and correct term in this situation is parts
of a message everything of this mutual or everything ideally should be mutually untrusted to each
HTML should just be yeah exactly
what about replies because if I reply to a message that message is usually if I find a bit
for example it quotes the HTML literally including the CSS puts so that's what you're
formatting have you looked into this because there's a discussion right now if I'm
never like do we sanitize replies to such a CSS so the questions about replies and whether
CSS from replies it's also it's also applied to the origin of my and we thought about this
we never looked really into that and especially not into multiple my clients and how they handle that
yeah that's still I can imagine
it depends a little bit on like this work was also done over 50 course of one and a half years
because this talk was about two research papers most male client vendors were quite responsive
to us and like it depends a bit a little bit on your flat model right because the privacy
issues were not given out CVE directly something more CVE like the text exploitation later on
what's given CVE's by fun or by what's given a CVE by Thunderbird for KDE male it's still
an ongoing fix discussion so maybe I can update you really near future about that
but I would say generally the working together with vendors was quite fun and
helpful right so I have a red meal and then mocks my meal server I use the iFrame to isolate
the HTML and you see the security policy to defend loading and so on is that something else I should be
using the isolate so the iFrame's and whatever it's been got a question is what besides iFrame
and simplex and what else is there you should be aware of we can't think or i personally can't
think of anything more right now so out of experience what we saw is well I remember a client
kind of a sound thing a lot of them were already secure against those things i would just
I think if you have in mind an in-fret model that these things kind of lie and that for example
untrusted even styles can be an issue i think then you're good to go i think the you made
issue that was also raising those concerns was that people purely our hypothesis that the
people three styles just as styles like what could go wrong if someone colors your text right
and we now show like you can do a little bit more than just color your text you can
extortate information there so if you have that in mind i think you're hopefully good to go
i'm Kai i'm working on a lot but thank you very much for your research and to work with
it was very very helpful and i would like to say that is that we should also turn this into a
powerful action and for you to feedback because there is this balance that on the one-high
uses this because there is one group of users who wishes to see as much as security as
profitable and are willing to accept downgraded you are and then on the other hand
users who expect that everything looks great and crazy right so i would like to see more community
feedback what users impact what are you willing to accept by default so so i would like to encourage
people to approach this on the project with your expectations yeah and yeah just just i want to
mention that yeah these three things are all disabled in some level by default because by default
remote content is not enabled but thank you anyway because many people do enable remote content
those important yeah i should add to that i'm exactly what you said like for some of those
exploit especially some of those main clients are very privacy aware and disabled quite some of
those features by default it depends on a little bit on the users configuration of what it takes
you can mode or what it takes you can't mode so yes i can't agree more like this discussion
of usability versus security is ongoing and all of our applications are right and especially
make lines and now for things like well beauty versus well threat model like all the these things
together that it becomes even more relevant thank you my question was that similar to this
it of your experiences over the years you basically are this to notebook correct but you
will feel that all these issues like short amount of images yeah so um
question is whether when we filter all remote images over that's fine um basically like i also have
this one slide where you have spearfishing some stuff still works and what you can for example also
do and i didn't or i couldn't go into detail there in this talk um is if you can change the
content of your mail for an internship that may have for example you can still smooth signatures
because you can have a valid signed message but if you can change and modify the content of the
mail or make it look different then you can still do something in that direction but of course
the more severe variants of that they can be blocked if you just block our remote content
the other hand is that user experience suffers by that that's of course well maybe maybe a very
hard trade or for that all right thank you very much again