JavaScripti turvalisus: sisendi valideerimine vs. XSS-i ennetamine

Tänapäeva digitaalses maastikus on veebirakendused üha haavatavamad erinevate turvaohtude suhtes. JavaScript, mis on levinud keel nii front-end kui ka back-end arenduses, satub sageli pahatahtlike tegutsejate sihikule. Tugevate turvameetmete mõistmine ja rakendamine on ülioluline oma kasutajate, andmete ja maine kaitsmiseks. See juhend keskendub kahele JavaScripti turvalisuse alustalale: sisendi valideerimisele ja saidiüleste skriptimisrünnakute (XSS) ennetamisele.

Ohtude mõistmine

Enne lahendustesse sukeldumist on oluline mõista ohte, mida püüame leevendada. JavaScripti rakendused on vastuvõtlikud paljudele turvanõrkustele, kuid XSS-rünnakud ja ebapiisavast sisendikäsitlusest tulenevad haavatavused on ühed kõige levinumad ja ohtlikumad.

Saidiülene skriptimisrünnak (XSS)

XSS-rünnakud toimuvad siis, kui teie veebisaidile süstitakse pahatahtlikke skripte, mis võimaldavad ründajatel käivitada suvalist koodi teie kasutajate brauserite kontekstis. See võib viia:

• Sessiooni kaaperdamiseni: Kasutajate küpsiste varastamine ja nende identiteedi omastamine.
• Andmevarguseni: Juurdepääs brauserisse salvestatud tundlikule teabele.
• Veebilehe moonutamiseni: Veebilehe välimuse või sisu muutmine.
• Pahatahtlikele saitidele suunamiseni: Kasutajate suunamine andmepüügilehtedele või pahavara levitavatele saitidele.

XSS-rünnakuid on kolme peamist tüüpi:

• Salvestatud XSS (püsiv XSS): Pahatahtlik skript salvestatakse serverisse (nt andmebaasi, foorumipostitusse või kommentaaride sektsiooni) ja edastatakse teistele kasutajatele, kui nad sisu avavad. Kujutage ette kasutajat, kes postitab blogisse kommentaari, mis sisaldab JavaScripti, mis on loodud küpsiste varastamiseks. Kui teised kasutajad seda kommentaari vaatavad, käivitub skript, mis võib nende kontod ohtu seada.
• Peegeldatud XSS (mittpüsiv XSS): Pahatahtlik skript süstitakse päringusse (nt URL-i parameetrisse või vormi sisendisse) ja peegeldatakse vastuses kasutajale tagasi. Näiteks otsingufunktsioon, mis ei puhasta otsingusõna korralikult, võib süstitud skripti otsingutulemustes kuvada. Kui kasutaja klõpsab spetsiaalselt koostatud lingil, mis sisaldab pahatahtlikku skripti, käivitub skript.
• DOM-põhine XSS: Turvanõrkus eksisteerib kliendipoolses JavaScripti koodis endas. Pahatahtlik skript manipuleerib otse DOM-i (Document Object Model), kasutades sageli kasutaja sisendit lehe struktuuri muutmiseks ja suvalise koodi käivitamiseks. Seda tüüpi XSS ei hõlma otse serverit; kogu rünnak toimub kasutaja brauseris.

Ebapiisav sisendi valideerimine

Ebapiisav sisendi valideerimine toimub siis, kui teie rakendus ei suuda kasutaja sisestatud andmeid enne nende töötlemist korralikult kontrollida ja puhastada. See võib põhjustada mitmesuguseid turvanõrkusi, sealhulgas:

• SQL-i süstimine: Pahatahtliku SQL-koodi süstimine andmebaasi päringutesse. Kuigi see on peamiselt back-end probleem, võib ebapiisav front-end valideerimine sellele turvanõrkusele kaasa aidata.
• Käskude süstimine: Pahatahtlike käskude süstimine süsteemikutsetesse.
• Kataloogist väljumine: Juurdepääs failidele või kataloogidele väljaspool ettenähtud ulatust.
• Puhvri ületäitumine: Andmete kirjutamine üle eraldatud mälupuhvri, mis põhjustab krahhe või suvalise koodi käivitamist.
• Teenusetõkestamise rünne (DoS): Suure hulga andmete esitamine süsteemi ülekoormamiseks.

Sisendi valideerimine: teie esimene kaitseliin

Sisendi valideerimine on protsess, mille käigus kontrollitakse, kas kasutaja sisestatud andmed vastavad oodatud vormingule, pikkusele ja tüübile. See on kriitiline esimene samm paljude turvanõrkuste ennetamisel.

Tõhusa sisendi valideerimise põhimõtted

• Valideerige serveripoolel: Kliendipoolset valideerimist saavad pahatahtlikud kasutajad vältida. Tehke valideerimine alati serveripoolel esmase kaitsena. Kliendipoolne valideerimine pakub paremat kasutajakogemust, andes kohest tagasisidet, kuid seda ei tohiks kunagi turvalisuse tagamiseks usaldada.
• Kasutage valge nimekirja lähenemist: Määratlege, mis on lubatud, mitte see, mis ei ole lubatud. See on üldiselt turvalisem, sest see ennetab tundmatuid ründevektoreid. Selle asemel, et proovida blokeerida kõiki võimalikke pahatahtlikke sisendeid, määratlete täpse vormingu ja märgid, mida ootate.
• Valideerige andmeid kõigis sisendpunktides: Valideerige kõik kasutaja sisestatud andmed, sealhulgas vormi sisendid, URL-i parameetrid, küpsised ja API-päringud.
• Normaliseerige andmeid: Teisendage andmed enne valideerimist ühtsesse vormingusse. Näiteks teisendage kogu tekst väiketähtedeks või eemaldage algus- ja lõputühikud.
• Pakkuge selgeid ja informatiivseid veateateid: Teavitage kasutajaid, kui nende sisend on kehtetu, ja selgitage, miks. Vältige tundliku teabe avaldamist oma süsteemi kohta.

Praktilised näited sisendi valideerimisest JavaScriptis

1. E-posti aadresside valideerimine

Levinud nõue on e-posti aadresside valideerimine. Siin on näide regulaaravaldise abil:

            function isValidEmail(email) {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

const email = document.getElementById('email').value;
if (!isValidEmail(email)) {
  alert('Vigane e-posti aadress');
} else {
  // Töötle e-posti aadressi
}

            

              
                Copy
              
            
          

Selgitus:

• Muutuja `emailRegex` määratleb regulaaravaldise, mis vastab kehtivale e-posti aadressi vormingule.
• Regulaaravaldise objekti meetodit `test()` kasutatakse kontrollimiseks, kas e-posti aadress vastab mustrile.
• Kui e-posti aadress on kehtetu, kuvatakse hoiatusteade.

2. Telefoninumbrite valideerimine

Telefoninumbrite valideerimine võib olla keeruline erinevate vormingute tõttu. Siin on lihtne näide, mis kontrollib kindlat vormingut:

            function isValidPhoneNumber(phoneNumber) {
  const phoneRegex = /^\+?[1-9]\d{1,14}$/;
  return phoneRegex.test(phoneNumber);
}

const phoneNumber = document.getElementById('phone').value;
if (!isValidPhoneNumber(phoneNumber)) {
  alert('Vigane telefoninumber');
} else {
  // Töötle telefoninumbrit
}

            

              
                Copy
              
            
          

Selgitus:

• See regulaaravaldis kontrollib telefoninumbrit, mis võib alata `+` märgiga, millele järgneb number 1 kuni 9, ja seejärel 1 kuni 14 numbrit. See on lihtsustatud näide ja võib vajada kohandamist vastavalt teie konkreetsetele nõuetele.

Märkus: Telefoninumbri valideerimine on keeruline ja nõuab sageli väliseid teeke või teenuseid rahvusvaheliste vormingute ja variatsioonide käsitlemiseks. Teenused nagu Twilio pakuvad põhjalikke telefoninumbri valideerimise API-sid.

3. Sõne pikkuse valideerimine

Kasutaja sisendi pikkuse piiramine aitab vältida puhvri ületäitumist ja DoS-rünnakuid.

            function isValidLength(text, minLength, maxLength) {
  return text.length >= minLength && text.length <= maxLength;
}

const username = document.getElementById('username').value;
if (!isValidLength(username, 3, 20)) {
  alert('Kasutajanimi peab olema 3 kuni 20 tähemärki pikk');
} else {
  // Töötle kasutajanime
}

            

              
                Copy
              
            
          

Selgitus:

• Funktsioon `isValidLength()` kontrollib, kas sisendsõne pikkus jääb määratud miinimum- ja maksimumpiiridesse.

4. Andmetüüpide valideerimine

Veenduge, et kasutaja sisend on oodatud andmetüüpi.

            function isNumber(value) {
  return typeof value === 'number' && isFinite(value);
}

const age = parseInt(document.getElementById('age').value, 10);
if (!isNumber(age)) {
  alert('Vanus peab olema number');
} else {
  // Töötle vanust
}

            

              
                Copy
              
            
          

Selgitus:

• Funktsioon `isNumber()` kontrollib, kas sisendväärtus on number ja lõplik (mitte lõpmatus või NaN).
• Funktsioon `parseInt()` teisendab sisendsõne täisarvuks.

XSS-i ennetamine: erimärkide asendamine ja puhastamine

Kuigi sisendi valideerimine aitab vältida pahatahtlike andmete sattumist teie süsteemi, ei ole see alati piisav XSS-rünnakute ennetamiseks. XSS-i ennetamine keskendub sellele, et tagada kasutaja sisestatud andmete turvaline kuvamine brauseris.

Erimärkide asendamine (väljundi kodeerimine)

Erimärkide asendamine, tuntud ka kui väljundi kodeerimine, on protsess, mille käigus teisendatakse HTML-is, JavaScriptis või URL-ides eritähendusega märgid nende vastavateks asendusjadadeks. See takistab brauseril neid märke koodina tõlgendamast.

Kontekstiteadlik erimärkide asendamine

On ülioluline asendada andmete erimärgid vastavalt kontekstile, milles neid kasutatakse. Erinevad kontekstid nõuavad erinevaid asendusreegleid.

• HTML-i erimärkide asendamine: Kasutatakse kasutaja sisestatud andmete kuvamisel HTML-elementide sees. Järgmised märgid tuleks asendada:
  • `&` (ampersand) -> `&`
  • `<` (väiksem kui) -> `<`
  • `>` (suurem kui) -> `>`
  • `"` (topeltjutumärk) -> `"`
  • `'` (ülakoma) -> `'`
• JavaScripti erimärkide asendamine: Kasutatakse kasutaja sisestatud andmete kuvamisel JavaScripti koodis. See on oluliselt keerulisem ja üldiselt on soovitatav vältida kasutajaandmete otsest süstimist JavaScripti koodi. Selle asemel kasutage turvalisemaid alternatiive, näiteks andmeatribuutide seadmist HTML-elementidele ja neile juurdepääsu JavaScripti kaudu. Kui peate absoluutselt andmeid JavaScripti süstima, kasutage sobivat JavaScripti erimärkide asendamise teeki.
• URL-i erimärkide asendamine: Kasutatakse kasutaja sisestatud andmete lisamisel URL-idesse. Kasutage JavaScripti funktsiooni `encodeURIComponent()`, et andmeid korralikult asendada.

Näide HTML-i erimärkide asendamisest JavaScriptis

            function escapeHTML(text) {
  const map = {
    '&': '&',
    '<': '<',
    '>': '>',
    '"': '"',
    "'": '''
  };
  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

const userInput = document.getElementById('comment').value;
const escapedInput = escapeHTML(userInput);

document.getElementById('output').innerHTML = escapedInput;

            

              
                Copy
              
            
          

Selgitus:

• Funktsioon `escapeHTML()` asendab erimärgid nende vastavate HTML-üksustega.
• Asendatud sisendit kasutatakse seejärel `output` elemendi sisu värskendamiseks.

Puhastamine

Puhastamine hõlmab potentsiaalselt kahjulike märkide või koodi eemaldamist või muutmist kasutaja sisestatud andmetest. Seda kasutatakse tavaliselt siis, kui soovite lubada mõningast HTML-vormingut, kuid vältida XSS-rünnakuid.

Puhastamisteegi kasutamine

On tungivalt soovitatav kasutada hästi hooldatud puhastamisteeki, selle asemel et proovida ise oma lahendust kirjutada. Teegid nagu DOMPurify on loodud HTML-i turvaliseks puhastamiseks ja XSS-rünnakute ennetamiseks.

            // Kaasa DOMPurify teek
// <script src="https://cdn.jsdelivr.net/npm/dompurify@2.4.0/dist/purify.min.js"></script>

const userInput = document.getElementById('comment').value;
const sanitizedInput = DOMPurify.sanitize(userInput);

document.getElementById('output').innerHTML = sanitizedInput;

            

              
                Copy
              
            
          

Selgitus:

• Funktsioon `DOMPurify.sanitize()` eemaldab sisendsõnest kõik potentsiaalselt kahjulikud HTML-elemendid ja atribuudid.
• Puhastatud sisendit kasutatakse seejärel `output` elemendi sisu värskendamiseks.

Sisu turvapoliitika (CSP)

Sisu turvapoliitika (CSP) on võimas turvamehhanism, mis võimaldab teil kontrollida ressursse, mida brauseril on lubatud laadida. Määratledes CSP, saate takistada brauseril käivitamast lehesisest skripti või laadimast ressursse ebausaldusväärsetest allikatest, vähendades oluliselt XSS-rünnakute ohtu.

CSP seadistamine

Saate seadistada CSP, lisades `Content-Security-Policy` päise oma serveri vastusesse või kasutades `` silti oma HTML-dokumendis.

CSP päise näide:

            Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data:; style-src 'self' 'unsafe-inline';
            

              
                Copy
              
            
          

Selgitus:

• `default-src 'self'`: Luba ressursse ainult samast päritolust.
• `script-src 'self' 'unsafe-inline' 'unsafe-eval'`: Luba skripte samast päritolust, lehesiseseid skripte ja `eval()` (kasutage ettevaatlikult).
• `img-src 'self' data:`: Luba pilte samast päritolust ja andme-URL-e.
• `style-src 'self' 'unsafe-inline'`: Luba stiile samast päritolust ja lehesiseseid stiile.

Märkus: CSP korrektne konfigureerimine võib olla keeruline. Alustage piirava poliitikaga ja leevendage seda järk-järgult vastavalt vajadusele. Kasutage CSP aruandlusfunktsiooni rikkumiste tuvastamiseks ja oma poliitika täpsustamiseks.

Parimad praktikad ja soovitused

• Rakendage nii sisendi valideerimist kui ka XSS-i ennetamist: Sisendi valideerimine aitab vältida pahatahtlike andmete sattumist teie süsteemi, samas kui XSS-i ennetamine tagab, et kasutaja sisestatud andmed kuvatakse brauseris turvaliselt. Need kaks tehnikat täiendavad teineteist ja neid tuleks kasutada koos.
• Kasutage raamistikku või teeki, millel on sisseehitatud turvafunktsioonid: Paljud kaasaegsed JavaScripti raamistikud ja teegid, nagu React, Angular ja Vue.js, pakuvad sisseehitatud turvafunktsioone, mis aitavad teil vältida XSS-rünnakuid ja muid turvanõrkusi.
• Hoidke oma teegid ja sõltuvused ajakohasena: Värskendage regulaarselt oma JavaScripti teeke ja sõltuvusi turvanõrkuste parandamiseks. Tööriistad nagu `npm audit` ja `yarn audit` aitavad teil tuvastada ja parandada oma sõltuvuste turvanõrkusi.
• Harige oma arendajaid: Veenduge, et teie arendajad on teadlikud XSS-rünnakute ja muude turvanõrkuste riskidest ning et nad mõistavad, kuidas rakendada nõuetekohaseid turvameetmeid. Kaaluge turvakoolitusi ja koodiülevaatusi potentsiaalsete turvanõrkuste tuvastamiseks ja lahendamiseks.
• Auditeerige oma koodi regulaarselt: Viige läbi regulaarseid turvaauditeid oma koodis, et tuvastada ja parandada potentsiaalseid turvanõrkusi. Kasutage automatiseeritud skaneerimisvahendeid ja manuaalseid koodiülevaatusi, et tagada oma rakenduse turvalisus.
• Kasutage veebirakenduse tulemüüri (WAF): WAF aitab kaitsta teie rakendust mitmesuguste rünnakute, sealhulgas XSS-rünnakute ja SQL-i süstimise eest. WAF asub teie rakenduse ees ja filtreerib välja pahatahtliku liikluse enne, kui see jõuab teie serverisse.
• Rakendage päringute piiramist (rate limiting): Päringute piiramine aitab vältida teenusetõkestamise (DoS) rünnakuid, piirates päringute arvu, mida kasutaja saab teatud aja jooksul teha.
• Jälgige oma rakendust kahtlase tegevuse suhtes: Jälgige oma rakenduse logisid ja turvameetrikat kahtlase tegevuse osas. Kasutage sissetungituvastussüsteeme (IDS) ja turvainfo ja sündmuste haldamise (SIEM) tööriistu turvaintsidentide tuvastamiseks ja neile reageerimiseks.
• Kaaluge staatilise koodianalüüsi tööriista kasutamist: Staatilise koodianalüüsi tööriistad saavad teie koodi automaatselt skaneerida potentsiaalsete turvanõrkuste ja turvavigade osas. Need tööriistad aitavad teil tuvastada ja parandada turvanõrkusi arendusprotsessi varajases staadiumis.
• Järgige vähimate privileegide põhimõtet: Andke kasutajatele ainult minimaalne juurdepääsutase, mida nad oma ülesannete täitmiseks vajavad. See aitab vältida ründajatel juurdepääsu saamist tundlikele andmetele või volitamata toimingute tegemist.

Kokkuvõte

JavaScripti rakenduste turvamine on pidev protsess, mis nõuab ennetavat ja mitmekihilist lähenemist. Mõistes ohte, rakendades sisendi valideerimise ja XSS-i ennetamise tehnikaid ning järgides selles juhendis toodud parimaid praktikaid, saate oluliselt vähendada turvanõrkuste riski ning kaitsta oma kasutajaid ja andmeid. Pidage meeles, et turvalisus ei ole ühekordne lahendus, vaid pidev pingutus, mis nõuab valvsust ja kohanemist.

See juhend annab aluse JavaScripti turvalisuse mõistmiseks. Pidevalt arenevas ohumaastikus on oluline olla kursis uusimate turvatrendide ja parimate praktikatega. Vaadake regulaarselt üle oma turvameetmed ja kohandage neid vastavalt vajadusele, et tagada oma rakenduste pidev turvalisus.