Content Security Policy React-sovelluksille

Content Security Policy (CSP) on HTTP-vastausotsake, joka kertoo selaimelle, mitkä sisällön lähteet ovat luotettuja. Määrittämällä tarkasti, mitkä skriptit, tyylit, kuvat ja fontit saavat latautua, CSP estää haitallisen lisätyn sisällön suorittamisen — vaikka XSS-haavoittuvuus sallisi hyökkääjän lisätä HTML:ää sivulle.

default-src 'self' määrittää perustason: kaikki resurssityypit (skriptit, tyylit, kuvat, fontit ja kehykset) voivat latautua vain samasta originista. script-src 'self' rajoittaa skriptien lataamisen samaan originiin ja estää ulkoisista CDN-palveluista ladatut skriptit, ellei niitä ole erikseen lueteltu. Nämä kaksi direktiiviä muodostavat yhdessä rajoittavan CSP:n perustan.

eval() muuntaa merkkijonon suoritettavaksi koodiksi ajonaikana — juuri tätä XSS-hyötykuormat tarvitsevat. CSP, jossa on script-src 'self' (ilman 'unsafe-eval'-arvoa), estää eval()-funktion sekä siihen liittyvät funktiot, kuten new Function() ja setTimeout(string). Tämä poistaa merkittävän luokan XSS-hyötykuormien suoritusmahdollisuuksia.

'strict-dynamic' direktiivissä script-src antaa luottamuksen jo luotettujen skriptien lataamille skripteille. Tämä mahdollistaa bundlereiden käyttämät dynaamiset skriptien latausmallit ilman, että jokainen CDN-osoite täytyy lisätä sallittujen luetteloon. Luotettu skripti voi ladata lisää skriptejä, ja nämä perivät luottamuksen.

Jos sovelluksen täytyy käyttää tiettyä inline-skriptiä (kuten analytiikan alustuskoodia), voitte laskea sen SHA-256-hajautusarvon ja lisätä arvon 'sha256-base64hash' direktiiviin script-src. Vain täsmälleen kyseistä hajautusarvoa vastaavat skriptit saavat suorittua inline-muodossa. Hyökkääjän lisäämällä skriptillä on eri hajautusarvo, joten se estetään.

Nonce on palvelimen jokaista pyyntöä varten luoma kryptografisesti satunnainen arvo. Palvelin lisää noncen sekä script-tagiin (<script nonce="abc123">) että CSP-otsakkeeseen (script-src 'nonce-abc123'). Vain oikean noncen sisältävät skriptit suoritetaan. Hyökkääjät eivät voi ennustaa noncea, joten lisätyt skriptit eivät voi käyttää sitä.

CSP tukee rikkomusten raportointia direktiivillä report-uri /csp-violation-endpoint tai uudemmalla report-to-direktiivillä. Kun selain estää resurssin CSP:n vuoksi, se lähettää JSON-raportin päätepisteeseen. Näiden raporttien seuranta auttaa tunnistamaan sekä oikeat määritysongelmat että käynnissä olevat hyökkäysyritykset.

Lisätkää Next.js:ssä CSP-otsakkeet middlewareen: luokaa middleware.ts, muodostakaa nonce, asettakaa Content-Security-Policy-otsake ja välittäkää nonce sivulle vastausotsakkeen kautta. Sivun layout lukee noncen otsakkeesta ja lisää sen kaikkiin inline-skripteihin ja style-tageihin.

Content-Security-Policy-Report-Only on testaustila: selain ei valvo mitään, vaan lähettää rikkomusraportit kaikesta, mikä olisi estetty. Ottakaa Report-Only-tila ensin käyttöön, korjatkaa kaikki rikkomukset ja vaihtakaa vasta sitten valvontaa toteuttavaan Content-Security-Policy-otsakkeeseen, jotta sovellus ei rikkoudu.

Kun CSP estää resurssin, Chrome DevToolsin konsoli näyttää punaisen virheilmoituksen, joka ilmoittaa estetyn URL-osoitteen ja rikotun direktiivin. Nämä ilmoitukset ovat erittäin hyödyllisiä kehityksen ja testauksen aikana. Jokainen rikkomus on ratkaistava joko korjaamalla käytäntöä, siirtämällä resurssi sallittuun lähteeseen tai käyttämällä noncea tai hajautusarvoa.

Käytännöllinen React-SPA:n CSP: default-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-NONCE'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.yourdomain.com; frame-ancestors 'none'. frame-ancestors 'none' estää lisäksi klikkauskaappauksen estämällä sovelluksen upottamisen iframe-kehyksiin.

CSP on HTTP-otsake, joka määrittää luotetut sisällön lähteet. default-src 'self' ja script-src 'self' estävät ulkoiset skriptit ja evalin. Inline-skriptit sallitaan hajautusarvojen tai nonce-arvojen avulla. 'strict-dynamic' tukee dynaamista skriptien lataamista. Testatkaa ennen käytännön valvonnan käyttöönottoa Content-Security-Policy-Report-Only-otsakkeella. Next.js toteuttaa CSP:n middlewarella. DevToolsin konsoli näyttää rikkomukset reaaliajassa.