How Developers Can Use Automated App Security Testing To Protect Vue Apps

Hey everybody, my name is Nick Teets and I'm a front end engineer at Stackhawk and today I'm going to tell you how developers can use automated application security testing to protect their vue apps. A bit about me, I am a front end engineer so I must admit I do get emotional over fonts. I'm also the co-organizer of the jamstack Denver meetup where we talk about everything from headless CMS to static site generation. And when I'm not busy jamming or tearing up over Helvetica, I'm a musician here in Denver. Today I'm going to tell you what it means to shift left, I'm going to show you an example of a cross site scripting vulnerability in a vue app, and then I'm going to give you the tools that you need to find these types of vulnerabilities before you hit production. So what does it mean to shift left? Simply put, we're moving the tools of the software development lifecycle earlier in the process. There's a bunch of different types of security tools that you can use now when you're checking into your develop branch or your feature branch that will help you find security vulnerabilities. Things like secret scanning or the idea that we should be obfuscating api keys that we use to communicate with third party services. Software composition analysis, which is taking a look at the open source modules that you use to run your app and find vulnerabilities there. We have static application security testing, which looks at the actual code and text files of your repository to find vulnerabilities. And lastly, dynamic application security testing. This is what StackHawk's really good at, is we take a running instance of your app, whether it's in the pipeline or in local development, and finds vulnerabilities the same way that a bad actor may exploit your app. So let's jump into our example of our vue app with cross-site scripting. So here we have FontTalk. This is a place where users can log into a message board and talk about fonts. And of course, we're going to give them the ability to style the text that they post on this message board. So Jane is going to start the conversation and say, y'all like fonts? We're going to wrap this in a bold tag to really emphasize that we're here to talk about fonts, of course. And we're going to post it. And you can see that we got the bold text in there. The message is available for everyone to see. But then Jane's going to follow it up with another post. We're going to emphasize the beautiful here. But we're also going to include this image tag. We're going to hide this from the user. And when this image tag loads, we're going to post sensitive account information to a bucket that we've set up on a third-party service.

So let's go ahead and save this note. And you may not notice something as a user that's not too savvy on the web. But if you inspect this bit, you can see that here's our image tag, which is hidden, that is hitting our third-party service with sensitive account information. So let's go ahead and log out as Jane. And we're going to log in as Bob. And Bob gets here, and he sees there's some good conversation about fonts. And he says, yeah, fonts are cool. And then Bob's going to leave the chat because maybe they're not a message board person. But what he doesn't know is that that cross-site scripting has now hit his account. If we go to this pipe dream, this bucket, this endpoint that we set up, we can see that that image tag sent Bob's confidential information over here so our bad actor Jane can see it. So now she can log in and post as Bob or maybe steal his credit card information if that sort of system was implemented on our app, which obviously, that's no good. So what can we do in the code to stop this from happening? One thing that we could do is go to our notes list. And instead of using vHTML, which uses that inner html method on our element, we can go ahead and just render the information in this note, the actual value. And so if we check that out, we can see that we've exposed these html tags that people were putting into our message board. So here's that bad image tag that's sending that information. But this is kind of removing some of the features from our cool message board about fonts. So that's not the way to go. Let's use this sanitize html library that you could scan with SCA, of course, to remove some of that bad html while allowing our users to still style their posts. So if we inspect this element, we can see that that malicious image tag has been removed from our post. And so things seem to be working. Now there's one last thing that we could do kind of as a frontline against cross-site scripting attacks, and that's adding the CSP header. So if we go to our terminal, we're going to run a StackHawk scan. Now this would obviously be implemented in your CICD pipeline every time you check code in. So while we're running that scan, we'll go over to the StackHawk platform to see what a finished scan looks like. Here's our app that we've already registered.

And if we click into this, we can see that there's a couple CSP header findings or vulnerabilities that we've discovered. And so when we click into this, we are given the ability to triage or mark as false positive or risk accepted for these different types of vulnerabilities. And we also provide a little bit of educational text about what the content security policy means. And so using a tool like StackHawk, you can see what some of these vulnerabilities are before you hit production because you're running this in a pipeline. And I'd love to tell you more about security and VLAPS and StackHawk, but we're running out of time. So we're just going to play the thank you slide. Learn more about StackHawk at stackhawk.com. The blog post that I got inspiration for this vue example is available at this link below. And if you want to bug me on Twitter, I am nicktex on Twitter. You know, drop by, tell me you love the presentation. Let's talk about music or security or javascript. Thank you to vue for having me. Thank you for watching. And this has been awesome. We'll see you later. Bye bye.