PricingLoginStart free
Utvikling av nettleserutvidelser (Chrome og Edge) · leksjon

Content Security Policy (CSP)

Konfigurer og håndhev en robust Content Security Policy for å redusere injeksjonsangrep og kontrollere innlasting av ressurser.

Leksjon 3 av 411 trinn

Content Security Policy (CSP) er en gratis leksjon i Utvikling av nettleserutvidelser (Chrome og Edge) på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Utvikling av nettleserutvidelser (Chrome og Edge), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Utvikling av nettleserutvidelser (Chrome og Edge) inneholder totalt 4 leksjoner.

Hva er CSP?

Velkommen til Content Security Policy (CSP)! Denne kraftige sikkerhetsfunksjonen bidrar til å beskytte nettleserutvidelser og nettsider mot farlige angrep som Cross-Site Scripting (XSS).

Tenk på CSP som en dørvakt for utvidelsen. Den forteller nettleseren nøyaktig hvilke kilder som har lov til å laste inn skript, stiler, bilder og andre ressurser.

Slik fungerer CSP

CSP fungerer ved å definere et sett med «direktiver» i utvidelsens manifest.json-fil. Hvert direktiv angir gyldige kilder for en bestemt type ressurs.

  • Skript: Hvor JavaScript kan lastes inn fra.
  • Stiler: Hvor CSS kan hentes fra.
  • Bilder: Tillatte kilder for bilder.
  • Rammer: Hvilke URL-er som kan bygges inn i iframes.

Hvis en ressurs forsøker å lastes inn fra en kilde som ikke er godkjent, blokkerer nettleseren den!

Standard-CSP i MV3

For Manifest V3-utvidelser bruker Chrome og Edge automatisk en svært streng standard for Content Security Policy. Dette bidrar til å sikre et grunnleggende sikkerhetsnivå.

Du kan tilpasse eller overstyre denne standard-CSP-en ved hjelp av nøkkelen content_security_policy i manifest.json-filen. Dette er avgjørende når utvidelsen må laste inn ressurser fra bestemte eksterne domener.

`default-src`: Reservevalget

Direktivet default-src er reservevalget i CSP-en. Hvis du ikke angir et direktiv for en bestemt ressurstype, for eksempel script-src eller img-src, bruker nettleseren reglene som er definert i default-src.

Vanlige verdier:

  • 'self': Tillater ressurser bare fra utvidelsens eget opphav.
  • https://example.com: Tillater ressurser fra et bestemt HTTPS-domene.
  • *: Tillater ressurser fra hvilket som helst opphav (må brukes med stor forsiktighet!).

Begrense JavaScript (`script-src`)

Direktivet script-src er avgjørende for å forhindre Cross-Site Scripting (XSS). Det bestemmer hvor utvidelsen kan laste inn JavaScript-kode fra.

For utvidelser må du alltid unngå å bruke 'unsafe-inline' eller 'unsafe-eval'. Disse direktivene tillater innebygde skript og eval(), som utgjør store sikkerhetsrisikoer. Last inn skript fra utvidelsespakken eller fra uttrykkelig godkjente, sikre domener.

Manifest med CSP

Slik kan du definere en grunnleggende CSP i manifest.json for å tillate skript bare fra utvidelsespakken og bilder fra alle kilder:

{
  "name": "My Secure Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'; img-src *"
  }
}

Stiler, bilder og mer

Akkurat som med skript kan du kontrollere andre ressurstyper:

  • style-src: Definerer gyldige kilder for CSS-stilark. Bruk 'self' eller bestemte HTTPS-URL-er.
  • img-src: Angir tillatte kilder for bilder. Du kan bruke 'self', data: (for base64-bilder) eller bestemte bilde-CDN-er.

Vær alltid så restriktiv som mulig for å øke sikkerheten!

Utover grunnleggende direktiver

CSP tilbyr mange flere direktiver for detaljert kontroll:

  • object-src: Begrenser kilder for programtillegg som <object> og <embed>.
  • frame-src: Kontrollerer hvilke URL-er som kan lastes inn i <frame>, <iframe> og lignende.
  • connect-src: Begrenser hvor utvidelsen kan gjøre nettverksforespørsler, for eksempel med fetch() og XMLHttpRequest.

Prinsippet om minste privilegium

Når du definerer CSP-en, må du alltid følge «prinsippet om minste privilegium». Det betyr at du bare tillater nøyaktig det utvidelsen trenger, og ikke noe mer.

  • Start med den strengeste mulige CSP-en.
  • Legg gradvis til direktiver og kilder etter behov.
  • Unngå jokertegn (*) med mindre de er absolutt nødvendige og kan begrunnes.
  • Gå regelmessig gjennom CSP-en etter hvert som utvidelsen utvikler seg.

Kontroll av CSP-regler

Du bygger en utvidelse og vil tillate skript bare fra utvidelsens egne filer, samt bilder fra alle eksterne HTTPS-kilder. Hvilken av de følgende CSP-konfigurasjonene oppnår dette for extension_pages?

Besvar den i den interaktive leksjonen

Oppsummering: Sikkerhet med CSP

Godt jobbet! Du har lært at Content Security Policy (CSP) er en kritisk forsvarsmekanisme for nettleserutvidelser.

  • CSP bidrar til å forhindre XSS og andre injeksjonsangrep.
  • Den fungerer ved å hviteliste klarerte kilder for ressurser.
  • Manifest V3 håndhever en streng standard-CSP.
  • Bruk direktiver som default-src, script-src, style-src og img-src for å kontrollere innholdet.
  • Bruk alltid prinsippet om minste privilegium når du definerer CSP-en.

En riktig konfigurert CSP er avgjørende for å bygge sikre og robuste utvidelser!

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
12
Leksjoner
48
Start læringen gratisSe hele kurset

Ofte stilte spørsmål

Er leksjonen «Content Security Policy (CSP)» gratis?

Ja – hele teksten i «Content Security Policy (CSP)» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Utvikling av nettleserutvidelser (Chrome og Edge)-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Utvikling av nettleserutvidelser (Chrome og Edge) inneholder totalt 4 leksjoner.

Hva lærer jeg i «Content Security Policy (CSP)»?

Konfigurer og håndhev en robust Content Security Policy for å redusere injeksjonsangrep og kontrollere innlasting av ressurser. Du øver på Utvikling av nettleserutvidelser (Chrome og Edge) med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Utvikling av nettleserutvidelser (Chrome og Edge)?

Ingen tidligere erfaring er nødvendig. Utvikling av nettleserutvidelser (Chrome og Edge) på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Content Security Policy (CSP)»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Utvikling av nettleserutvidelser (Chrome og Edge)-leksjonen?

Ja. Alle Utvikling av nettleserutvidelser (Chrome og Edge)-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. Forstå avanserte tillatelser
  2. Sikker programmeringspraksis
  3. Content Security Policy (CSP)
  4. Valgfrie tillatelser og forespørsler under kjøring
← Tilbake til Utvikling av nettleserutvidelser (Chrome og Edge)