PricingLoginStart free
Udvikling af browserudvidelser til Chrome og Edge · Lektion

Content Security Policy (CSP)

Konfigurér og håndhæv en robust Content Security Policy for at begrænse injektionsangreb og styre indlæsningen af ressourcer.

Lektion 3 af 411 trin

Content Security Policy (CSP) er en gratis Udvikling af browserudvidelser til Chrome og Edge-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Udvikling af browserudvidelser til Chrome og Edge, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Udvikling af browserudvidelser til Chrome og Edge-kurset indeholder 4 lektioner i alt.

Hvad er CSP?

Velkommen til Content Security Policy (CSP)! Denne effektive sikkerhedsfunktion hjælper med at beskytte dine browserudvidelser og websider mod farlige angreb som cross-site scripting (XSS).

Tænk på CSP som en dørmand for din udvidelse. Den fortæller browseren præcis, hvilke kilder der må indlæse scripts, typografi, billeder og andre ressourcer.

Sådan fungerer CSP

CSP fungerer ved at definere et sæt "direktiver" i din udvidelses manifest.json-fil. Hvert direktiv angiver gyldige kilder for en bestemt type ressource.

  • Scripts: Hvor JavaScript må indlæses fra.
  • Typografi: Hvor CSS må komme fra.
  • Billeder: Tilladte kilder til billeder.
  • Rammer: Hvilke URL'er der må indlejres i iframes.

Hvis en ressource forsøger at blive indlæst fra en ikke-godkendt kilde, blokerer browseren den!

MV3's standard-CSP

For Manifest V3-udvidelser anvender Chrome og Edge automatisk en meget streng standardpolitik for indholdssikkerhed. Det hjælper med at sikre et grundlæggende sikkerhedsniveau.

Du kan tilpasse eller tilsidesætte denne standard-CSP ved hjælp af nøglen content_security_policy i din manifest.json-fil. Det er afgørende, når din udvidelse skal indlæse ressourcer fra bestemte eksterne domæner.

`default-src`: Den generelle reserve

Direktivet default-src fungerer som reserve for din CSP. Hvis du ikke angiver et direktiv for en bestemt ressourcetype, f.eks. script-src eller img-src, bruger browseren reglerne i default-src.

Almindelige værdier:

  • 'self': Tillader kun ressourcer fra udvidelsens egen oprindelse.
  • https://example.com: Tillader ressourcer fra et bestemt HTTPS-domæne.
  • *: Tillader ressourcer fra enhver oprindelse (brug med stor forsigtighed!).

Begrænsning af JavaScript (`script-src`)

Direktivet script-src er afgørende for at forhindre cross-site scripting (XSS). Det bestemmer, hvor din udvidelse må indlæse JavaScript-kode fra.

For udvidelser skal du altid undgå at bruge 'unsafe-inline' eller 'unsafe-eval'. Disse direktiver tillader indlejrede scripts og eval(), hvilket udgør store sikkerhedsrisici. Indlæs scripts fra din udvidelsespakke eller fra udtrykkeligt hvidlistede, sikre domæner.

Manifest med CSP

Sådan definerer du en grundlæggende CSP i din manifest.json, så scripts kun tillades fra din udvidelsespakke og billeder fra enhver kilde:

{
  "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 *"
  }
}

Typografi, billeder og mere

Ligesom med scripts kan du styre andre ressourcetyper:

  • style-src: Definerer gyldige kilder til CSS-typografiark. Brug 'self' eller bestemte HTTPS-URL'er.
  • img-src: Angiver tilladte kilder til billeder. Du kan bruge 'self', data: (til base64-billeder) eller bestemte billed-CDN'er.

Vær altid så restriktiv som muligt for at styrke sikkerheden!

Ud over de grundlæggende direktiver

CSP tilbyder mange flere direktiver til detaljeret styring:

  • object-src: Begrænser kilder til plugins som <object> og <embed>.
  • frame-src: Styrer, hvilke URL'er der må indlæses i <frame>, <iframe> osv.
  • connect-src: Begrænser, hvor din udvidelse må sende netværksanmodninger, f.eks. med fetch() og XMLHttpRequest.

Princippet om mindst mulige privilegier

Når du definerer din CSP, skal du altid følge "princippet om mindst mulige privilegier". Det betyder, at du kun tillader præcis det, din udvidelse har brug for, og intet mere.

  • Begynd med den strengest mulige CSP.
  • Tilføj gradvist direktiver og kilder efter behov.
  • Undgå jokertegn (*), medmindre de er absolut nødvendige og kan begrundes.
  • Gennemgå regelmæssigt din CSP, efterhånden som din udvidelse udvikler sig.

Kontrol af CSP-regler

Du bygger en udvidelse og vil kun tillade scripts fra udvidelsens egne filer samt billeder fra enhver ekstern HTTPS-kilde. Hvilken af følgende CSP-konfigurationer vil opnå dette for extension_pages?

Besvar den i den interaktive lektion

Opsummering: Sikkerhed med CSP

Godt gået! Du har lært, at Content Security Policy (CSP) er en vigtig forsvarsmekanisme for dine browserudvidelser.

  • CSP hjælper med at forhindre XSS og andre injektionsangreb.
  • Den fungerer ved at hvidliste betroede kilder til ressourcer.
  • Manifest V3 håndhæver en streng standard-CSP.
  • Brug direktiver som default-src, script-src, style-src og img-src til at styre indholdet.
  • Anvend altid princippet om mindst mulige privilegier, når du definerer din CSP.

En korrekt konfigureret CSP er afgørende for at bygge sikre og robuste udvidelser!

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
12
Lektioner
48
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Content Security Policy (CSP)” gratis?

Ja — hele teksten til “Content Security Policy (CSP)” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Udvikling af browserudvidelser til Chrome og Edge-kurset, skal du opgradere til CoddyKit PRO. Udvikling af browserudvidelser til Chrome og Edge-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Content Security Policy (CSP)”?

Konfigurér og håndhæv en robust Content Security Policy for at begrænse injektionsangreb og styre indlæsningen af ressourcer. Du øver dig i Udvikling af browserudvidelser til Chrome og Edge med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Udvikling af browserudvidelser til Chrome og Edge?

Der kræves ingen tidligere erfaring. Udvikling af browserudvidelser til Chrome og Edge på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Content Security Policy (CSP)”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Udvikling af browserudvidelser til Chrome og Edge-lektion?

Ja. Alle Udvikling af browserudvidelser til Chrome og Edge-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Forstå avancerede tilladelser
  2. Sikker kodning
  3. Content Security Policy (CSP)
  4. Valgfrie tilladelser og anmodninger under kørsel
← Tilbage til Udvikling af browserudvidelser til Chrome og Edge