Attacking the Front-End: Modern-Day Client-Side Security

[Music] so welcome everyone to my talk tacking the front end where we'll explore modern day client-side security a little bit about myself so you're not talking with stranger the whole time um hi my name is Kaif I come from the beautiful city of Melbourne I'm a technology and security Enthusiast who comes from a software engineering background my education and early career has been mostly software engineering then I switched over to cyber security because that's what I loved throughout I've been working as a product security engineer at atlassian for the last two years apart from Tekken cyber security I've been just a big proponent of education so you'll see me running workshops ctfs for University students at local meetups

and Etc I also host a YouTube channel called Everything cyber with another mate but more more on that later cool so let's have a look at what the talk is about it's going to be about and what do we mean by modern day client-side security so when we say client-side we usually refer to the browser the website the web app and everything that is the Ford facing um interface that the user usually interacts with so that's the usually the gateway to your server and all the internal domain so throughout this talk we're gonna see some most dangerous and high impact security vulnerabilities that happen from a client-side perspective and then for those vulnerabilities we'll see what are the

best practices uh especially from a secure coding perspective and throughout those for each one of the class we'll obviously be sharing different resources and we'll have time for the question at the end dive into the as vulnerability classes specifically let's set the scene Let's uh let's try to understand what's the landscape is like so uh over the last few years especially because of covet we are starting to see this rapid digital transformation so these days everything and anything seems to have a website a web application or some sort of online presence and it's not always just by a choice It's Always by necessity because um if you're honest with ourselves whenever we use something we also expect

online or website version of that available as well so we the amount of web traffic and applications has increased drastically and how we create those web applications have changed drastically as well so I'll ask a question to the audience a show of fans of how many of us has created a website just using HTML CSS and JavaScript so created a website just using those three a few hands up so that whole concept of using HTML CSS and JavaScript to create a website Fields Arcane right these days we have react angular next.js nest.js and so many cool things um being uh flying around and so many different ways to do things and in the middle we even made the mistake of PHP

and quickly uh fix that as well I'm glad we're moving away from that but yeah the way we make applications has changed and in that landscape we see new kind of vulnerabilities that wasn't the case um is popping up left right center as well as some pretty old classes that are still biting us and with that let's dive right into it so the first one is probably not a surprise one which is the code injection attacks and in in this case the SD applications have become more and more complex the interaction between the user and the web applications has increased drastically it's not just a static website anymore there's a two-way flows going all the way so the attack

surface where the attacker can do some damage has increased as well so think of the scenario where instead of a text someone puts in maybe JavaScript code or SQL is your application handled well enough to um is is your application resilient enough to handle that properly it's not a new sort of issue that issue has been biting us for a while and modern web application web Frameworks like react and angular have some built-in protections against that but we'll quickly see how to bypass those protections as well which brings us to cross-site scripting and that's the code injection attack class I'm going to focus more on there's other classes like sqli but xss in react and angular is pretty pretty common and

we're gonna see how but again just this this question is more to set the pace of mind uh talk because if you do not know what is xss react and exercise in react in angular doesn't make sense so show off us how many of us already know what is xss how it happens and what's the protection against it majority of the room that's good I still see some hands not raised so I'm just gonna do a baseline run through very quick uh so the people who already know please bear with me I'm not gonna spend too much time on it um so xss or crosstalk stripping is basically um when your code is your application is

vulnerable and the attacker can inject or submit their own malicious code and because of vulnerability in your web application the browser runs it so long story short the browser is not that you should get uh it's how just you have created our browser whatever application gives it it's gonna run it and it's up to our application to sort of verify or what is and exercise can in the old days we used to see a lot of um old style uh website effacements during the um Anonymous they used to do a lot of that but in modern times and a very small example would be uh if you if you have searched by and you put

it's something that potatoes it is takes the website functions but what if you put in the code um just your website there's a lot to learn that as well so that was a very basic thing and just another Mutual example let's say I have an attacker who's uh Target is to get the uh session cookies and our crafts malicious URL like this and send it to the user and the user takes it and because it's insecure website it is insecure it will run this code instead of um just just running text and uh use the attacker will just get the session cookies um again pretty basic stuff if you wanted to learn more please do but the

reason I'm copying exercise is um it usually has very drastic real world impact so some of the biggest bounties we have seen do come from X successful um not just in your class in all over the industry as well and some of the existence vulnerabilities are quite scary as well yeah cool so that was the borderline let's try to understand how excess happens in react that's what we are here for but to understand that I want to ask the audience another question which one of these do you think is the best protection against exercise now all of these can be used in coordination yes but one of them is the best one is it use some sort of encoding is it uh input

sanitization is it context sensitive output enrolling or using CSP on its speed post and I guess it's four four two

because when you are putting the data back to the application you do know that as a context the application context where the data will be going whereas the issue with uh number two inputs and organization if your application is purely simple yes you do know whether data will go up in terms of the application context but if the application is relatively complex you really do not have any controls that's we that's why we see so many input sanitization bypasses as exercises as well CSP yes it's a great protection but it's an additional layer of Defense CSP is not a replacement of actual defensive coding and the number one is just trash it doesn't do it

um oh so now let's understand how what react is so react comes with um reacts interpolation mechanism what that basically is is everything you put in react whether it's uh text it's numbers it's code in usual cases react will do um input standardization which means it will output everything as just raw string so let's say if I hover the ACT um a form like this and you submit some code even if it has coded it's gonna just output everything as a thing like it has in the bottom no nothing nothing changes

unfortunately that's not the case uh there are multiple ways you can bypass that includes an organization and lots of ways you can do damages react um the c major bases uh not using dangerously set you know additional properly uh something called react Escape hatches and finally proper encoding of different HD models and we're going to dive into them a bit more now before doing that you might ask her hey if react outputs everything a string why why can't just believe it that why do we need Dynamic content generation from the user um a lot of the things we do in our modern website are is dynamic content generation from the user side even though we might not think think like it

is like it's not always you put content in the mold tab of HTML and it will automatically pop up so this is a one of our products uh Confluence so we have an atlassian it's pretty much a text editor similar as Google Docs or whatever um what it basically does it allows that user to do all kinds of text formatting as well as adding comments uh I frames and lots of other things and that's a very good example of you do need Dynamic content generation from the user it's probably a bit more um extreme case where you you're doing that but in all of our modern web applications you're doing it in different capacity nonetheless

so yeah with that established let's look at the reactor access attack characters and how it can happen so if you wanted to do Dynamic content generation in react the way you do is use something called dangerously set in our HTML that's uh dangerous yes but that is the default way of doing so and if you if I if I rewrote that form with the industry set in HTML and if I it basically accepts everything and outputs everything as well so if I just rewrite the form with this dangerously set in a HTML function it will and I put some an input like this where there is a HTML elements it is going to Output that

patient element because that sort of removes that um which is completely fine that's that's what it's meant to do and that's why we rely on carpathy libraries like don't purify to actually sanitize that HTML and properly make them in Secure HTML into a safe one but the problem why dangerous is that inner has signal is a pretty big issue is actually the guidance that is provided so if you quickly Google how to do a dynamic occasional content generation this is not something happening this is actually reacts um own documentation from its website so it will take you to Dangerously sending a HTML and it will tell you that hey yes you use the interested in your HTML to

do Dynamic content generation yes it is scary uh it is risky it's it can cause something as xss and that's been on shape it is relying on the developer to First find the interested setting on his channel understand what are the risks understand what is exercise what what impact it can has and all that stuff and then go find a proper implementation of it and I've seen so many uh threads in slack overflow Sac overflow where someone says how do I do it and someone has patient

so if you Google dangerously said you know HTML in just this is just a quick search in GitHub you find over a million hits or usages of dangerously setting information now whether all of them are actually a potential risky sync probably not but can we also guarantee that all the developers all the especially the uh the small to medium companies who have a lot of resource and constraints they they went out and did the proper documentation research and have implemented this properly that answer is probably no and that's why we see a lot of exercise happening um using that so how do we defend against that um the good news is most modern static code uh

analyzing tools will keep dangerously set in a HTML up and if you use something like that in your code in a Tesco Arena component it will pretty much flag you this kind of um warning so in this case I'm just using Sandra as a as a just example but it will give you something like this however this is just one morning and one file in a modern pretty much industry application you you have hundreds of thousands of files so that one warning can easily become five warnings ten warnings 100 warnings other than thousands how do you really understand which warning is the correct one and you have already dealt with and which one is something new uh recipient that

developer has introduced that's why um most people advocate for using creating a separate component and for those who do not know are familiar with react components think of it like a label block once you have created it you can use it in multiple places in your web application so the ideal way is you create a HTML component like this which handles the risky data coming in and you use that component everywhere across your code so let's say this is I've named myself this is HTML and that handles the dangerously sending a HTML with purify and I use that same component everywhere customer code so that way when I run a static code analyzer it would only give me a

hit in the safe html.js file that's it and in my other class it's not going to complain because I'm just using directly that component and if I'm a social security engineer or a developer and I have that and then I can see another alert pop-up in login.js on some other pages then I'll know that hey maybe someone has created something custom and that's my actually doing checking and that's why you can reading indicate the number of alerts that can happen who more real exercise wasn't the only way so again a good question for the audience model you know what do you think is a real estate is it number one two three or four I wish I could play the kahoot music

[Music] any guesses number four and that's correct um it's an escape hatch is a way to directly access the negative Dom so for people who know the app how react works is it creates a version of a virtual Dom uh people down as your website or your web page so it creates a virtual layer over it and you build everything directly you never you never directly work with the underlying actual um browser in this case the website I don't want to call the website and done the same thing but think of it like this for people who do not know um are not familiar with the app but but yeah also allows you to do is

instead of working with the virtual Dom you can circumvent that and go directly into the actual web page and another will manipulate the HTML that actually from there that's what we see something um functions like find Domino and create rest you you might think it's safe but it directly inputs whatever you get into that Dom and if and again it does not come with any kind of sanitization or checks by default and unlike dangerously set in HTML this is kind of Escape hatches are much much harder to deal with because it's not just one one place where you can track in a library in front of it and just be done with it so this dog issue is actually so bad it's

considered an anti-pattern and react knows it and it's looking forward to depreciating that in future versions of the app so that method Time download will be depreciated but we do know that uh in in the actual industry not everyone runs the Leading Edge oftentimes we are working with older versions of the app and in those places Escape happiness can still exist one alternative approach was suggested to me by a friend that maybe if you if you want to use an escape hatch or whatever reason it is instead of an inner HTML you can use something called inner text that automatically converts everything into our text again that's something I haven't tested myself just throwing it

out there for people who want to and if you're a pen tester or a security engineer or someone who's in charge of those finding those issues uh looking for things like under known creative rest International difference from a react application is a good way to it's a good starting point wanted to check and test test all right let's look at some other ways you can act here again a question to the audience which one of these HTML elements do you think can be used to run code run JavaScript code is it URLs CSS markdown or all of them awesome true you can you can use all of these things that potential that usually see very safe can be used to run JavaScript

code as well so if you're not if you're a web developer and you're not uh handling these evidence securely that can cause issues and I'm gonna in particular focus on URLs because um that's what that happens the most so JavaScript and on all the other kind of resource URLs can actually be a potential sync for exercise now when the URL is hard coded it is not an issue that's fine but as soon as we open it enough to the user to input a different kinds of URLs we are making ourselves vulnerable let me give you a very good example A lot of the times we've seen developers they handle HTTP URLs pretty well so it's your

regular URLs it should be your https.w.something.com that's smart but did you guys know that JavaScript URLs exist and you can actually this is considered also an URL and this is pretty much raw JavaScript code you can Chuck that in in the URL field and that will just run that code so if you are a developer who are not aware of these kind of things and you're not doing for personalization this can cause a lot of issues again the react security team is quite competent they know about these issues and they are looking forward to blocking this for example even in current versions of the app if you use JavaScript URLs it's going to give you

this big red warning that hey it is dangerous you shouldn't do it but it's just a wine and that came from my software engineering days if I see a big grip warning but my code runs I just need to ignore that picture and just be around with my life and so a lot of people might miss that and it's still a case in older versions another thing to call up is this is just for valve script tutorials there's something else called Data URLs so data of react is not doing much with it so that can be another potential thing that's what CSV comes in this Focus slightly a bit Fast Pace it was initially designed one hour then I

suddenly realized it's 30 minutes so a few things started to switch um but yeah looking into how you can detect data URLs using CSP if that's the issue so how do we defend against um URLs and properly and handling them safely one way I've seen a lot of people do is avoid taking the full URL and instead take part of it so imagine you making a website and that will embed YouTube videos into it and the users can chuck in that YouTube video instead of maybe putting in the whole YouTube link and having to deal with URL standardization and all this stuff maybe you can take in just the video ID and have that your YouTube URL hardcoded and

you put that together and then upload it that reduces significantly but I know that that's not uh that's a neutropian solution and it can't happen all the time so that's why we all sanitization comes in now um the reason I haven't back very deep into it is because we ask you a lot of sanitization it's not the best because it tries to do blacklisting of stuff blacklisting of known bad URL types rather than white listing of just good URL that we care about and the Security Professionals in this room would know that um in security we generally prefer whitelisting of good stuff over blacklisting of bad stuff because more bad stuff can come and you can buy us

for that angulars you are sanitization library is actually quite good I've seen a lot of people what they do is they look at an angular's library and include that into uh react um all by themselves that is the potential of good alternative to do as well cool so um how do we prevent the exercises in react from a very high level view so sexually handling bandwidth content is a big one and creating some kind of custom component and using that everywhere is the way to go and it is along with that concept of secure by default um that is a good example of that where the in our case our security team have created a few components that we just

encourage our developers to use in all places and it's not just a HTML content um dealing with that it's also authorization authentication a lot of other things that you can make secure by default um if you are doing uh Dom manipulation manually please don't use something like inducible instead where you can handle that a bit better and lastly B minus a lot of other type of hm elements because that can be potentially dangerous as well and if you want to work uh play around with a few different vulnerable react applications I'll just put in the names of uh there's something called react vulner and react suspended they are deliberately vulnerable react applications to sort of test and

understand your code um I haven't put the link because if you just Google vulnerable the app apps they probably pop up cool another thing is I have not covered something called trusted type so it's a new defense mechanism that's coming on it's about the bleeding as Edge research for um react and xss that's being led by the Google security team and that's something to call out as well okay that was all enactments with the app what about angular housing look with xss so the good news is actually from my experience angular by default um is quite better compared to the adminism to just security now that the developer experience out of sight I'm not going to comment most people prefer

the active one angular and sometimes for good reasons as well but if you're looking at just from raw security perspective angular does very good so let's look at what are the default security mechanisms to Handler has the first one is very similar to the app which does automatic input sanitization so if you have there's something called angular script contractual escaping which is just a fancy way of saying in concerning position obviously you put in in this case in this this text block is created with angular and I put in uh let's say malicious code it will output everything as string facing with what reactors but wait there's more so what angular does is not only include sanitization it also

does outputs cortex sensate output input in by default so remember the thing we talked about is the best way to protect against SSS angular does that out of the box there's something exists in angular called groups um angular called inner HTML so this is this separate from the browser's inner HTML so that's why I've put it in the square brackets so if you use the inner HTML it does contact sensitive after encoding by default and all that do I mean by that I will explain that out for quite a bit so let's say if if I had an Android app and someone submits this malicious piece of code not just as malicious but more like if someone tries

to run JavaScript so what angular will automatically do it will keep the safe HTML in this case the image and it will automatically remove the JavaScript bit which can be forbid this year so it's taking care of the good good parts and it's getting rid of the back paths just who make it a bit more clearer I've got those two angles mechanisms side by side so let's say I have a common box and I I put in something like this where I have HTML tags scripts lots of different things so input standardization angular will not do anything angular will just output everything as well screen but if if um angular is context sensitive output encoding it's going to keep the both

tabs and it's going to get the move of the script and in the browser console it will also give us a warning that hey I've done some sanitization because of XYZ which is great does that mean it's all rainbows and some sign in angular World unfortunately not um certain things do happen in angular as well so I'm going to reach through this talk slightly more than usual so angular exercise is definitely possible and one way to do is this thing called bypass security trust HTML it's very similar to Dangerously dedic HTML function you can bypass pretty much everything uh the next bit will be uh similar to the app you can also do Native dominations which you've already talked

about it why it's bad and the thing that I'm going to make a special call up is the render to AVR that's a built-in API the angular provides the structure an official job it uses the same native Dom manipulation and you can do the same things with angular I'm apologies I'm just being mindful over time and quickly right there's something called template injection attacks in angular that's a bit more on the server side but because it is so drastic I decided to make a call out just in case how do we protect against exercise and envelope um the default mechanisms provide is quite safe so as long as you're sticking to the default it's quite good and if

you're doing any kind of custom domain regulation you need to be very careful and lastly template injection attacks against something to be mindful of

mysteriously managed to change the uh the backup email That's a classic example of cross-cyclops Audrey attack cross side request for JF tasks is a very interesting one which has severe string implications it all stops the developers from making Dance videos for a whole day um so how does CSF mainly happen so let's clear conditions for CSI to happen one with the relevant action change and in that case in most stateful websites have that which is let's say a history question some sort of website some sort of API the main issue with CSF is what is what happens is the cookie based session handling so if you are relying on just one of your authentication official tokens or cookies to do certain

handling that's a big big number and there's not very unpredictable because cool so again the root cause is when you use the authentication application tokens or just um just a regular session focusing for this just for authorization authentication tokens to do session management because there's there's no way for your server to know where does the request originate from and that's a big issue where csrs can happen and if if your website is just relying on that I can create a crafter payload like this which is hidden form or URL and I send it to let's say uh to the user and if the user is logged in because they have their session tokens saved inside the browser you'll click on

the link this will work and because your website does not have any protections against where the request is actually flowing in from it can cause um exercise how do we protect against that um csrf tokens I'm not going to go into the sliding in depth I'm going to share the slides afterwards you can look into it but basically the long story short is use some kind of CSR tokens to protect against uh this kind of attacks a lot of the web Frameworks by default come with these libraries but the thing is it's not automatically uh turned on the developer needs to go and include this as a middleware or some something else and that's the step of the people who

say so uh just typically how within a classroom we've been combating csrf so we have blocked all kinds of State changes using the get request because then your CSF tokens can't even do anything um and yes if you didn't know you can make State changes using GIF HTTP command block just a post using something called Samsung cookies tokens again for some people you have to investigate and lastly apart from CSF topics we also do uh have an API Gateway that

with a few more headers so we looked a lot about I'm just going to use the last two minutes of my uh time to actually go through this if you have any questions please find me afterwards or I'm just going to share how to reach out to me afterwards we we discussed about our own code but what is other people's code and this image I really love it because that's actually true whenever I'm creating a new project I do npm stuff I do for the libraries and um as a soft engineer taking quote from staple and other places very very common effect but do we actually know if other people's code is actually secure and

this issue there is a Time example where we use they are not in ancient actual income package but it was basically it had it was very widely used very popular and but the the it's open source the uh the maintainer didn't doesn't get anything out of it so after years of maintaining it when someone just offered that hey um I'm happy to maintain it for you and hear some money the the maintainer just gave it away go use it that's fine and that that buyer was malicious and what they did next is just released a new update and all the developers are like new update of an unmaintained uh library for five years I'm gonna go a big Flash

and basically that update was malicious and a lot of things is a big thing and supply chain has been a team theme of this year like sales won three times these days and a universal security um so these are the top 10 npm libraries at this at the time and uh if you look at the vulnerabilities that exist there um can have something um how to protect against these um use some framework like salsa is a good one using tools like all of kubernetes you check sneak SCA and again Google my hot tape is unless you really need to scale one version behind the reading edge because you really want to know about this that made this push is a

malicious actor or is it an actual update uh if you're if you're one of the persons who write those npm packages this article is for you again I'm not going to go in depth but if you search this you will find some very good information um some cool hacker resources I've all of them quite a bit I switch sorts of engineering to hacking cyber security and my job is becoming stuff from stack overflow cool a few last things thank you so much to the organizers it has been an amazing conference and one last nameless plug is if you like this talk I run a similar a similar many talks in my YouTube channel I call everything cyber and we find a

link there as well as the link to this message thank you so much

thank you