https://github.com/lirantal/react-suspended-vulnerable-application
React Suspended is an educational frontend application riddled with security vulnerabilities
https://github.com/lirantal/react-suspended-vulnerable-application
Last synced: 5 months ago
JSON representation
React Suspended is an educational frontend application riddled with security vulnerabilities
- Host: GitHub
- URL: https://github.com/lirantal/react-suspended-vulnerable-application
- Owner: lirantal
- License: mit
- Created: 2021-11-26T22:13:52.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-01-29T20:30:58.000Z (over 1 year ago)
- Last Synced: 2025-04-20T22:32:41.063Z (6 months ago)
- Language: CSS
- Size: 6.66 MB
- Stars: 10
- Watchers: 2
- Forks: 14
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React Suspended
A React application riddled with security vulnerabilities so you can learn how not to write insecure code.
## How to run me?
### Local installation
For a local installation, make sure you have the following dependencies installed:
1. Node.js v14 (other versions don't work)
2. npm
### Docker installation
Easiest method is to run the React app through a containerized image.
The `docker-compose.yml` file also mounts the `./src` directory to the container so you can easily edit source files on the host, and enjoy the fast development experience of hot reloading.
To run the containerized version, run the following command:
```sh
docker-compose up --build
```
Note: passing the `--build` will allow it to re-build the container image if anything changed that would require a new Docker image too.
### Reflecting changes to the development environment
If you've made significant changes that require re-building the container image, such as by adding a new dependency, you can run the following command:
```sh
docker-compose up --build
```
## How to use me?
### Attribute Cross-site Scripting (XSS)
1. Change the `src/database.json` to one of:
1. `javascript:alert(1)`
2. `JAVAscript:alert(1)`
3. `\x19JAVAscript:alert(1)`
2. Use the `PackageParser` component but supply it a string instead of a JSON object:
1. It uses `react-json-pretty` vulnerable package version
2. Set `src/database.json` to `
`
---
Modern frontend frameworks like React are well thought of in their application security design and that’s great. However, there is still plenty of room for developers to make mistakes and use insecure APIs, vulnerable components, or generally do the wrong thing that turns user input into a Cross-site Scripting vulnerability (XSS). Let me show you how React applications get hacked in the real world with React Suspended educational experience.
# License
- Copyright 2020 Creative Tim (https://www.creative-tim.com/?ref=blkdsr-readme)
- Copyright 2021 Liran Tal (liran.tal@gmail.com)
- Licensed under MIT (https://github.com/creativetimofficial/blk-design-system-react/blob/main/LICENSE.md)
## Derivative work
This codebase makes use of derivative work created by [Creative Tim](https://www.creative-tim.com), in particular their open source website design # [Blk• Design System React](https://demos.creative-tim.com/blk-design-system-react). I used their work because it provided me with a realistic and functional React application, completely designed too, which allowed me to speed up my work on the security aspects.
# Author
Liran Tal