OWASP Juice Shop: Hacking A Modern Web Application

In this article, we’re going to hack a realistic web application called Juice Shop. It’s a very neat project, created by Björn Kimminich, project leader at OWASP and IT security lecturer at Nordakademie, and also developed/maintained by many other developers.

OWASP Juice Shop is probably the most modern and sophisticated insecure web application!

This is by far one of our favorite projects available on GitHub. It features all of the OWASP Top Ten vulnerabilities along with many other security flaws. It offers both web developers and penetration testers an excellent environment to test their security skills.

If you’ve never learned how to secure your web applications, it’s probably a very good idea to learn as soon as possible. TryHackMe is a great place to start, providing real-world scenarios and top-notch tutorials. The Web Application Hacker’s Handbook is also a must, as it is probably the most extensive book available on web security. If you’re still thirsty for knowledge, another excellent book is The Tangled Web: A Guide to Securing Modern Web Applications,

This article is going to demonstrate just one of the vulnerabilities within Juice Shop, as we don’t want to ruin the fun – there’s nothing more satisfying than discovering them yourself!

Disclaimer: Everything contained within this article is for informational and educational purposes only. The word “Hacking” is to be regarded as Ethical Hacking. Performing hack attempts (without permission) on computers that you do not own is illegal. This site holds no responsibility for what you do with the information contained here, or anywhere else on the site.

Installing Juice Shop

Before we begin, make sure your system has Node.js installed. To do so, open up a terminal and type node --version. If Node is installed, you should see the version number. Else, head on over to the website and install it on your system.

Okay, Node is installed. Visit the GitHub repository and clone the project.

To save you some time, you can just copy and paste the following into your terminal:

git clone https://github.com/juice-shop/juice-shop.git

Once this process is finished, cd into the directory and enter npm install.

Great. The packages are installed successfully. Enter npm start and open http://localhost:3000 in your browser.

It’s time to start hacking!

Note: If you don’t want to clone the repo, there’s a version available online.

Cross-Site Scripting (XSS)

We’re going to focus on perhaps the easiest type of attack, the XSS attack.

From OWASP: Cross-Site Scripting (XSS) attacks are a type of injection, in which malicious scripts are injected into otherwise benign and trusted websites. XSS attacks occur when an attacker uses a web application to send malicious code, generally in the form of a browser side script, to a different end user. Flaws that allow these attacks to succeed are quite widespread and occur anywhere a web application uses input from a user within the output it generates without validating or encoding it.

As stated above, this is the only attack we’ll perform in this article (there are many more for you to discover). Specifically, we’ll be performing a reflected XSS attack. However, before we show this attack, research it, and see if you can find the vulnerability yourself. It’s really quite easy. You might find this XSS Cheat Sheet useful.

Anyway, let’s get hacking!

The target for this attack is the search bar. Let’s test it. Enter juice into the search bar and click enter. If we look at the URL, we’ll see localhost:3000/#/search?q=juice. The interesting part here is the key-value pair q=juice. The result of our query is also displayed on the page.

Interesting. It would be pretty cool if the inputs weren’t sanitized (the process of removing specific characters from user input), and we were able to inject some code onto the page, right?

Let’s try something.

In the search bar, let’s enter the following:

<a href="https://google.com">juice</a>

Click enter.

Notice that there’s now a link element on the page? If we click that link, we’ll be sent to google.com. You might be wondering why or how this is dangerous. The answer is in the URL.

localhost:3000/#/search?q=%3Ca%20href%3D%22https:%2F%2Fgoogle.com%22%3Ejuice%3C%2Fa%3E.

If this was a real website, say, a banking website – the possibilities for damage are evident. A bad actor can put any code they want into the URL, and then send it out to someone.

To put it in a better perspective, we can imagine some bad actor has executed an XSS attack on a banking site. They’ve added code to send the credentials from a login page to themselves. However, it won’t work unless they can trick an unknowing victim into clicking the link. They might set up a fake email account, and just mass deliver an email explaining to users that their account has been compromised, log in to fix it!

An unknowing victim won’t notice the URL:

bankingsite.com/login?username=<bad_code_here>

But when they click it, bad things will happen. As web developers, we must always sanitize user input, both on the frontend and the backend.

Conclusion

In this article, we explored an incredible project and looked at one of many ways to attack it. We’ve also explored XSS attacks and discussed how they work. A lesson we can learn from this is to always sanitize user input. To learn more about input sanitization, there’s a great article here.

There are many more vulnerabilities to discover throughout the application. Check out the resources listed and have a great time hacking this application!

Recommended Resources

• The Web Application Hacker’s Handbook
• The Tangled Web: A Guide to Securing Modern Web Applications
• Intro to Cybersecurity 25% off

Full Disclosure: this post contains affiliate links. However, we only recommend books or products (courses) that we have personally read or used. We may receive a (very) small commission if you purchase any of the books or courses from this list (at no additional cost to you).