Kuidas vältida XSS-rünnakuid, kui kasutate ohtlikultSetInnerHTML-i Reaktis

Selle artikli eesmärk on näidata ühte tehnikat, mida kasutame saidiülese skriptimise (XSS) rünnakute leevendamiseks Jam3-s. Need haavatavused võivad ilmneda ohtlikultSetInnerHTML valesti kasutamisel. Meie eesmärk on see enne tähtaega tuvastada ja ebausaldusväärseid väärtusi puhastada.

ohtlikultSetInnerHTML on üks funktsioonidest, mida tavaliselt kasutatakse DOM-vormingus sisu andmete esiliseks esitamiseks ja sisestamiseks. See pakub HTML-i stringide sõelumisel Reacti virtuaalsesse DOM-i mitmeid eeliseid. Siiski võiksite kaaluda selle kasutamist kasutaja sisestamiseks. XSS-i rünnaku vältimiseks peate arvestama selle haavatavustega.

XSS rünnakud

Saidideülene skriptimine (XSS) võimaldab ründajatel (häkkeritel) süstida pahatahtlikku koodi teistele lõppkasutajatele mõeldud veebisaidile. Seda tehes võivad ründajad pääseda juurde isiklikele andmetele, küpsistele, veebikaameratele ja veel muule. Lisateave saidiülese skriptimise kohta.

Kopeerige stringi alla ja kleepige sisendväljale.

https://placeimgxxx.com/320/320/any "onerror =" alarm ('xss-süst')

XSS ennetamine

See küsimus ei piirdu ainult reageerimisega; kuidas seda oma veebiarenduses vältida, on OWASPil hea ennetusmeetmete leht. Üks lähenemisviis XSS-rünnakute ärahoidmiseks on andmete desinfitseerimine. Seda saab teha nii serveri kui ka kliendi poolel; selles artiklis keskendume kliendipoolsele lahendusele.

XSS-i tõkestamine ohtlikultInnerSetHTML-iga

Esikülje sisu puhastamine ohtlikultSetInnerHTML-i kasutamisel on alati hea turvatava, isegi usaldusväärse tõeallika korral. Näiteks muudab teine ​​projekti säilitamise eest vastutav arendusmeeskond tõe allikat, mõistmata, kuidas see projekti saiti mõjutada võib. Niisugune muudatus võib põhjustada XSS-i kriitilise haavatavuse.

Jam3-s väldime igal võimalusel ohtlikultSetInnerHTML-i kasutamist. Kui see on vajalik, rakendame alati sanitaartingimuste turbekihte nii taga- kui ka esiosas. Lisaks lõime eslint-plugin-jam3 sisemuses ESLinti reegli, mille eesmärk on ohutu puhastamine ja ohustamine, et tuvastada ohtlikultSetInnerHTML-i vale kasutamist.

ESLinti reegel

Eeldan, et olete ESLintiga juba tuttav. Kui ei, siis alustage.

Paigaldamine

Peate installima eslint ja eslint-plugin-jam3:

$ npm i eslint eslint-plugin-jam3 -save-dev

Laiendage .eslintrc konfiguratsioonifaili pistikprogrammi, lisades jam3. Eslint-plugina eesliite võib ära jätta. Seejärel konfigureerige reeglid, lisades reeglitele jam3 / ohutu desinfitseerija. Märkus: soovitatav on veatase 2. Selle valiku korral on väljumiskoodiks 1. tõrgetase 1 annab hoiatuse, kuid ei mõjuta väljumiskoodi. 0 tähendab reegli väljalülitamist. Pistikprogramm kontrollib, kas ohtlikultSetInnerHTML-i edastatud sisu on mähitud sellesse desinfitseerimisfunktsiooni. Ümbrise funktsiooni nime saab muuta ka JSON-failis (puhastusvahend on vaikimisi ümbrise nimi).

Kuidas seda kasutada

Siin on ohtlikSetInnerHTML-i kasutamise ohtlik viis.

Ekraanipilt, mis näitab ohtlikultSetInnerHTML-i kasutamist ilma sanitaatorita

Kui reegel on lubatud, teatab teie koodiredaktor sanitaaraparaadi puudumisest ohtlikultSetInnerHTML-is. Selle artikli jaoks, mida me kasutame dompurify, leiate artikli lõpust saadaval olevate desinfitseerimisvahendite laiendatud loendi.

Puhastusvahendi ümbrisel peab olema nimi, selle artikli jaoks loome const sanitizer = dompurify.sanitize ;. Siiski on soovitatav luua desinfitseerimisutiliit, et valitud sanitizer kokku tõmmata.

Sanitizer raamatukogud

Meie meeskond on uurinud ja proovinud paljusid desinfitseerimisvahendeid ja oskab neid 3 raamatukogu soovitada.

võõristama

  • Eemaldage kogu räpane HTML ja saate puhta HTML-i andmed
  • npm nädalas allalaadimine 50 k +
  • 40 kaastöötajat
  • Teenitud 2800+ GitHub ️
  • 5,6KB MINIFITSEERITUD + GZIPPED

xss

  • Põgenege HTML-i olemuse tähemärkide eest, et vältida rünnakut, mis toimub lõppkasutajate jaoks loetamatu sisu muundamiseks
  • npm nädalas allalaadimine 30 k +
  • 18 kaastöötajat
  • 5,3KB MINIFITSEERITUD + GZIPPED
  • Teenitud 2500 + github ️

xss-filtrid

  • Põgenege HTML-i olemuse tähemärkide eest, et vältida rünnakut, mis toimub lõppkasutajate jaoks loetamatu sisu muundamiseks
  • npm nädalas allalaadimine 30 k +
  • 5 kaastöötajat
  • 2,1KB MINIFITSEERITUD + GZIPPED
  • Teenitud 900 + github ️

Järeldus

Kokkuvõtteks võib öelda, et teie projekti jaoks kõige sobivama puhastusraamatukogu leidmine on turvalisuse jaoks väga oluline. Võite proovida tutvuda GitHubi tähtedega, npm allalaadimisnumbrite ja hooldusprotseduuridega. Ohtlike puhastusvahendite kasutamine saidil eslint-plugin-jam3 on suurepärane valik, mis aitab tagada kõigi andmete nõuetekohase puhastamise ja saada kindluse, et teie projekt on XSS-i haavatavuste eest kaitstud.

MÄRKUS. Pidage meeles, et kliendipoolsete andmete desinfitseerimine on toimimise puudus. Näiteks võib kõigi andmete korraga desinfitseerimine esialgset laadimist aeglustada. Selle vältimiseks suuremahulistes veebirakendustes saate puhast puhastust rakendades kasutada laisk-puhastusmeetodit.

Edasine lugemine ja allikad

  • ESLinti arendaja juhend
  • ESLinti pistikprogrammi loomine
  • eslint-plugin-reageeri
  • eslint-plugin-jam3
  • Saidideülene skriptimine
  • XSS rünnaku petuleht

Kaasautorid

  • Donghyuk (Jacob) Jang / jacob.jang@jam3.com
  • Iraan Reyes / iran.reyes@jam3.com
  • Peter Altamirano / peter.altamirano@jam3.com
Jam3 on disaini- ja kogemusagentuur, mis teeb koostööd tulevikku mõtlevate kaubamärkidega kogu maailmast. Lisateabe saamiseks külastage meid aadressil jam3.com.