Securitate: XSS, CSRF, CORS
Same-origin policy și cele 4 atacuri pe care orice frontender trebuie să le știe.
Actualizat
De ce trebuie să știe un frontender
Majoritatea atacurilor web exploatează browserul și codul de frontend. Nu trebuie să fii expert în securitate, dar trebuie să cunoști cele 4 mari probleme și protecțiile lor.
Same-origin policy
Regula de bază a browserului: un script de pe un origin nu poate citi răspunsurile de pe alt origin. Fără ea, orice site deschis ar putea citi emailul tău din alt tab.
Cele 4 atacuri de știut
| Atac | Ce se întâmplă | Protecție |
|---|---|---|
| XSS | atacatorul reușește să ruleze JS pe pagina ta (prin input nefiltrat) | escapare la afișare, fără innerHTML cu date de la user, CSP, cookie-uri HttpOnly |
| CSRF | alt site trimite un request în numele tău, folosind cookie-urile tale | SameSite=Lax, token CSRF, verificarea Origin (Next o face pentru Server Actions) |
| Clickjacking | site-ul tău e pus într-un iframe invizibil, iar userul dă click fără să știe | X-Frame-Options: DENY / CSP frame-ancestors |
| Secrete expuse | chei API ajung în bundle-ul de JS | variabile fără NEXT_PUBLIC_, server-only |
XSS în detaliu
el.innerHTML = `Salut, ${name}` // ✗ dacă name = '<img src=x onerror=alert(1)>' → rulează cod
el.textContent = `Salut, ${name}` // ✓ e tratat ca textReact escapează automat tot ce pui în {}. Singura ușă deschisă e dangerouslySetInnerHTML — folosește-o doar cu HTML de încredere (ca markdown-ul lecțiilor, scris de noi) sau sanitizat (DOMPurify).
CORS
CORS (Cross-Origin Resource Sharing) e mecanismul prin care un server permite explicit altor origini să-i citească răspunsurile:
Access-Control-Allow-Origin: https://app.ro
Important de înțeles:
- CORS nu te protejează pe tine — îl protejează pe user. Request-ul pleacă oricum; browserul doar refuză să-ți dea răspunsul.
- O eroare CORS se rezolvă pe server (sau printr-un proxy/Route Handler pe același origin), nu în frontend.
Access-Control-Allow-Origin: *nu merge împreună cu cookie-uri.
HTTPS
Criptează conversația — nimeni de pe rețea nu poate citi sau modifica datele. Pe Vercel e automat. Fără HTTPS, cookie-urile Secure și multe API-uri moderne (geolocație, service workers) nu funcționează.
Checklist pentru orice proiect
- Nu folosi
innerHTML/dangerouslySetInnerHTMLcu input de la user. - Validează datele pe server, nu doar în formular.
- Verifică autentificarea în fiecare Server Action și Route Handler.
- Cookie-uri de sesiune:
HttpOnly; Secure; SameSite=Lax. - Niciun secret în variabile
NEXT_PUBLIC_.
Pe scurt
- Same-origin policy izolează site-urile între ele.
- XSS = cod străin rulat la tine; CSRF = request făcut în numele tău.
- CORS e decis de server și protejează userul.