The CSRF Example Application is a React-based project designed to educate users about Cross-Site Request Forgery (CSRF) attacks. This application provides an interactive way to understand CSRF concepts, how attacks work, their effects, and prevention techniques. Users can also test inputs to see how unsafe and sanitized outputs differ.
- Interactive Learning 📚: Understand the basics of CSRF through a sidebar that lists key information.
- Input Testing 🖥️: Users can input text to see examples of unsafe and safe output.
- Input Sanitization 🔒: Demonstrates the use of DOMPurify to protect against potential XSS vulnerabilities.
- React ⚛️: Frontend framework for building the user interface.
- DOMPurify 🧼: A library for sanitizing HTML to prevent XSS attacks.
- Tailwind CSS 🎨: Styling to enhance the user experience.
- Install Node.js ⚙️
- Clone the repo 🔄
- Clone the repository:
git clone https://github.com/ertugrulsertaslan/frontend-security-basics.git- Navigate to the project directory:
cd frontend-security-basics3.Install the dependencies:
npm install- Start the development server:
npm run dev- Open your browser and go to http://localhost:3000 to view the application.
- 📝 What is CSRF?: An attack that tricks a user into executing unwanted actions without their consent.
- ✅ How It Works: Attacks utilize the user's authentication to perform actions on their behalf.
- 📧 Effects: Can lead to data manipulation, unauthorized fund transfers, or changes to account settings.
- 🔒 Prevention: Use anti-CSRF tokens, SameSite cookies, and secure headers to mitigate risks.
- 📋 Best Practices: Always validate user actions and implement user confirmation for sensitive actions.