Frontend Academy · Oppitunti

Content Security Policy: nonce ja hash

Kirjoita tiukka CSP, jossa käytetään nonce-arvoja upotetuille skripteille, hasheja tunnetuille koodinpätkille ja report-uri-asetusta rikkomusten seurantaan tuotannossa.

Oppitunti 3/414 vaihetta

Content Security Policy: nonce ja hash on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

CSP:n kertaus

CSP on HTTP-otsake, joka määrittää sallittujen lähteiden luettelon selaimeen ladattaville resursseille — komentosarjoille, tyyleille, kuville, fonteille, kehyksille ja yhteyksille. Kerroksittainen suojaus tarkoittaa, että vaikka XSS ohittaisi suodattimet, CSP pysäyttää hyökkäysmerkkijonon usein silti.

CSP-otsakkeen rakenne

Jokainen direktiivi luettelee sallitut lähteet. 'self' tarkoittaa samaa alkuperää. Myös tietyt URL-osoitteet voidaan sallia.

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com;
  font-src 'self' https://fonts.gstatic.com;
  frame-ancestors 'none';
  base-uri 'self';

Yleiset direktiivit

default-src: kaiken oletusarvo. script-src: JavaScript. style-src: CSS. img-src: kuvat. connect-src: fetch/XHR/WebSocket. font-src: fontit. frame-ancestors: ketkä voivat upottaa sivusi iframeen (clickjacking-suojaus).

'unsafe-inline' — yleinen aukko

Monet sivustot lisäävät 'unsafe-inline'-määrityksen salliakseen sisäiset <script>-tagit ja onclick-attribuutit. Tämä kumoaa CSP:n päätarkoituksen — XSS-hyökkäysmerkkijonot voivat suorittua sisäisesti. Korvatkaa se nonceilla tai tiivisteillä.

Noncet — kertakäyttöinen sallittujen lähteiden luettelo

Luokaa jokaista pyyntöä varten satunnainen nonce. Merkitkää sallitut sisäiset komentosarjat tällä noncella. Selain sallii vain komentosarjat, joiden nonce vastaa annettua noncea.

// Server (Express middleware):
import crypto from 'crypto';

app.use((req, res, next) => {
  res.locals.nonce = crypto.randomBytes(16).toString('base64');
  res.setHeader('Content-Security-Policy',
    `script-src 'nonce-${res.locals.nonce}' 'strict-dynamic'`
  );
  next();
});

// Template:
<script nonce="<%= nonce %>">window.config = {...};</script>

'strict-dynamic'

Yhdistäkää nonce ja 'strict-dynamic': luotetut komentosarjat (noncea käyttävät komentosarjat) voivat ladata lisää komentosarjoja. Tällöin jokaista komentosarjan lähde-URL-osoitetta ei tarvitse luetella erikseen. Tämä on nykyinen CSP:n suositeltu käytäntö.

Tiivisteet — staattinen sallittujen lähteiden luettelo

Jos sisäiset komentosarjat ovat ennalta tunnettuja ja muuttumattomia (esimerkiksi koontiversio tuottaa aina saman käynnistyskatkelman), laskekaa sen SHA-256-tiiviste ja lisätkää se tiivistelähteeksi. Pyyntökohtaisia nonceja ei tarvita.

// Hash of: console.log('hi');
Content-Security-Policy: script-src 'sha256-XwCNuB+/RUgPlAACI+yHrUKqUsm4zlpGV/Q8tEUx0Q4='

Sisäisten tyylien tiivisteet

Sama menetelmä toimii sisäisille <style>-tageille: laskekaa niiden tiiviste ja lisätkää se style-src-direktiiviin. Se on CSS:n kannalta parempi ratkaisu kuin 'unsafe-inline'.

CSP:n raportointitila

Käyttäkää Content-Security-Policy-Report-Only-otsaketta käytännön testaamiseen ilman käytännön valvontaa. Rikkomukset raportoidaan päätepisteeseenne, mutta mitään ei estetä. Tämä sopii hyvin CSP:n vaiheittaiseen käyttöönottoon.

Content-Security-Policy-Report-Only: 
  default-src 'self';
  report-uri /csp-violations

// /csp-violations receives POSTs like:
{
  "csp-report": {
    "document-uri": "https://example.com/",
    "violated-directive": "script-src 'self'",
    "blocked-uri": "https://evil.com/x.js"
  }
}

report-to (nykyaikainen)

report-to yhdessä Reporting-Endpoints-määrityksen kanssa on report-uri-direktiivin nykyaikainen korvaaja. Tiedot ovat samat, mutta rakenne on jäsennellympi.

Reporting-Endpoints: csp="/csp-reports"
Content-Security-Policy: script-src 'self'; report-to csp

Kehysintegraatiot

Next.js: määrittäkää CSP middleware.ts-tiedostossa tai next.config.js-tiedoston otsakkeissa. Nuxt: käyttäkää nuxt-security-moduulia. Vite: määrittäkää kehityspalvelimen otsakkeet; tuotannossa määrittäkää ne palveluntarjoajan (Vercel, Netlify) otsakeasetuksissa.

// next.config.js
module.exports = {
  async headers() {
    return [{
      source: '/(.*)',
      headers: [{
        key: 'Content-Security-Policy',
        value: "default-src 'self'; script-src 'self' 'strict-dynamic'"
      }]
    }];
  }
};

CSP:n testaaminen

Avatkaa DevTools → Console: CSP-rikkomukset kirjataan sinne. Arvioikaa käytäntönne osoitteessa https://csp-evaluator.withgoogle.com/. Käyttäkää tuotannossa ensin raportointitilaa ja ottakaa käytäntö käyttöön vasta, kun kaikki rikkomukset on korjattu.

Pikatarkistus

Miksi 'unsafe-inline'-määritystä script-src-direktiivissä pidetään CSP:n heikkoutena?

Vastaa interaktiivisessa oppitunnissa

Kertaus: CSP:n parhaat käytännöt

Asettakaa Content-Security-Policy-otsake ja määrittäkää direktiivit resurssityypeittäin. Välttäkää 'unsafe-inline'-määritystä — käyttäkää nonceja ja 'strict-dynamic'-määritystä tai SHA-tiivisteitä. Asettakaa frame-ancestors 'none' (tai 'self'). Testatkaa ensin Report-Only-tilassa. Lähettäkää rikkomukset osoitteeseen /csp-violations (tai käyttäkää nykyaikaista report-to-määritystä). Kehykset tukevat CSP:tä middleware-ohjelmiston tai asetuksiin määritettyjen otsakkeiden kautta.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 41
Oppitunnit: 163

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Content Security Policy: nonce ja hash” ilmainen?

Kyllä – oppitunnin ”Content Security Policy: nonce ja hash” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Content Security Policy: nonce ja hash”?

Kirjoita tiukka CSP, jossa käytetään nonce-arvoja upotetuille skripteille, hasheja tunnetuille koodinpätkille ja report-uri-asetusta rikkomusten seurantaan tuotannossa. Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Content Security Policy: nonce ja hash”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?

Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

XSS:n torjunta: tulosteen koodaus ja CSP
CSRF: SameSite-evästeet ja tokenit
Content Security Policy: nonce ja hash
OAuth-virrat frontendissä

← Takaisin: Frontend Academy