 Hello, today I'll be talking about Third Party CSS, it's not safe, why because one day I just read this article and then I find it very interesting and I'm pretty sure this article has come out, came out in 2018, everyone may have read it but if you have not, you should go and read it but if you are lazy to read and lazy to understand all these words, today let's read it together because you have no choice, I will be reading this together with you, so what is Third Party CSS? I think the first paragraph we just skip first, later we'll come back So Third Party, meaning content or files that is not from your own domain, for example you are working at SingaporeCSS.github.io, anything that is outside of that domain is Third Party Okay, this is supposed to, okay, so he started with like Third Party images, why is not safe, it's because if say you initially were thinking of like you know and use some URL from other websites and then it was supposed to be a kitten image but then suddenly the owner of the website change that kitten image to something disgusting, it will make your website looks ugly, so that's why you shouldn't trust Third Party images, Third Party script is even worse because you are actually going to execute whatever is written in the script So they can actually read and do everything that on your website that you just treat them as like your own script, that kind And then lastly is Third Party CSS and that is the main topic of like why is it not safe, before we start about why we talk about it is not safe, let's look at where does this all Third Party CSS come from So it's not written in the blog, this is like I own self come one, because I'm thinking like where do I got all this CSS, I mean I'm building my own website, my CSS is all written by myself, I don't copy paste from Stack Overflow anywhere But where does this all Third Party CSS coming from, so I have a few examples, firstly is you may, okay this is not against like bootstrap but if you go to some CSS frameworks, sometimes you will see them telling you how you can use the CSS from CDN Basically you just copy this link and then they will load the CSS into your website, so unless you are telling me you will actually click into the link and look at all the contents, make sure they are safe I presume most likely you just copy and paste, you allow whatever they're going to style your website So this is like one of the place where Third Party CSS is coming from So another place would be, this is like if you go to some website, I believe, okay let's go to Shopee So if you look at the network tab and then you will realise how come my network tab doesn't open Okay, you will realise that not all request goes out to Shopee actually, if you do something like let's filter out Shopee Sorry, let's filter out Shopee You still see scripts that is loaded from say Google Analytics, Cretio, which is like an ads network and all these things They are not from Shopee and that's because they want to track you, they are relying on other social networks to have targeted advertisement for you So basically, I think your website may have it because you want to track the analytics of people coming in Also you want to make advertisement when they go to visit like Google.com and then they should see some advertisement because they come here to your site, they don't want to buy things and then you go and add advertisement on Google to ask you to come back to buy Do you actually look at what all these script contents, they can actually add, I mean if they are really nice enough not to run bad things on JavaScript but they can still add CSS on your website and install it and may screw your website That is one of the place And then lastly, I think some of us like to turn our website, want to make it nice, a browser and then want to make it nice We install extensions from like web store And then this will actually inject CSS, because they want to style your browser and install your website Do you actually really look into what the CSS they are doing Maybe something malicious So here are like the three places where the third party CSS comes in So what can they do? I mean CSS should just able to style your website Make style changes What harm can they do to your website And the first one, which is I think the most interesting one will be You can actually steal your password But I will leave this at the very end Let's look at something malicious but simple first So the first one is about disappearing content So they can actually hide certain contents of your website and then make your website looks like it's down But it's just maybe a simple line of CSS like display none So I'm going to try out whether I mean for the sake of trying out, let's see how this works So here I have one Chrome extension install In my website In my browser It will actually load CSS In the browser So if you look at here It will just inject this hacker.css Into all the pages that I'm visiting Right now it's an empty CSS But let's see what we can So this CSS is coming from This file Sorry, where is my static CSS So it's from this file So let's do a simple like hiding a content CSS So I could just do this And then I refresh It will looks as if your CSS Today got no speaker No one is speaking Got no detail I mean it's just one line of CSS And you can do so much harm to your website And what's even worse Is that They can So here we have an RSVP button But we can actually do some CSS to Say Sorry, I removed the They can Just say They can change your text To say refresh And then it's actually RSVP So they can click you to go somewhere else That you don't want to go So how we do this We can take a look It's actually Firstly we do a display none to hide everything We to add text Random text we can use before or after And use a content Let me zoom Big-big on the CSS panel Over here So we can add content So we can actually add any content And then for the button It used to be RSVP Right now What we do is actually We have Sorry We overlay a Word on top So we just Add the word Sorry We We add After We add a content And then we just draw the words On top of it And then maybe we add a background Or something to cover it up And then you will look like This button is supposed to refresh Instead of RSVP Right So you can use Lines of CSS And you can do so much harm So careful with the CSS That you Adding to the website Next thing would be adding content So similar to hiding Adding I think just now My examples kind of blend into it But this one is quite interesting Where you can actually Make nuance Changes to the website You can add Numbers In front of the prizes So one example would be You see like Shopee They say flash deal, very cheap But how about we just add Some CSS to make it Make all the price become More expensive We can try to target We can inspect and see The class is Sorry Sorry I got this panel You can find the span Where it says the price We just need to add a before To add more numbers in front So now if we refresh You will notice that The price is no longer cheap And it's much more expensive And it's not like flash deal anymore For the slow website Ya, so it looks very expensive now But it feels a bit Fake All the prices are marked up By 100 in front It feels like a very fake Prefix So that reminds me of One very nice article That was from Lea Verru If I pronounce it correctly It's about Cicada principle So basically I'm not going to read this for you So you can read it Lea Verru Basically you can use prime numbers To create patterns To make it less Obvious patterns that's coming out So What I'm going to do Is I'm going to Add Random numbers Random Repetitions And then I do that It feels less Less fake The numbers Ya, the numbers Is what It's not updated Sorry, I'm going to save It will make the price look less fake Where some prices are marked up by 20,000 And you kind of doesn't Get the sense of What is going on here Right This is a very slow website Okay I think I feel doing it Something is not right But anyway What else we can use Adding content To Break a website So I was thinking besides Using this e-commerce website One of the example I can I think of Is OCBC Like Bangs website If you can add a style What Things you can do That is not cracking But slightly breaking the website Or I was thinking that You can see Phone number over here Actually from OCBC What about Change it So I have CSS over here That will do the job Basically What it does is that it will add After tag After And then Put a content that And with a position absolute Place it overlaid on top of the original Phone number So that you just cover the original Number up Okay When I was doing it, it was a landscape mode There you go You can change the phone number And people will just Call this number instead of The actual phone number of OCBC And you can Be nice Next thing is Moving content So besides just doing Adding random Stuff that is malicious You can actually move the content Around that In a way that Is malicious as well So one of the examples they are given here was to You know make one of the Delete button or buy now button To be big enough and transparent That covers The entire site People whenever they just click anywhere On the site will just go there So one of the example I can think of Is Using a Singapore CSS websites Again I I basically go install The RSVP button To make it like it's everywhere You can't see it now but If you notice that add me up.com Is showing because it's on hover So Singapore CSS will go to the Meetup RSVP site Yay Next thing Is about reading attributes So we Slowly towards Move slowly towards where you Can actually sniff data From the user Right so Attributes like So you can have Has this attribute selector Where you can select an attribute And you can You can use like a dollar Sign or you use a carrot Sign that you can target where Attribute starts with a certain Characters or end with a certain Characters also you have You can actually target Whether the attribute value Has a certain Characters inside So Is actually try to Target value And then If it's one six Maybe it starts with one or two Or three you do or something different And then try to sniff it out But how do you sniff that out Basically what you can do Is Try to add background image Because when you have a background image The browser will actually Hose that image Can be Can be hosted in your server Basically you can know What request is coming in And based on that You kind of able to Say You kind of able to know What is What number is In front of the value If you're using like a So one thing I tried Here was that I notice that OCBC login Side So usually it forms When you want to prevent Course Wait, that's not course You want to provide cross side resource for Basically you want to prevent people From calling an API from Somewhere else You would add like a hidden value Or CSRF token Or something like that So in the OCBC form Over here You have something similar as well It's like This random These are like random generated Strings That Secures this session But what if we can target them Like we can target this ID Of a random number model And then we also add Attribute selector To select where if it starts with 8 We load some image If it starts with 7, we load another image And then basically we can Start to guess each numbers And eventually With enough CSS You can sniff out This value and do some nasty stuff So Sorry, this is not a code I written some CSS So it will try To Hold on Localhost Yup, it will try to load Image In a localhost So basically I have a server running Locally And Any request goes to the server You will see a lot over here Okay So let's Think I'm doing it, right? Let's refresh this page And take a look at the network Or image Okay, refresh My laptop is getting slower Because of the screen sharing But Let's try to Hold this Okay So I think it works There's an A character inside But It doesn't load the website It doesn't Reach my server And Let's take a look at what's going on over here Basically It says that it's being blocked By CSP So what is CSP So CSP is actually Content Security Policy That says that Your website Can only load a specific List of Images from a specific list of Trusted sources Right, so Localhost apparently is not one of them That's why it doesn't load Images from localhost So how do you This is also part of In the Blog that says how you should Do, which is you should Set a CSP To prevent loading images or scripts From untrusted sources Right, so let's take a look How OCPC set this up If you look at the docs On the website The response header CSP Is written in the response header So this list Is telling you What are the trusted Domains of assets That can be loaded I think it's a bit messy So I Copy it out Into this slide So in content security policy You can You can break it down To different types of assets You can say styles Can be from anywhere But the font can only From a certain domain And image can be only From a certain domain Another different sets of domains And if it doesn't match The asset type Then maybe fall back to the default one So these are the list of Trusted sources And apparently local host Is not one of them So a way to work around Would be To make our proof of concept Make sure that it works Let's try to fake That our Server, our images Is actually hosted in geostatic.com So it's a star.geostatic.com So maybe like a sub domain Or geostatic.com So I've preset this up So I'm going to tell you what I've done So firstly I add App.geostatic.com Into ETC host So this tells And redirect to 127 Which is a local host Sorry, this is not too much CSS Related but bear with me I try to explain it as simple as possible So basically what this does Is that any request that goes to this domain Will go to localhost That's all And then I realize When I try to realize That I need to be on HTTPS as well So to do that I need to have a cert To sign my HTTPS So I install a bunch of things To make that work And then finally I Okay So What that means is that now We just fake Saying that our request Let's go to this site And let's change it to App.geostatic And hopefully all the request will go To our local server Let me try this out first Hold on, let me restart the server Because If you're interested in The server works I generated the key And then I start the HTTPS server So Let me copy this to my Default Express server And let me start over here So now If I visit So whatever request is being logged Out here So let's go back to OCBC And take a look Um Let's refresh Wow So slow So there's a request coming in Telling me that Key ends with 5 So Theoretically, if I'm diligent enough Because I want to hack OCBC I just Have to copy and paste All this to cover all the digits And hopefully That way I could Able to read out what is in the Random number And I hope that convince you That You should add CSP Because You should add CSP Content security policy So that you can limit The So that you can limit websites From loading Untrusted third-party scripts Or assets Right Let's take a look What else is being listed Here I think we are almost Towards the end One thing that It's interesting That It mentioned in the blog is that Here I have a simple React application That has an input Over here is a password So if I type password You shouldn't see the value Over here But if you take a look At The DOM If you inspect it My laptop is so slow Or Chrome is slow Please If you take a look at the DOM You would notice That The value that you typed in You notice that the value you typed in Is in the attribute And This is By the framework design But it Kind of Is a vulnerability to your website Where you can use a similar way To actually sniff Like a third-party Sniff out So this value Updates Synchronously As you type Okay, hopefully this layout is not too bad But just to prove it out If I type Z Z right now ZC right now This is React way of trying to synchronize Whatever you type And whatever is in the element But It leaks out the value Of your password input On this end I think they mention about What you could do But nothing much you can do for now Except It doesn't say How you should work around with this Probably don't use react When you're doing the input Fuel Password input fuel Lastly You can use CSS to actually Trax interaction Of a user on the website So if you're using Things like hover or active Basically you can Change the style When the user is hovering Or Clicking on the website So here I have Like Interaction Sniffing CSS Same thing Let's do it on the Singapore's CSS website Because it looks faster So let's open up My terminal Hide it smaller Let's see Okay, so Hope you can see both So if I hover on top The request because Upon hover It's loading an image And when I click on it It will send another request You can use just CSS To track interaction of Any websites But using this trick There's one thing you need to know Is that Once you load the image It's being cached by the browser So when you do it multiple times So the limitation Of this Hack to sniff out data Can only do it Unless It refreshes again It will load the image again So That concludes all the basic Once and Let's go back to the last one Which is the keylogger Which uses the same technique as this Reading text To do it Of sniffing data So how do you read Whatever text is on the screen Basically What you can do is that You can declare different font For the paragraph And for each font For example You can set The same font family Call blah When you declare a font face For different variants Of that font You can load From a different file For a specific unicode range So this is useful In a case where Maybe you want to have You just need to specify one font But For maybe say emoji You want to use a different font Different font files For certain emojis For certain maybe Unicode characters You use a different font But you use the same font family So when you style your CSS You just write one font family But you can have different One font family can describe A variants of Font files That you can load for different unicode range Right So So basically if you have a Queue in the web page And it matches this Then it will load It will load the file And it use the same Same thing as So you can sniff it from the server Right So let's go to google.com Because it has a very big input Over here And what I'm going to do here is that I want to set a Font family To put itself And then for different characters I will load the different font files And that way I can actually Sniff out what is being typed So it could be happening on Like password fields as well So you can use a combination of Different attributes Or loading a font And you can basically Sniff out the data So That's here This much simpler version Of the code So you have different unicode range And then you Use the same font family for it And it should load It should load a different Oh wait, it doesn't load a different file Let's key It goes 1, this is 2 Right So it loads a different URL And then you can differentiate it Enough of font face Then you should be able to figure out What is being typed out So I kind of forget What is the Character for unicode range 65 So how does this work is that This is hexadecimal So you can read it So for the first 125 It's part of ASCII So you can read it out from ASCII table So 65 Is E So if I type E Over here You can see the request Being sent out And if I type A You don't see it because I didn't add that font But if you type F Then you can see it again Because that is 66 So you can use font You can target an element For font Load a different font For different characters And then that way you kind of know What characters is on the screen Or is being typed into the input And that is Also Being mention And that is the technique That the key logger is using To To basically sniff out What is being typed into the input Sorry So that That concludes all Everything that's being written in the blog That I understand As I understand it Maybe you figure out More things than me Maybe you should share it out with us With me as well So sorry It's like unrehearsal Sorry, I'm streamlined Because It's very cluttered when I was reading this And I was trying different things as well So that is My way of Train of thoughts when I was reading this So if I want to have some summary On what we have gone through Is that firstly The party CSS is not safe It's not as safe as you think So To be safe You can use CSP To load only Files from a trusted source And And then to summarize What kind of vectors or what kind of techniques That you can take it out Is that the first group we covered How to basically modify The website like adding content Remove content Move the content around to To make your website looks as if Broken And the second half of it was talking To start out from the website By reading it through attributes Or loading different font files So that Can figure out what are the characters That is on the screen And that's all from me