Articles
Introduktion til HTML
Tags relateret til metaoplysninger

Tags relateret til metaoplysninger

Denne artikel forklarer tags relateret til metaoplysninger.

Den forklarer <meta>-tagget, inklusiv punkter relateret til SEO, responsivt design og Content-Security-Policy.

YouTube Video

Tags relateret til metaoplysninger

<meta>-tag 

1<meta charset="UTF-8">
2<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • <meta>-tagget giver metadata til HTML-dokumentet. Metadataen vises ikke på siden, men bruges af søgemaskiner og browsere. <meta>-tagget bruges til sidebeskrivelser, nøgleord, forfatterinformation og indstillinger for responsivt design.

<meta name="viewport">-tag 

1<meta name="viewport" content="width=device-width, initial-scale=1">
  • <meta name="viewport">-tagget styrer layoutet og skaleringen af websider på forskellige enheder. Det bruges ofte i responsivt design for at sikre korrekt visning på mobile enheder.

<meta name="description">-tag 

1<meta name="description" content="An example webpage">
  • <meta name="description">-tagget bruges til kort at beskrive indholdet på en webside. Søgemaskiner bruger denne beskrivelse til at vise en oversigt over siden i søgeresultaterne.

<meta name="keywords">-tag 

1<meta name="keywords" content="HTML, CSS, JavaScript">
  • <meta name="keywords">-tagget giver en liste over nøgleord, der er relevante for sidens indhold. Søgemaskiner bruger disse nøgleord til bedre at forstå sidens indhold.

<meta name="author">-tag 

1<meta name="author" content="John Doe">
  • <meta name="author">-tagget angiver forfatteren af websiden. Denne information bruges hovedsageligt af søgemaskiner og værktøjer til nøjagtigt at identificere sidens forfatter.

<meta http-equiv="refresh"> tag 

1<meta http-equiv="refresh" content="5; url=https://example.com">
  • <meta http-equiv="refresh"> tagget bruges til automatisk at opdatere siden eller omdirigere til en anden URL efter en angivet tid. Det er nyttigt til at genindlæse siden eller omdirigere brugeren.

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

1<meta http-equiv="cache-control" content="no-cache">
  • <meta http-equiv="cache-control"> tagget bruges til at kontrollere sidecacheringsadfærden. Det kan angive, om siden skal caches, eller om den skal genvalideres ved senere adgang.

<meta http-equiv="expires"> tag 

1<meta http-equiv="expires" content="Tue, 01 Jan 2025 00:00:00 GMT">
  • <meta http-equiv="expires"> tagget angiver en udløbsdato for sideindholdet. Når den angivne dato er overskredet, bliver indholdet forældet, og browseren opfordres til at hente en ny version.

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

1<meta http-equiv="X-UA-Compatible" content="IE=edge">
  • <meta http-equiv="X-UA-Compatible"> tagget bruges til at angive kompatibilitetstilstand for Internet Explorer. Dette tag sikrer, at browseren bruger den passende version af rendering-motoren til at vise siden.

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

http-equiv="content-security-policy" attributten i et HTML-meta-tag er en funktion til at anvende specifikke sikkerhedsregler i browseren for at forbedre hjemmesidens sikkerhed. Ved at bruge denne attribut kan webudviklere angive politikker vedrørende ressourceloading og skripteksekvering for at forhindre angreb som XSS (Cross-Site Scripting) og dataindsprøjtning.

Hvad er Content-Security-Policy?

Content-Security-Policy (CSP) er en type HTTP-header, der bruges til at kontrollere, hvilke eksterne ressourcer (billeder, scripts, stylesheets osv.) en webside kan indlæse, og hvilken type kode der kan eksekveres. Det sendes normalt som en HTTP-header, men kan også defineres i HTML ved hjælp af et meta-tag. Denne metode giver mulighed for at angive CSP på klientsiden i stedet for at sætte headers på serversiden.

For eksempel kan du angive CSP i HTML meta-tagget 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 eksempel er følgende politikker angivet:

  • default-src 'self': Grundlæggende indlæses alle ressourcer kun fra samme oprindelse (sig selv).
  • img-src https://example.com: Billeder indlæses kun fra https://example.com.
  • script-src 'self' https://apis.google.com: Scripts kan kun udføres fra samme oprindelse eller fra https://apis.google.com.

Forskelle mellem http-equiv og HTTP-headere

Typisk sendes Content-Security-Policy fra serveren til klienten som en HTTP-header. Hvis du derimod angiver det på klientsiden ved hjælp af meta-tagget, kan det skrives direkte i HTML.

Der er dog nogle vigtige forskelle mellem at angive det som en HTTP-header og specificere det med et meta-tag:

  1. Prioritet: En CSP sendt via HTTP-headere har forrang over en specificeret i et meta-tag. Dette betyder, at hvis en CSP er angivet på serversiden, vil den ikke blive overskrevet af et meta-tag, der bruges på klientsiden.

  2. Anvendelsestidspunkt: En CSP specificeret via HTTP-headere anvendes, før siden indlæses. På den anden side anvendes en CSP specificeret via et meta-tag, når HTML'en parseres, så ressourcer muligvis allerede er indlæst.

Direktiver tilgængelige i CSP

I CSP bruges forskellige direktiver til at specificere politikker, der tillader eller forbyder indlæsning og udførelse af visse typer ressourcer. Typiske direktiver inkluderer følgende:.

  • default-src: Angiver standardkildepolitikken for alle ressourcer. Den gælder for ressourcer, der ikke er specificeret af andre direktiver.
  • script-src: Angiver kilden for JavaScript. For at forhindre XSS-angreb kan du begrænse indlæsning af scripts fra eksterne sider.
  • style-src: Angiver kilden for CSS. Ved at begrænse indlæsning af stylesheets fra eksterne kilder kan du forhindre angreb på din sides styles.
  • img-src: Angiver kilden for billeder. Du kan begrænse indlæsning af billeder fra eksterne kilder.
  • connect-src: Angiver de URL'er, der er tilladt for XMLHttpRequests og WebSocket-forbindelser. Dette sikrer sikkerheden af eksterne API- og WebSocket-kommunikationer.

Ved at kombinere disse direktiver kan du skabe detaljerede politikker for ressourcer på din webside.

Praktiske CSP-indstillinger til forbedring af sikkerheden

Nedenfor er et eksempel på CSP-indstillinger til at forbedre sikkerheden på din hjemmeside. Dette kan reducere risikoen for XSS-angreb og datalækager.

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 politikker anvendes med denne konfiguration:

  • default-src 'self': Alle ressourcer indlæses kun fra den samme oprindelse.
  • script-src 'self' https://trusted-cdn.com: Scripts indlæses kun fra den samme oprindelse eller et betroet CDN.
  • object-src 'none': object-tagget anvendes ikke. Dette er for at forhindre angreb baseret på Flash eller plugins.
  • style-src 'self': Stylesheets indlæses kun fra selve oprindelsen.
  • base-uri 'self': URL-basen, der angives med <base>-tagget, er begrænset til selve oprindelsen.
  • form-action 'self': Destinationen for formularindsendelser er begrænset til selve oprindelsen. Dette reducerer risikoen for, at formulardata sendes til eksterne sider.

Konklusion

Ved at bruge http-equiv="content-security-policy" til at definere CSP i HTML er det muligt at forbedre sikkerheden på websiden. En korrekt konfigureret CSP er et kraftfuldt værktøj, der reducerer risikoen for XSS-angreb og datalækager og beskytter din hjemmeside.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Tags brugt i hovedsektionenNylige tendenser inden for HTML