🔐 Secure Form App (CORS + CSRF Protection)

📌 Overview

This project demonstrates a secure full-stack web application using:

• Node.js + Express (Backend)
• HTML + JavaScript (Frontend)
• CSRF Protection using Tokens
• CORS handling for secure communication

It shows how to prevent Cross-Site Request Forgery (CSRF) attacks in real-world applications.

---

🚀 Features

• ✅ Secure form submission
• ✅ CSRF token generation & validation
• ✅ Cookie-based session handling
• ✅ Express backend API
• ✅ Static frontend serving
• ✅ Clean and simple UI

---

🛠️ Tech Stack

• Frontend: HTML, JavaScript
• Backend: Node.js, Express
• Security: CSRF (csurf), CORS
• Session Management: express-session

---

📁 Project Structure

secure-app/
│
├── backend/
│   ├── server.js
│   ├── package.json
│   └── node_modules/
│
└── frontend/
    ├── index.html
    └── script.js

---

---

1. Install backend dependencies

cd backend
npm install

---

2. Run the server

node server.js

---

3. Open in browser

http://localhost:5000

---

🔐 How CSRF Protection Works

1. Server generates a CSRF token
2. Token is sent to frontend (/csrf-token)
3. Frontend includes token in request headers
4. Server validates token before processing request

---

🧪 Testing Security

✅ Valid Request

• Form submission works successfully

❌ Invalid Request

• Remove CSRF token from script.js
• You will get:

ForbiddenError: invalid csrf token

---

🌐 CORS Explanation

• CORS controls which origins can access the backend
• Used when frontend and backend run on different ports

---

🧠 Learning Outcomes

• Understanding of CORS vs CSRF
• Real implementation of web security
• Handling cookies and sessions
• Secure API design

---

🚀 Future Improvements

• 🔐 Add JWT Authentication
• 🗄️ Integrate MongoDB database
• 🎨 Improve UI with Tailwind/React
• 🌍 Deploy using Render/Vercel

---