Sikker programmeringspraksis
Implementer sikkerhetsprinsipper for å forhindre vanlige sårbarheter som cross-site scripting (XSS) og datalekkasje.
Sikker programmeringspraksis er en gratis leksjon i Utvikling av nettleserutvidelser (Chrome og Edge) på CoddyKit. Dette er leksjon 2 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.
Hvorfor sikkerhet er viktig for utvidelser
Nettleserutvidelser har betydelige privilegier og samhandler tett med brukerdata og nettleserøkter. Derfor er sikker kodepraksis helt avgjørende.
Dårlig sikkerhet kan føre til alvorlige sårbarheter som Cross-Site Scripting (XSS) og datalekkasje, noe som kan svekke brukernes personvern og systemets integritet.
Forstå XSS-sårbarheter
Cross-Site Scripting (XSS) oppstår når en angriper injiserer skadelige skript i en klarert nettapplikasjon, eller i vårt tilfelle i brukergrensesnittet eller innholdsskriptene til utvidelsen.
Disse skriptene kan stjele sensitive data, kapre brukerøkter eller til og med endre utseendet på nettsteder, alt innenfor rammen av tillatelsene til utvidelsen.
Faren ved `innerHTML`
En av de vanligste årsakene til XSS i webutvikling, og dermed også i utvidelser, er bruk av innerHTML med data som ikke er klarert.
Hvis du henter tekst direkte fra en bruker, for eksempel fra et skjemafelt, en URL-parameter eller til og med innholdet på en nettside, og setter den inn i DOM-en ved hjelp av innerHTML, vil eventuelle innebygde skript bli kjørt.
Sikker DOM-manipulering: `textContent`
For å forhindre XSS når du viser ren tekst som ikke er klarert, må du alltid bruke egenskapen textContent i stedet for innerHTML.
textContent behandler all inndata som ren tekst, slik at HTML-tagger og skript ikke blir tolket og kjørt av nettleseren. Dette er ditt første forsvar.
Bruk av `textContent` i praksis
Prøv å kjøre dette enkle JavaScript-eksempelet. Legg merke til hvordan textContent gjengir skriptet trygt som ren tekst, mens innerHTML på farlig vis vil forsøke å kjøre det.
const userInput = "<script>alert('XSS!');</script>";
// Simulate a DOM element
const divSafe = { textContent: '' };
const divUnsafe = { innerHTML: '' };
// Safe way: Using textContent
divSafe.textContent = userInput;
console.log("Safe (textContent):", divSafe.textContent);
// Unsafe way: Using innerHTML (DO NOT DO THIS!)
divUnsafe.innerHTML = userInput;
console.log("Unsafe (innerHTML):", divUnsafe.innerHTML);Rensing av HTML ved behov
Hva om du faktisk trenger å tillate *noe* HTML, for eksempel fet eller kursiv tekst, fra brukerinndata? I slike tilfeller er ikke textContent tilstrekkelig.
Du må bruke et robust og godt vedlikeholdt bibliotek for HTML-rensing, for eksempel DOMPurify. Slike biblioteker tolker HTML, fjerner skadelige tagger og attributter og returnerer trygg HTML. Lag aldri ditt eget HTML-rensebibliotek.
Unngå dynamisk kodekjøring
Funksjoner som eval(), new Function(), setTimeout(string) og setInterval(string) kjører JavaScript-kode fra en tekststreng.
Dette utgjør en betydelig sikkerhetsrisiko. Hvis en angriper kan kontrollere tekststrengargumentet, kan vedkommende kjøre vilkårlig kode i konteksten til utvidelsen, og potensielt omgå andre sikkerhetstiltak.
Beskyttelse mot datalekkasje
Datalekkasje oppstår når sensitive brukerdata utilsiktet eller med hensikt blir eksponert for uvedkommende tredjeparter. Dette er en kritisk bekymring for utvidelser.
Vær svært forsiktig når du sender data fra utvidelsen til eksterne servere. Kontroller alltid målet, bruk sikre protokoller (HTTPS), og krypter sensitiv informasjon ved behov.
Prinsippet om minste privilegium
Når du deklarerer tillatelser i utvidelsens manifest.json, må du alltid følge prinsippet om minste privilegium.
Be bare om de absolutte minimumstillatelsene som kreves for funksjonaliteten til utvidelsen. For omfattende tillatelser øker angrepsflaten og risikoen for datalekkasje hvis utvidelsen blir kompromittert.
Kontroll av beste sikkerhetspraksis
Hvilke av de følgende anbefales som sikker kodepraksis for nettleserutvidelser?
Oppsummering: Slik holder du utvidelser sikre
Du har lært viktige sikkerhetsrutiner for å bygge robuste nettleserutvidelser:
- Rens all inndata: Bruk
textContentfor ren tekst, og bruk robuste biblioteker som DOMPurify for HTML. - Unngå dynamisk kode: Kjør aldri kode fra tekststrenger du ikke stoler på, ved hjelp av funksjoner som
eval(). - Minste privilegium: Be bare om de nødvendige tillatelsene utvidelsen trenger.
- Forhindre datalekkasje: Vær forsiktig når du overfører brukerdata, og sørg for sikre mål og protokoller.
Ved å ta i bruk disse rutinene bygger du mer pålitelige utvidelser som beskytter brukernes personvern og sikkerhet.
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
Ofte stilte spørsmål
Er leksjonen «Sikker programmeringspraksis» gratis?
Ja – hele teksten i «Sikker programmeringspraksis» 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 «Sikker programmeringspraksis»?
Implementer sikkerhetsprinsipper for å forhindre vanlige sårbarheter som cross-site scripting (XSS) og datalekkasje. 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 2 av 4.
Hvor lang tid tar leksjonen «Sikker programmeringspraksis»?
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
- Forstå avanserte tillatelser
- Sikker programmeringspraksis
- Content Security Policy (CSP)
- Valgfrie tillatelser og forespørsler under kjøring