Johdatus Cross-Site Scripting (XSS) ja JavaScript Defenses

Cross-site scripting (XSS) on yksi yleisimmistä web-turvallisuuden haavoittuvuuksia, johdonmukaisesti sijoitus OWASP Top 10. XSS hyökkäys mahdollistaa hyökkääjä ruiskuttaa haittapuoli asiakas-side skriptit web-sivuille katsella muita käyttäjiä. Nämä skriptit voivat varastaa istuntopoletit, ohjata käyttäjät phishing sivustoja, deface sivut, tai asentaa haittaohjelmia. Vaikka palvelimen puolella sanitation on kriittinen, JavaScript on keskeinen rooli asiakkaan puolella havaita ja estää nämä hyökkäykset. Tämä artikkeli tarjoaa kattavan, tuotannon-ready opas käyttää JavaScript suojaamaan sovelluksia XSS.

Kolmen XSS-tyypin ymmärtäminen

Ennen sukellus ennaltaehkäisyyn, on tärkeää ymmärtää kolme ensisijaista XSS: tallentaa, heijastuu, ja DOM-pohjainen. Jokainen vaatii hieman erilainen havaitseminen ja ennaltaehkäisy lähestymistapa.

Säilytetty XSS

Tallennettuna (jatkuva) XSS tapahtuu, kun pahansuopa syöte tallennetaan pysyvästi palvelimelle (esim. tietokantaan, foorumipostiin tai kommenttiin) ja myöhemmin tarjotaan käyttäjille ilman asianmukaista manitisaatiota. Hyökkäyskuorma suorittaa selaimessa kenen tahansa katsomalla tallennettua sisältöä.

Heijastettu XSS

Heijastettu XSS tapahtuu, kun pahansuopa skripti heijastuu web-palvelimelta, tyypillisesti URL-parametrin tai muoto-anomuksen kautta. Hyökkääjä huijaa uhria klikkaamaan suunniteltua linkkiä, ja ruiskutettu koodi suorittaa välittömästi. Toisin kuin tallennettu XSS, hyötykuorma ei jatku.

DOM-perusteltu XSS

DOM-pohjainen XSS on puhtaasti asiakaspuolen haavoittuvuus. Hyökkäyskuorma muuttaa uhrin DOM-ympäristöä. Ilkeä koodi ei koskaan koske palvelimeen; se on peräisin asiakaspuoli JavaScriptistä, joka käsittelee turvallisesti käyttäjän syötettä (esim., lukeminen ], tai ).

Havaitaan XSS-hyökkäykset JavaScriptillä

Havaitsemisessa on kyse epäilyttävän toiminnan tunnistamisesta ennen kuin vahinko tapahtuu. JavaScript voi seurata käyttäjän syötteitä, seurata DOM-mutaatioita ja validoida tietoja ottopisteissä. Vaikka asiakaspuolen havaitseminen ei voi tavoittaa kaikkia hyökkäyksiä (erityisesti jos hyökkääjän käsityö vaatii suoraan palvelimelle), se tarjoaa arvokkaan ensimmäisen puolustuslinjan.

Syötevalidointi ja sanitointi

Vahvista ja puhdista käyttäjäsyötteet aina asiakaspuolella ennen käsittelyä. Käytä [ :n sijasta komentosarjan suorituksen estämiseksi. Seuraava toiminto poistaa vaaralliset merkit merkkijonosta:

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

Tämä toimii, koska asetus ei tulkitse HTML-tunnisteita; se käsittelee kaikkea tavallisena tekstinä. Tuloksena sisältää karanneita versioita kaikista HTML-erikoismerkeistä (esim. , , [[]).

DOM-mutaatioiden seuranta epäilyttävien elementtien varalta

Attackers usein injektoida tags tai tapahtuma käsittelijät ([], ) DOM. Käyttämällä API, voit seurata odottamattomia elementtejä sisään. Perusesimerkki:

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 });

Varoitus:[] Estävät komentojonot kautta voidaan ohittaa nokkelilla hyökkääjillä ja ne voivat rikkoa laillista toiminnallisuutta. Käytä tätä valvontavälineenä eikä ensisijaisena estomekanismina.

Validoidaan URL- ja Hash-parametreja

DOM-pohjaisen XSS:n osalta lue URL-osoitteet turvallisesti käyttäen ja vältä suoraan arvojen lisäämistä HTML:ään.

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
}

XSS-hyökkäysten estäminen JavaScript-ohjelmalla

Ennaltaehkäisy edellyttää monikerroksista lähestymistapaa. JavaScript ei yksin voi täysin varmistaa sovellusta, mutta kun siihen yhdistetään asianmukainen taustakartoitus ja Content Security Policy (CSP)[], se vähentää riskiä dramaattisesti.

Koodaa kaikki käyttäjän ohjaamat tiedot ennen kuin lisäät ne kotipesään

Kultainen sääntö: älä koskaan lisää luottamatonta tietoa suoraan DOM:iin. Käytä turvallisia DOM-menetelmiä sisäisen HTML:n sijaan.

Käyttö tai 

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

Kun sinun täytyy käyttää , siivoa kirjaston kanssa

Jos sinun täytyy ehdottomasti tehdä HTML (esim., rikas tekstieditori), luottaa luotettu manitisaatiokirjasto kuten DOMPurify. DOMPurify on laajalti käytetty, taistelu-testattu kirjasto, joka poistaa pahansuopa koodi säilyttäen samalla turvallinen HTML.

// 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;

DOMPurify teoksia jäsentämällä syöte, strippaamalla vaarallisia tunnisteita ja ominaisuuksia, ja palauttamalla vain sallittuja elementtejä. [Näytä DOMPurify on GitHub.

Vältä vaarallisia JavaScript- toimintoja

Jotkut JavaScript-menetelmät ja ominaisuudet ovat tunnettuja XSS:n mahdollistamisesta. Vältä tai tarkasti kontrolloi:

  • [] .
  • , [] .
  • [[] .
  • [[ ] .] ...................................................................................................................................................................................................................................
  • / merkkijonokoodilla .
  • ][ ] rakennuttaja . . .

Toteuttaa Sisällön turvallisuuspolitiikka (CSP) JavaScript? Ei suositella

CSP on selainmekanismi, joka rajoittaa mitä skriptejä voi suorittaa. Se on tyypillisesti asetettu HTTP-otsikkojen kautta, mutta voit myös asettaa sen käyttämällä [ tagia tai JavaScript-ohjelmaa dynaamisesti luomalla -elementtiä. Kuitenkin CSP:n asettaminen JavaScript-osioon on vähemmän turvallista, koska hyökkääjä, jolla on jo jokin hallinta, voi poistaa sen käytöstä. Jos sinun täytyy käyttää JavaScript-ohjelmaa CSP:n täytäntöönpanoon (esim. kehityksen aikana), tee se hyvin aikaisin sivun latauksessa:

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);

Tuotannossa, määritä CSP web-palvelimella tai käänteisproxy. [MDN CSP dokumentaatio[ tarjoaa kattavat ohjeet.

Lisäturvatoimenpiteet

JavaScript-erityisen taktiikan lisäksi XSS:n kokonaisen ehkäisystrategian piiriin kuuluvat seuraavat kriittiset toimenpiteet:

  • Aina validoida palvelimen puolella.[ Asiakaspuolen validointi voidaan ohittaa. Älä koskaan luota asiakastietoihin.
  • ]Käytä asianmukaisia HTTP-vastausotsikoita.[ , ja erityisesti .
  • Output encode every time crease user data.[ Kontekstiasiat: koodaa HTML-yhteisöille, URL-koodaus, JavaScript-jonon koodaus jne.
  • Pidä riippuvuussuhteet ajan tasalla.[ Haavoittuvia JavaScript-kirjastoja (esim. vanhoja versioita jQuerystä) käytetään yleisesti XSS-vektorina.
  • Käytä kehyksiä sisäänrakennetulla XSS-suojauksella.[ Reaktio, kulma ja vue automaattisesti poistuvat lähdöstä oletusarvoisesti. Ole silti varovainen :n tai :n kanssa.
  • Täytä tiukka CSP.[] Vältä ja , jos mahdollista. Käytä nonces tai hashes inline skriptejä.

Real-World Esimerkki: Turvallinen kommentti Renderöinti

Harkitse blogikommenttijärjestelmää, jossa käyttäjät lähettävät viestejä, jotka näytetään muille. Hyökkääjä saattaa yrittää lisätä . Tässä on JavaScript-lähestymistapa, joka integroituu taustaosaan:

  1. Ennen kuin lähetät palvelimelle [], puhdistaudu [ ennen kuin lähetät sen (mutta palvelimen on edelleen sanitoitava).
  2. Server palauttaa tiedot:[ Taustaosan tulisi HTML- koodata kommenttiteksti.
  3. Asiakasntositteet:[] Käytä tai turvallista mallikonetta. Älä koskaan käytä raakaa käyttäjätietoa.
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);
}

Puolustusten testaaminen

Kun olet toteuttanut ennaltaehkäisyn, testaa sovelluksesi käyttämällä automaattisia skannereita ja käsikäyttöisiä hyötykuormat.

  • [[LLT:50]]
  • [[LLT:51]]
  • [[LLT:53]]

Käytä selaimen kehittäjä työkaluja tutkia DOM ja varmistaa hyötykuormat karannut. Myös, testaa CSP täytäntöönpanon tarkistamalla konsolin rikkomusraportteja.

Päätelmät

Skripti on edelleen vakava uhka, mutta JavaScript tarjoaa tehokkaita työkaluja sekä havaitsemiseen että ennaltaehkäisyyn. Validoimalla syötteitä, seuraamalla DOM-muutoksia, karkaamalla tulostusta ja integroimalla vankkoihin kirjastoihin, kuten DOMPurify, voit merkittävästi kovettaa asiakaspuolesi turvallisuutta. Muista, että asiakaspuolen toimenpiteet eivät ole hopealuoti; ne täydentävät puolustus-in-syvällinen strategia, joka sisältää palvelinpuolen sanitointi, CSP-otsakkeet ja säännölliset tietoturvatarkastukset. Pysy valppaana, testaa usein ja pidä kirjastosi ajan tasalla.

Lisätietoja saa ]WASP XSS-sivulta ja WASP XSS-ennaltaehkäisylehdeltä .