window.pipedriveLeadboosterConfig = { base: pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2, } ;(function () { var w = window if (w.LeadBooster) { console.warn('LeadBooster on jo olemassa') } else { w.LeadBooster = { q: [], on: function (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: function (n) { this.q.push({ t: 't', n: n }) }, } } })() XSS Turvallisuus suosituissa Javascript-kirjastoissa. Pitäisikö minun silti olla huolissani? - The Codest
Codest
  • Tietoa meistä
  • Palvelut
    • Ohjelmistokehitys
      • Frontend-kehitys
      • Backend-kehitys
    • Staff Augmentation
      • Frontend-kehittäjät
      • Backend-kehittäjät
      • Tietoinsinöörit
      • Pilvi-insinöörit
      • QA insinöörit
      • Muut
    • Se neuvoa-antava
      • Tilintarkastus & konsultointi
  • Toimialat
    • Fintech & pankkitoiminta
    • E-commerce
    • Adtech
    • Terveysteknologia
    • Valmistus
    • Logistiikka
    • Autoteollisuus
    • IOT
  • Arvo
    • TOIMITUSJOHTAJA
    • CTO
    • Toimituspäällikkö
  • Tiimimme
  • Tapaustutkimukset
  • Tiedä miten
    • Blogi
    • Tapaamiset
    • Webinaarit
    • Resurssit
Työurat Ota yhteyttä
  • Tietoa meistä
  • Palvelut
    • Ohjelmistokehitys
      • Frontend-kehitys
      • Backend-kehitys
    • Staff Augmentation
      • Frontend-kehittäjät
      • Backend-kehittäjät
      • Tietoinsinöörit
      • Pilvi-insinöörit
      • QA insinöörit
      • Muut
    • Se neuvoa-antava
      • Tilintarkastus & konsultointi
  • Arvo
    • TOIMITUSJOHTAJA
    • CTO
    • Toimituspäällikkö
  • Tiimimme
  • Tapaustutkimukset
  • Tiedä miten
    • Blogi
    • Tapaamiset
    • Webinaarit
    • Resurssit
Työurat Ota yhteyttä
Takaisin nuoli PALAA TAAKSE
2019-08-26
Ohjelmistokehitys

XSS Turvallisuus suosituissa Javascript-kirjastoissa. Pitäisikö minun silti olla huolissani?

Daniel Grek

Suosituimpien Javascript-kirjastojen osalta on myönnettävä, että niiden kehityshistorian aikana (9, 6 ja 5 vuotta Angular:n, React:n ja Vue:n osalta) on tapahtunut paljon hyvää tietoturvan osalta, erityisesti XSS-hyökkäysten haavoittuvuuden osalta. Tässä artikkelissa käsitellään kuitenkin pieniä ansoja ja periaatteita, jotka kehittäjien olisi edelleen otettava huomioon.

XSS

Elämme kehysten, ei kielten, aikakautta. Tämä tarkoittaa sitä, että ohjelmoijien pitäisi voida huolehtia vähemmän monista kehitystyön osa-alueista, myös tietoturvasta. Useimmissa nykyisissä backend-kehyksissä on tietoturvamoduulit, joita ulkopuoliset, erikoistuneet yritykset ja suuret yhteisöt testaavat. Siksi, heikentynyt turvallisuustietoisuus voi olla ilmeistä esimerkiksi nuorten ohjelmoijien välillä, jotka ottavat enemmän vastuuta tuotteista, erityisesti freelancerina.

Yksi yleisimmistä hyökkäyksistä sovelluksen asiakaspuolelle on XSS (Cross-Site Scripting). Se toteutetaan syöttämällä ajettavia asiakaspuolen skriptejä verkkosovelluksiin [1] ja se käyttää toteutettuja HTML-renderöintimenetelmiä tai Javascript koodi arvioijat, jotka suorittavat sen. XSS on suhteellisen tuottoisaa, koska siitä voidaan kerätä monia erilaisia tietoja, kuten istunnon evästeitä tai käyttäjätietoja, ja se voi asentaa seurantasovelluksen, kuten keyloggerin, mikä tekee siitä vaarallisen sekä käyttäjille että yritysten omistajille. Joskus XSS:n sallimiseksi sivulle tehdään muitakin hyökkäysmuotoja, kuten SQL-injektio.

Esimerkki

Sivun kirjautumislomake tekee loginName-parametrin, joka lähetetään GET-pyynnössä kirjautumisnimen syötteessä. Arvoa ei käsitellä palvelimella eikä sovelluksen asiakaspuolella. Pyytämällä: http://localhost:8080/login?name=<script>alert(document.cookies)</script>
koodia suoritetaan ja tietoja paljastetaan

Tämä on esimerkki heijastunut XSS-hyökkäys, jossa skriptejä syötetään uhrille toimitetun, erityisesti valmistellun URL-osoitteen kautta, joka näkyy palvelimen vastauksessa. Muita tunnettuja suosittuja hyökkäysmuotoja ovat seuraavat:

  • Tallennettu XSS suoritetaan palvelinpuolelle tallennetuilla syötetyillä tiedoilla, yleensä sovelluksessa käytettävissä olevilla lomakkeilla. Asiakassovellus renderöi koodia, joka on tallennettu esimerkiksi tietokantaan.
  • DOM XSS suorittaa XSS-hyökkäyksen ilman palvelinpuolen käyttöä. Artikkelin myöhemmässä osassa keskitymme tähän hyökkäysmuotoon.

Nykyiset haavoittuvuudet React- ja Vue-kirjastoissa

Nykyisissä React/Vue-versioissa oli havaittu kaksi merkittävää ongelmaa, joita ei ollut vielä virallisesti korjattu. Ensimmäinen haavoittuvuus on luonteeltaan samanlainen kaikissa kehyksissä ja liittyy menetelmiin, jotka mahdollistavat raa'an HTML:n renderöinnin malleissa: v-html ja dangerouslySetInnerHTML, vastaavasti Vue ja React. Jokaisessa dokumentaatiossa [2] kerrotaan, että harkitsematon käyttö voi altistaa käyttäjät XSS-hyökkäyksille. Jos ongelma ei ole ratkaistavissa muilla vaihtoehdoilla, varmista, että tiedot ovat suodatettu ja karannut. Vaikka ne ovat vaarallisia, sinun ei pidä odottaa, että nämä menetelmät korjataan. Käytä niitä omalla vastuullasi.

Vuoden 2018 ensimmäisellä neljänneksellä React:ssä havaittiin suuri virhe, joka mahdollisti koodin suoran suorittamisen asettamalla tag-elementin ominaisuuden. Esimerkkikoodin välittäminen attribuuttien sisällä, kuten esimerkiksi javascript:alert(1) ja renderöidyn linkin suorittaminen suorittaa koodin. Tämä ongelma [4] on edelleen avoin, eikä korjausta ole valmisteltu ja yhdistetty, joten varmista, että koodisi on turvallista. Virallisessa keskustelussa ehdotetuissa esimerkeissä ehdotetaan tapoja tämän ongelman ratkaisemiseksi.

Jos uusimpiin versioihin päivittäminen ei ole mahdollista, varmista, että vanhat ongelmat eivät aiheuta ongelmia varmistamalla, että koodisi ei ole alttiina:

  • lapsi solmu injektio - React, käyttö React.createElementti [5]
  • palvelinpuolen renderöinti - React/Vue [6]
  • CSS-injektio [8]

Kyse on edelleen Javascriptistä. Kyse on edelleen front-end

Älä unohda, että itse kehysten tai kirjastojen lisäksi Javascript-kielessä on joitakin vaarallisia toimintoja, joita on vältettävä tai käytettävä varoen. Ne liittyvät yleensä DOM-käsittelyyn tai skriptin suorittamiseen. eval() edustaa tällaisia lippulaivafunktioita, ja se on erittäin vaarallinen, koska se suorittaa annetun merkkijonokoodin suoraan [9]. Tutki myös koodiasi tarkemmin, kun löydät jonkin näistä funktioista:

  • document.write
  • document.writeln
  • (elementti).innerHTML
  • (elementti).outerHTML
  • (elementti).insertAdjacentHTML

Tällaisten haavoittuvien kohtien löytämisessä voi olla apua, jos käytetään lintereitä, joissa on asianmukaiset säännöt. On myös paljon avoimia tai kaupallisia koodianalysaattoreita, jotka voivat auttaa havaitsemaan tietoturva-aukkoja kehitetyssä koodissa.

Riippumatta siitä, mikä kirjasto/kehys valitaan, meidän on silti muistettava front-end-kehitykseen liittyvät perusperiaatteet. Varmista ensinnäkin aina, että ulkoinen koodi, jonka syötät, on peräisin luotettavasta lähteestä. Tilintarkastus riippuvuudet ja valitse ne viisaasti. Jotkin niistä voivat sisältää vakavia haavoittuvuuksia, jotka paljastavat koodisi, vaikka itse koodissa olisi kaikki kunnossa. Voit lukea lisää riippuvuuksien turvallisuudesta täältä:

https://thecodest.co/blog/security-in-javascript-packages/

Pitäisikö sinun silti olla huolissasi?

Kyllä - ja kehotan kaikkia olemaan luottamatta ulkoisiin kirjastoihin tai itseensä tietoturvan suhteen. Riippumatta siitä, kuinka turvalliseksi oletat ohjelmistosi olevan, pyri aina testaamaan sitä mahdollisimman paljon yleisimpien hyökkäysmuotojen osalta [10].

  1. https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
  2. https://vuejs.org/v2/guide/syntax.html#Raw-HTML
  3. https://github.com/facebook/react/issues/12441
  4. http://danlec.com/blog/xss-via-a-spoofed-react-element
  5. https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-applications-2bdffbcc1fa0
  6. https://github.com/dotboris/vuejs-serverside-template-xss
  7. https://frontarm.com/james-k-nelson/how-can-i-use-css-in-js-securely/
  8. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#Do_not_ever_use_eval!

Lue lisää:

5 virhettä, joita sinun tulisi välttää, kun ylläpidät projektia PHP:ssä.

PHP Kehitys. Symfony Console Component - Vinkkejä ja niksejä

Miksi tarvitsemme Symfony Polyfilliä (... ja miksi meidän ei pitäisi)

Aiheeseen liittyvät artikkelit

Ohjelmistokehitys

Tulevaisuuden web-sovellusten rakentaminen: The Codest:n asiantuntijatiimin näkemyksiä

Tutustu siihen, miten The Codest loistaa skaalautuvien, interaktiivisten verkkosovellusten luomisessa huipputeknologian avulla ja tarjoaa saumattomia käyttäjäkokemuksia kaikilla alustoilla. Lue, miten asiantuntemuksemme edistää digitaalista muutosta ja liiketoimintaa...

THECODEST
Ohjelmistokehitys

Top 10 Latviassa toimivaa ohjelmistokehitysyritystä

Tutustu Latvian parhaisiin ohjelmistokehitysyrityksiin ja niiden innovatiivisiin ratkaisuihin uusimmassa artikkelissamme. Tutustu siihen, miten nämä teknologiajohtajat voivat auttaa nostamaan liiketoimintaasi.

thecodest
Yritys- ja skaalausratkaisut

Java-ohjelmistokehityksen perusteet: A Guide to Outsourcing Successfully

Tutustu tähän keskeiseen oppaaseen Java-ohjelmistokehityksen onnistuneesta ulkoistamisesta tehokkuuden parantamiseksi, asiantuntemuksen saamiseksi ja projektin onnistumiseksi The Codestin avulla.

thecodest
Ohjelmistokehitys

Perimmäinen opas ulkoistamiseen Puolassa

Ulkoistamisen lisääntyminen Puolassa johtuu taloudellisesta, koulutuksellisesta ja teknologisesta kehityksestä, joka edistää tietotekniikan kasvua ja yritysystävällistä ilmapiiriä.

TheCodest
Yritys- ja skaalausratkaisut

Täydellinen opas IT-tarkastustyökaluihin ja -tekniikoihin

Tietotekniikan tarkastuksilla varmistetaan turvalliset, tehokkaat ja vaatimustenmukaiset järjestelmät. Lue lisää niiden merkityksestä lukemalla koko artikkeli.

Codest
Jakub Jakubowicz teknologiajohtaja ja toinen perustaja

Tilaa tietopankkimme ja pysy ajan tasalla IT-alan asiantuntemuksesta.

    Tietoa meistä

    The Codest - Kansainvälinen ohjelmistokehitysyritys, jolla on teknologiakeskuksia Puolassa.

    Yhdistynyt kuningaskunta - pääkonttori

    • Toimisto 303B, 182-184 High Street North E6 2JA
      Lontoo, Englanti

    Puola - Paikalliset teknologiakeskukset

    • Fabryczna Office Park, Aleja
      Pokoju 18, 31-564 Krakova
    • Brain Embassy, Konstruktorska
      11, 02-673 Varsova, Puola

      Codest

    • Etusivu
    • Tietoa meistä
    • Palvelut
    • Tapaustutkimukset
    • Tiedä miten
    • Työurat
    • Sanakirja

      Palvelut

    • Se neuvoa-antava
    • Ohjelmistokehitys
    • Backend-kehitys
    • Frontend-kehitys
    • Staff Augmentation
    • Backend-kehittäjät
    • Pilvi-insinöörit
    • Tietoinsinöörit
    • Muut
    • QA insinöörit

      Resurssit

    • Faktoja ja myyttejä yhteistyöstä ulkoisen ohjelmistokehityskumppanin kanssa
    • Yhdysvalloista Eurooppaan: Miksi amerikkalaiset startup-yritykset päättävät muuttaa Eurooppaan?
    • Tech Offshore -kehityskeskusten vertailu: Tech Offshore Eurooppa (Puola), ASEAN (Filippiinit), Euraasia (Turkki).
    • Mitkä ovat teknologiajohtajien ja tietohallintojohtajien tärkeimmät haasteet?
    • Codest
    • Codest
    • Codest
    • Privacy policy
    • Verkkosivuston käyttöehdot

    Tekijänoikeus © 2025 by The Codest. Kaikki oikeudet pidätetään.

    fiFinnish
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fr_FRFrench pl_PLPolish arArabic it_ITItalian jaJapanese ko_KRKorean es_ESSpanish nl_NLDutch etEstonian elGreek fiFinnish