Cum să utilizați Javascript pentru a detecta și preveni scripting Cross-site-ul atacuri (xss)

Introducere în Scripting Cross-Site (XSS) și JavaScript Defenses

Scripting-ul Cross-site (XSS) este una dintre cele mai răspândite vulnerabilităţi de securitate web, clasament constant în OWASP Top 10. Un atac XSS permite unui atacator să injecteze scripturi malware-side maltioase în pagini web vizualizate de către alţi utilizatori. Aceste scripturi pot fura jetoane de sesiune, redirecţiona utilizatorii la site-uri de phishing, deface pagini, sau instala malware. În timp ce server-side sanitizarea este critică, JavaScript joacă un rol esenţial pe partea client pentru a detecta şi preveni aceste atacuri. Acest articol oferă un ghid cuprinzător, de producţie-gata pentru a utiliza JavaScript pentru a proteja aplicaţiile de XSS.

Înțelegerea celor trei tipuri de XSS

Înainte de a intra în prevenire, este esențial să înțelegem cele trei categorii primare de XSS: stocate, reflectate, și bazate pe DOM. Fiecare necesită o abordare ușor diferită de detectare și prevenire.

Stocat XSS

Stocat (persistent) XSS apare atunci când intrare rău intenționată este stocat permanent pe server (de exemplu, într-o bază de date, post forum, sau comentariu) și mai târziu servit utilizatorilor fără o sanitizare adecvată. Încărcătura utilă atac execută în browser-ul de oricine vizionarea conținutului stocat.

XSS reflectat

XSS reflectat se întâmplă atunci când script-ul rău intenționat este reflectat de pe un server web, de obicei, prin intermediul unui parametru URL sau depunerea formular. Atacatorul trucuri o victimă în click un link artizanal, și codul injectat execută imediat. Spre deosebire de stocate XSS, sarcina utilă nu persistă.

XSS bazat pe DOM

XSS bazat pe DOM este o vulnerabilitate pur client-side. Încărcătura utilă de atac modifică mediul DOM în browserul victimei. Codul rău intenționat nu atinge serverul; provine de la JavaScript-ul client-side care se ocupă în mod nesigur de intrare utilizator (de exemplu, citirea de la , , sau .

Detectarea atacurilor XSS cu JavaScript

Detectarea este despre identificarea activității suspecte înainte de a apărea daune. JavaScript poate monitoriza intrările utilizatorilor, urmări mutațiile DOM, și valida datele la punctele de intrare. În timp ce detectarea client-side nu poate prinde toate atacurile (în special dacă agresorul solicită direct la server), oferă o primă linie de apărare valoroasă.

Validarea și sanitizarea intrărilor

Intotdeauna valideaza si igienizeaza intrarile utilizatorului pe partea clientilor inainte de procesare. Foloseste in loc de pentru a preveni executia scripturilor. Urmatoarea functionare benzi caractere periculoase dintr-un sir de caractere:

function sanitizeInput(input) {
 const div = document.createElement('div');
 div.textContent = input;
 return div.innerHTML;
}

Acest lucru funcționează deoarece setarea nu interpretează etichetele HTML; tratează totul ca text simplu. Rezultatul conține versiuni scăpate ale oricăror caractere speciale HTML (de exemplu, , , .

Monitorizarea mutaţiilor dom pentru elemente suspecte

Atacatorii injectează adesea în DOM tag-uri sau manipulatori de evenimente [, . Folosind API-ul , puteți urmări inserțiile neprevăzute ale elementelor.

const observer = new MutationObserver((mutations) => {
 mutations.forEach((mutation) => {
 mutation.addedNodes.forEach((node) => {
 if (node.nodeType === 1) { // element node
 if (node.tagName === 'SCRIPT') {
 console.warn('Potential XSS: a script element was injected via DOM.');
 node.remove(); // or log and analyze
 }
 // Check for dangerous attributes
 if (node.hasAttribute('onerror') || node.hasAttribute('onload')) {
 console.warn('Suspicious event handler attribute detected.');
 }
 }
 });
 });
});
observer.observe(document.body, { childList: true, subtree: true });

Atenție: Scripturile de blocare prin pot fi ocolite de atacatori inteligenți și pot rupe funcționalitatea legitimă.Folosiți-l mai degrabă ca un instrument de monitorizare decât ca un mecanism primar de prevenire.

Validarea parametrilor URL și hash

Pentru XSS bazat pe DOM, citiți componentele URL în condiții de siguranță folosind și evitați introducerea directă a valorilor în HTML. Detectați încercările de a trece codul executabil:

const params = new URLSearchParams(window.location.search);
const userParam = params.get('name');
if (userParam && /[<>"'\/]/.test(userParam)) {
 console.warn('Potential XSS in parameter: ' + userParam);
 // Do not use this value in the DOM without encoding
}

Prevenirea atacurilor XSS cu JavaScript

Prevenirea necesită o abordare multistratificată. JavaScript nu poate asigura pe deplin o aplicație, dar atunci când este combinată cu o sanitizare adecvată a backend-ului și Politica de securitate constantă (CSP), reduce dramatic riscul.

Codează toate datele controlate de utilizator înainte de a introduce în DOM

Regula de aur: nu introduceți niciodată date neîncredere direct în DOM. Utilizați metode sigure DOM în loc de InteriorHTML.

Utilizare sau

const userInput = getUserInput();
const safeText = document.createTextNode(userInput);
document.getElementById('output').appendChild(safeText);

Când trebuie să utilizați , salivați cu o bibliotecă

Dacă este absolut necesar să redea HTML (de exemplu, de la un editor de text bogat), se bazează pe o bibliotecă de sanitizare de încredere cum ar fi Dopmurify.Dampurify este o bibliotecă larg utilizată, testat de luptă, care elimină codul rău intenționat în timp ce păstrează HTML în condiții de siguranță.

// Example with DOMPurify (install via npm or CDN)
const dirty = '<img src=x onerror="alert(1)">';
const clean = DOMPurify.sanitize(dirty);
document.getElementById('content').innerHTML = clean;

DOMPURIFICA LUCRĂRI PRIN PARSINGEREA INTRĂRII, DURAREA DE TAGĂTURI SI atributE periculoase, ȘI ÎNTOARCEREA DOMPURIFICATILOR NUMAI. Veiew DUMPURIFICHON GitHub.

Evitați funcțiile JavaScript periculoase

Unele metode și proprietăți JavaScript sunt cunoscute pentru a permite XSS. Evitați sau controlați strict:

• , ] [Aceeași regulă.
• / ] cu cod de șir]
• constructor

Punerea în aplicare a politicii de securitate a conținutului (CSP) prin JavaScript? Nu este recomandată

CSP este un mecanism de browser care restricţionează ce scripturi pot rula. Acesta este de obicei setat prin antete HTTP, dar puteţi seta, de asemenea, folosind o etichetă sau prin JavaScript prin crearea dinamică a unui element . Cu toate acestea, setarea CSP în JavaScript este mai puţin sigură deoarece un atacator care are deja un control ar putea dezactiva. Preferă întotdeauna antetul HTTP. Dacă trebuie să utilizaţi JavaScript pentru a aplica CSP (de exemplu, în timpul dezvoltării), face-o foarte devreme în sarcina paginii:

const meta = document.createElement('meta');
meta.httpEquiv = 'Content-Security-Policy';
meta.content = "default-src 'self'; script-src 'self' 'unsafe-inline'"; // Be very careful with 'unsafe-inline'
document.head.appendChild(meta);

Pentru producţie, configuraţi CSP în serverul dvs. web sau proxy invers. MDN CSP documentaţie oferă îndrumări cuprinzătoare.

Măsuri suplimentare de securitate

Dincolo de tacticile specifice JavaScript, o strategie completă de prevenire XSS include aceste măsuri critice:

• Validarea clienților poate fi ocolită. Niciodată să nu ai încredere în datele clienților.
• Folosiţi antetele de răspuns HTTP adecvate.,, și în special .
• Output code de fiecare dată când redați date de utilizator.Context matters: code for HTML entitys, URL coding, JavaScript string coding, etc.
• Păstrați dependențele actualizate. Bibliotecile JavaScript vulnerabile (de exemplu, versiunile mai vechi ale jQuery) sunt un vector XSS comun. Utilizați npm audit sau instrumente similare.
• Folosiţi cadre cu protecţie XSS încorporat.[ Reacţionează, Angular şi Vue automat de ieşire în mod implicit.Totuşi, fiţi precauţi cu sau .
• Aplică un CSP strict. Evitați ] și ] dacă este posibil.Folosiți nonces sau hași pentru scripturi inline.

function renderComment(comment) {
 const item = document.createElement('div');
 item.className = 'comment';
 const body = document.createElement('p');
 body.textContent = comment.body; // escaped by browser
 item.appendChild(body);
 document.getElementById('comments').appendChild(item);
}