Koder relatert til metainformasjon

Denne artikkelen forklarer koder relatert til metainformasjon.

Den forklarer <meta>-koden, inkludert punkter relatert til SEO, responsivt design og Content-Security-Policy.

YouTube Video

Koder relatert til metainformasjon

<meta>-koden

1<meta charset="UTF-8">
2<meta name="viewport" content="width=device-width, initial-scale=1.0">

• <meta>-koden gir metadata for HTML-dokumentet. Metadataene vises ikke på siden, men brukes av søkemotorer og nettlesere. <meta>-koden brukes til sidedeskripsjoner, nøkkelord, forfatterinformasjon og innstillinger for responsivt design.

<meta name="viewport">-koden

1<meta name="viewport" content="width=device-width, initial-scale=1">

• <meta name="viewport">-koden kontrollerer oppsettet og skaleringen av nettsider på ulike enheter. Den brukes ofte i responsivt design for å sikre riktig visning på mobile enheter.

<meta name="description">-koden

1<meta name="description" content="An example webpage">

• <meta name="description">-koden brukes til å gi en kort beskrivelse av innholdet på en nettside. Søkemotorer bruker denne beskrivelsen til å vise et sammendrag av siden i søkeresultater.

<meta name="keywords">-koden

1<meta name="keywords" content="HTML, CSS, JavaScript">

• <meta name="keywords">-koden gir en liste med nøkkelord som er relevante for sideinnholdet. Søkemotorer bruker disse nøkkelordene for bedre å forstå sideinnholdet.

<meta name="author">-koden

1<meta name="author" content="John Doe">

• <meta name="author">-koden spesifiserer forfatteren av nettsiden. Denne informasjonen brukes hovedsakelig av søkemotorer og verktøy for å nøyaktig identifisere sidens forfatter.

<meta http-equiv="refresh">-taggen

1<meta http-equiv="refresh" content="5; url=https://example.com">

• <meta http-equiv="refresh">-taggen brukes til å automatisk oppdatere siden eller omdirigere til en annen URL etter en angitt tid. Den er nyttig for å laste inn siden på nytt eller omdirigere brukeren.

<meta http-equiv="cache-control">-taggen

1<meta http-equiv="cache-control" content="no-cache">

• <meta http-equiv="cache-control">-taggen brukes til å kontrollere hurtigbufferoppførselen til websiden. Den kan spesifisere om siden skal mellomlagres eller revalideres ved senere tilgang.

<meta http-equiv="expires">-taggen

1<meta http-equiv="expires" content="Tue, 01 Jan 2025 00:00:00 GMT">

• <meta http-equiv="expires">-taggen angir en utløpsdato for sideinnholdet. Når den angitte datoen har passert, blir innholdet utdatert, og nettleseren blir bedt om å hente en ny versjon.

<meta http-equiv="X-UA-Compatible">-taggen

1<meta http-equiv="X-UA-Compatible" content="IE=edge">

• <meta http-equiv="X-UA-Compatible">-taggen brukes til å angi kompatibilitetsmodus for Internet Explorer. Denne taggen sikrer at nettleseren bruker riktig versjon av renderingsmotoren for å vise siden.

<meta http-equiv="content-security-policy">-taggen

http-equiv="content-security-policy"-attributtet i en HTML meta-tagg er en funksjon for å bruke spesifikke sikkerhetsregler i nettleseren for å forbedre sikkerheten til websiden. Ved å bruke dette attributtet kan nettstedutviklere angi retningslinjer for ressurslasting og skriptutførelse for å forhindre angrep som XSS (Cross-Site Scripting) og datainjeksjon.

Hva er Content-Security-Policy?

Content-Security-Policy (CSP) er en type HTTP-header som brukes til å kontrollere hvilke eksterne ressurser (bilder, skript, stilark osv.) en webside kan laste inn og hvilke typer kode som kan kjøres. Den sendes vanligvis som en HTTP-header, men kan også defineres i HTML ved hjelp av en meta-tagg. Denne metoden gjør det mulig å spesifisere CSP på klientsiden i stedet for å sette topptekster på serversiden.

For eksempel kan du sette CSP i HTML meta-taggen som følger:.

1<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://example.com; script-src 'self' https://apis.google.com">

I dette eksemplet er følgende retningslinjer satt:

• default-src 'self': Grunnleggende, alle ressurser lastes kun fra samme opprinnelse (seg selv).
• img-src https://example.com: Bilder lastes kun fra https://example.com.
• script-src 'self' https://apis.google.com: Skript kan kun kjøres fra samme opprinnelse eller fra https://apis.google.com.

Forskjeller mellom http-equiv og HTTP-headere

Vanligvis sendes Content-Security-Policy fra serveren til klienten som en HTTP-header. Men hvis du setter det på klientsiden ved hjelp av meta-taggen, kan det skrives direkte inn i HTML-en.

Det er imidlertid noen viktige forskjeller mellom å sette det som en HTTP-header og å spesifisere det med en meta-tagg:

1. Prioritet: En CSP sendt via HTTP-headere har forrang over en som er spesifisert i en meta-tagg. Dette betyr at hvis en CSP er satt på serversiden, vil den ikke bli overstyrt av en meta-tagg brukt på klientsiden.

2. Applikasjonstidspunkt: En CSP spesifisert via HTTP-headere brukes før siden lastes. På den annen side brukes en CSP spesifisert via en meta-tagg når HTML-en blir tolket, så ressurser kan allerede være lastet.

Direktiver tilgjengelig i CSP

I CSP brukes ulike direktiver til å spesifisere retningslinjer som tillater eller forbyr lasting og kjøring av visse typer ressurser. Typiske direktiver inkluderer følgende:.

• default-src: Spesifiserer standardkildepolicyen for alle ressurser. Den gjelder for ressurser som ikke er spesifisert av andre direktiver.
• script-src: Spesifiserer kilden for JavaScript. For å forhindre XSS-angrep kan du begrense lasting av skript fra eksterne nettsteder.
• style-src: Spesifiserer kilden for CSS. Ved å begrense lasting av stilark fra eksterne kilder kan du forhindre angrep på stilene til nettstedet ditt.
• img-src: Spesifiserer kilden for bilder. Du kan begrense lasting av bilder fra eksterne kilder.
• connect-src: Spesifiserer URL-er som er tillatt for XMLHttpRequests og WebSocket-tilkoblinger. Dette sikrer sikkerheten til eksterne API- og WebSocket-kommunikasjoner.

Ved å kombinere disse direktivene kan du lage detaljerte retningslinjer for ressurser på nettsiden din.

Praktiske CSP-innstillinger for å forbedre sikkerheten

Nedenfor er et eksempel på CSP-innstillinger for å forbedre sikkerheten på nettstedet ditt. Dette kan redusere risikoen for XSS-angrep og datalekkasjer.

1<meta http-equiv="Content-Security-Policy"
2    content="default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none'; style-src 'self'; base-uri 'self'; form-action 'self';">

Følgende retningslinjer brukes med denne konfigurasjonen:

• default-src 'self': Alle ressurser lastes kun fra samme opprinnelse.
• script-src 'self' https://trusted-cdn.com: Skript lastes kun fra samme opprinnelse eller en pålitelig CDN.
• object-src 'none': object-taggen brukes ikke. Dette for å forhindre Flash- eller plugin-baserte angrep.
• style-src 'self': Stilark lastes kun fra opprinnelsen selv.
• base-uri 'self': URL-basisen satt av <base>-taggen er begrenset til opprinnelsen selv.
• form-action 'self': Mål for skjema-innsending er begrenset til opprinnelsen selv. Dette reduserer risikoen for at skjema-data sendes til eksterne nettsteder.

Konklusjon

Ved å bruke http-equiv="content-security-policy" til å definere CSP innen HTML, er det mulig å forbedre sikkerheten til nettsiden. En riktig konfigurert CSP er et kraftig verktøy som reduserer risikoen for XSS-angrep og datalekkasjer og beskytter nettstedet ditt.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video