React Security Labs

Introduction

In the field of web development, ensuring security is crucial.
This project, React Security Labs, under the School of Computer Science at OST Eastern Switzerland University of Applied Sciences and Compass Security, focuses on enhancing web security education.
The aim is to create practical, hands-on labs on the Hacking Lab platform that simulate common security vulnerabilities within a React application. Those vulnerabilities will be implemented into a Swiss-themed webshop.

Approach

The project began with research, particularly focusing on the most common web vulnerabilities in React and the selection of relevant vulnerabilities. Afterwards, the requirements were defined, and the React frontend of the webshop was developed. The Flask backend could be reused from a different webshop. The security vulnerabilities were integrated, based on the research on the most common React-specific vulnerabilities. Step-by-step solutions were developed to demonstrate how exploits could occur if prevention mechanisms are not used. Docker was used for containerization and delivered as a zip file to Compass Security AG, which maintains labs on the Hacking Lab platform. This setup allows for starting and stopping the vulnerable webshop within the labs.

Result

The project successfully developed a functional React-based cheese-themed webshop incorporating various React security labs. These labs cover a range of common vulnerabilities, including three different Cross-Site Scripting (XSS) scenarios and Cross-Site Request Forgery (CSRF). The CSRF lab demonstrates a CSRF attack scenario if no protection mechanisms are used. Since React does not have built-in CSRF protection (unlike e.g. Angular), a solution was provided on how CSRF protection can be implemented using React and Flask. Additionally, a vulnerable setup lab was included to demonstrate the risks associated with not regularly updating application dependencies. Also, a comparison was made between security mechanisms in React, Angular, and Vue.

The React Security Labs project achieved its goal of creating challenges that allow users to see and exploit the most common React-specific web vulnerabilities. Additionally, research showed that most websites use reasonably up-to-date versions of React, similar to Angular and Vue websites. While React offers protection against XSS, it does not provide built-in protection against CSRF. Therefore, it is vital to adhere to security best practices to achieve the most secure React application.