Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brionmario/react-security
Explore best practices and code examples for building secure React applications. Learn to prevent common vulnerabilities and contribute to a more secure React community.
https://github.com/brionmario/react-security
Last synced: about 5 hours ago
JSON representation
Explore best practices and code examples for building secure React applications. Learn to prevent common vulnerabilities and contribute to a more secure React community.
- Host: GitHub
- URL: https://github.com/brionmario/react-security
- Owner: brionmario
- License: mit
- Created: 2024-03-11T14:46:10.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-07-14T05:15:08.000Z (4 months ago)
- Last Synced: 2024-07-14T06:25:13.920Z (4 months ago)
- Language: TypeScript
- Size: 507 KB
- Stars: 0
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
This is a simple playground to test out XSS vulnerabilities in a React application. This utilizes the Asgardeo React SDK to demonstrate how to protect your application with the possible exploits.
## Prerequisite Software
To tryout the sample on a local environment, make sure you have the following set of tools on your local machine:
* [Git](https://git-scm.com/downloads) - Open source distributed version control system. For install instructions, refer [this](https://www.atlassian.com/git/tutorials/install-git).
* [Node.js](https://nodejs.org/en/download/) - JavaScript runtime with npm. For install instructions, refer [this](https://nodejs.org/en/download/package-manager/) (`v18 or higher`).
* `Optional` -> [pnpm](https://pnpm.io/) - Alternate npm client for faster package installs. (`v9 or higher`)
## Setup
### Setting up the Source Code
1. [Fork](https://docs.github.com/en/github/getting-started-with-github/fork-a-repo) the repository.
2. Clone your fork to the local machine.
Replace `` with your own username.
```shell
git clone https://github.com//react-security.git
```
3. Optional: Set the original repo as the upstream remote.
```shell
git remote add upstream https://github.com/brionmario/react-security.git
```
### Setting up Asgardeo
Go to the [Asgardeo Console](https://console.asgardeo.io) and sign in.
### Create a SPA Client Application on Asgardeo
1. Click on the **Applications** tab on the left sidebar.
2. Click on the **New Application** button.
3. Select **Single Page Application* as the application type.
4. Give a name to the application and add authorized redirect URLs (In the default case: https://localhost:5173) and click **Create**.
5. Save the `Client ID` generated for the application.
### Create a Node.js Server Application on Asgardeo
1. Click on the **Applications** tab on the left sidebar.
2. Click on the **New Application** button.
3. Select **Traditional Web Application** as the application type.
4. Give a name to the application and select **OpenID Connect** as the protocol.
5. Add authorized redirect URLs (In the default case: http://localhost:3002) and click **Create**.
6. Save the `Client ID` and `Client Secret` generated for the application.
### Setting up the Development Environment
#### Install dependencies.
```bash
npm install
```
If you are using `pnpm`, run the following command.
```bash
pnpm install
```
#### Create `.env.local` files based on the `.env.example` files.
We will use the `.env.local` file to store the environment variables required for the applications.
##### Client
```env
cd apps/client
cp .env.example .env.local
```
Following set of environment variables are required for the application to work.
```env
# The client ID of your Asgardeo application
VITE_ASGARDEO_CLIENT_ID=
# The base URL of your Asgardeo organization's services.
# Ex: https://api.asgardeo.io/t/acme
VITE_ASGARDEO_SERVICES_URL=
# The callback URL to redirect to after successful authentication with Asgardeo
# Ex: https://localhost:5173
VITE_ASGARDEO_SIGN_IN_REDIRECT_URL=
# The callback URL to redirect to after successful logout from Asgardeo
# Ex: https://localhost:5173
VITE_ASGARDEO_SIGN_OUT_REDIRECT_URL=
```
##### Hack Server
```
# The port number that the server will listen to.
# Change this to the desired port number that the server should listen to.
PORT=3002
# The base URLs of clients that are allowed to access the API.
# Separate by commas if there's more than one.
# E.g., http://localhost:3000,http://localhost:3001
CLIENT_BASE_URLS=
```
## Running the Applications
To start the applications, run the following command from the root of the project.
```bash
npm run dev
```
If you are using `pnpm`, run the following command.
```bash
pnpm dev
```
> [!NOTE]
> Additionally, you can also go inside the respective application, and start.
## License
This project is licensed under the Apache License 2.0. See the [LICENSE](LICENSE) file for details.