Natuurlijk! Hier zijn concrete maatregelen en best practices om je React- en Node.js/Express-applicatie te beveiligen tegen XSS, CSRF en SQL-injectie: **1. Bescherming tegen XSS (Cross-Site Scripting):** - **Input Validatie en Sanitisatie:** - Valideer alle gebruikersinvoer op server- en clientniveau. - Gebruik libraries zoals [dompurify](https://github.com/cure53/DOMPurify) op de frontend om ingevoerde HTML/tekst te sanitiseren. - Op de backend kun je bijvoorbeeld [validator.js](https://github.com/validatorjs/validator.js) gebruiken. - **Output Encoding:** - Encodeer alle dynamisch gegenereerde inhoud voordat je deze op de pagina toont. - Gebruik React's automatische escaping voor JSX-uitdrukkingen. - **Content Security Policy (CSP):** - Implementeer een sterke CSP in je HTTP-headers om scripts en andere resources te beperken. - Bijvoorbeeld via Helmet in Express: ```js const helmet = require('helmet'); app.use(helmet.contentSecurityPolicy({ directives: { defaultSrc: ["'self'"], scriptSrc: ["'self'"], styleSrc: ["'self'"], // andere directives } })); ``` **2. Bescherming tegen CSRF (Cross-Site Request Forgery):** - **CSRF Token:** - Gebruik CSRF-beschermingsmiddleware zoals [csurf](https://github.com/expressjs/csurf) in je Express backend. - Voeg het CSRF-token toe aan je frontend (bijvoorbeeld via cookies of in de HTML) en stuur dit mee met elke state-changing request. - **SameSite Cookies:** - Stel cookies in met de `SameSite`-attribuut op `Strict` of `Lax`. ```js res.cookie('session', sessionId, { sameSite: 'lax', secure: true }); ``` - **Gebruik van Auth Headers:** - Overweeg om tokens (zoals JWT) in Authorization headers te gebruiken in plaats van cookies, omdat dit CSRF moeilijker maakt. **3. Bescherming tegen SQL-injectie:** - **Gebruik Prepared Statements / Parameterized Queries:** - Vermijd dynamische SQL-query's. Gebruik ORM's zoals Sequelize of query builders zoals Knex, die parameterbinding ondersteunen. - Bijvoorbeeld met Sequelize: ```js User.findOne({ where: { username: 'gebruiker' } }); ``` - **Validatie van Invoer:** - Valideer alle invoer op het juiste type, formaat en bereik. - **Beperk Toegang en Rechten:** - Maak gebruik van de 'principle of least privilege' voor databasegebruikers. **Algemene Best Practices:** - **Gebruik HTTPS:** - Zorg dat alle communicatie versleuteld is. - **Update en Patch:** - Houd alle dependencies en frameworks up-to-date. - **Logging en Monitoring:** - Log verdachte activiteiten en monitor je applicatie. - **Security Headers:** - Voeg beveiligingsheaders toe zoals X-Content-Type-Options, X-Frame-Options, etc., via Helmet. Door deze maatregelen toe te passen, versterk je de beveiliging van je applicatie tegen veelvoorkomende kwetsbaarheden.

Zeker, hier zijn concrete maatregelen en best practices om je React/Node.js applicatie te beveiligen: ## 🛡️ Frontend (React) Beveiliging **Tegen XSS (Cross-Site Scripting):** - Gebruik `dangerouslySetInnerHTML` alleen wanneer absoluut noodzakelijk - Implementeer DOMPurify om gebruikersinvoer te sanitizen: ```bash npm install dompurify ``` ```javascript import DOMPurify from 'dompurify'; const cleanHTML = DOMPurify.sanitize(userInput); ``` **Tegen CSRF (Cross-Site Request Forgery):** - Implementeer anti-CSRF tokens in formulieren - Gebruik SameSite cookies: `SameSite=Strict` of `SameSite=Lax` ## 🔒 Backend (Node.js/Express) Beveiliging **Algemene maatregelen:** ```javascript // Security headers const helmet = require('helmet'); app.use(helmet()); // CORS configuratie const cors = require('cors'); app.use(cors({ origin: ['https://jouwdomein.nl'], credentials: true })); ``` **Tegen SQL Injectie:** - Gebruik parameterized queries met prepared statements - Voor PostgreSQL (pg library): ```javascript // NOOIT DOEN: pool.query(`SELECT * FROM users WHERE name = '${name}'`); // WEL DOEN: pool.query('SELECT * FROM users WHERE name = $1', [name]); ``` **Tegen XSS:** - Valideer en sanitize alle gebruikersinvoer - Gebruik libraries zoals `validator` of `xss` ```bash npm install validator ``` ```javascript const validator = require('validator'); const safeInput = validator.escape(userInput); ``` **Tegen CSRF:** ```javascript const csrf = require('csurf'); const cookieParser = require('cookie-parser'); app.use(cookieParser()); app.use(crf({ cookie: true })); // Token naar frontend sturen app.get('/csrf-token', (req, res) => { res.json({ csrfToken: req.csrfToken() }); }); ``` ## 🗃️ Database Beveiliging - Gebruik principle of least privilege voor database gebruikers - Hash wachtwoorden met bcrypt: ```bash npm install bcrypt ``` ```javascript const bcrypt = require('bcrypt'); const saltRounds = 12; const hashedPassword = await bcrypt.hash(password, saltRounds); ``` ## 🔐 Authenticatie & Autorizatie - Gebruik JWT met secure cookies (httpOnly, secure flags) - Implementeer rate limiting: ```javascript const rateLimit = require('express-rate-limit'); const limiter = rateLimit({ windowMs: 15 * 60 * 1000, // 15 minuten max: 100 // maximaal 100 requests per window }); app.use(limiter); ``` ## 📋 Input Validatie ```javascript const { body, validationResult } = require('express-validator'); app.post('/register', [ body('email').isEmail().normalizeEmail(), body('password').isLength({ min: 8 }), body('name').trim().escape() ], (req, res) => { const errors = validationResult(req); if (!errors.isEmpty()) { return res.status(400).json({ errors: errors.array() }); } // Verwerk request }); ``` ## 🚨 Monitoring & Logging - Log security incidents (failed logins, suspicious requests) - Gebruik tools zoals Winston voor logging - Implementeer security headers monitoring ## 🧪 Testing - Voer regelmatig security scans uit - Gebruik tools zoals OWASP ZAP of npm audit - Test zowel automatisch als handmatig op kwetsbaarheden ## 📚 Aanbevolen Packages ```bash npm install helmet cors bcrypt validator express-validator csurf cookie-parser express-rate-limit ``` Implementeer deze maatregelen in layers voor defense in depth. Test regelmatig en houd dependencies up-to-date met `npm audit`.