Taggar relaterade till metainformation

Den här artikeln förklarar taggar som är relaterade till metainformation.

Den förklarar <meta>-taggen, inklusive punkter relaterade till SEO, responsiv design och Content-Security-Policy.

YouTube Video

Taggar relaterade till metainformation

<meta>-tagg

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

• <meta>-taggen tillhandahåller metadata för HTML-dokumentet. Metadatan visas inte på sidan utan används av sökmotorer och webbläsare. <meta>-taggen används för sidbeskrivningar, nyckelord, författarinformation och inställningar för responsiv design.

<meta name="viewport">-tagg

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

• <meta name="viewport">-taggen styr layout och skalning av webbsidor på olika enheter. Den används ofta i responsiv design för att säkerställa korrekt visning på mobila enheter.

<meta name="description">-tagg

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

• <meta name="description">-taggen används för att kort beskriva innehållet på en webbsida. Sökmotorer använder denna beskrivning för att visa en sammanfattning av sidan i sökresultaten.

<meta name="keywords">-tagg

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

• <meta name="keywords">-taggen tillhandahåller en lista över nyckelord som är relevanta för sidans innehåll. Sökmotorer använder dessa nyckelord för att bättre förstå sidans innehåll.

<meta name="author">-tagg

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

• <meta name="author">-taggen anger författaren till webbsidan. Denna information används främst av sökmotorer och verktyg för att exakt identifiera sidans författare.

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

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

• <meta http-equiv="refresh">-taggen används för att automatiskt uppdatera sidan eller omdirigera till en annan URL efter en angiven tid. Den är användbar för att ladda om sidan eller omdirigera användaren.

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

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

• <meta http-equiv="cache-control">-taggen används för att kontrollera hur webbsidan cachelagras. Den kan ange om sidan ska cachelagras eller valideras igen vid efterföljande åtkomst.

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

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

• <meta http-equiv="expires">-taggen anger ett utgångsdatum för sidans innehåll. När det angivna datumet har passerat blir innehållet föråldrat och webbläsaren uppmanas att hämta en ny version.

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

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

• <meta http-equiv="X-UA-Compatible">-taggen används för att ange kompatibilitetsläget för Internet Explorer. Denna tagg säkerställer att webbläsaren använder rätt version av renderingsmotorn för att visa sidan.

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

http-equiv="content-security-policy"-attributet i en HTML meta-tagg är en funktion för att tillämpa specifika säkerhetsregler i webbläsaren för att förbättra webbsidans säkerhet. Genom att använda detta attribut kan webbplatsutvecklare fastställa policyer för resursladdning och skriptkörning för att förhindra attacker som XSS (Cross-Site Scripting) och datainjektion.

Vad är Content-Security-Policy?

Content-Security-Policy (CSP) är en typ av HTTP-header som används för att styra vilka externa resurser (bilder, skript, stilmallar etc.) en webbsida kan ladda och vilken typ av kod som kan köras. Den skickas vanligtvis som en HTTP-header men kan också definieras i HTML med hjälp av en meta-tagg. Denna metod gör det möjligt att specificera CSP på klientsidan istället för att sätta headers på serversidan.

Exempelvis kan du ställa in CSP i HTML med hjälp av meta-taggen enligt följande:.

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

I det här exemplet har följande policyer ställts in:

• default-src 'self': I grunden laddas alla resurser endast från samma ursprung (sig självt).
• img-src https://example.com: Bilder laddas endast från https://example.com.
• script-src 'self' https://apis.google.com: Skript kan endast köras från samma ursprung eller från https://apis.google.com.

Skillnader mellan http-equiv och HTTP-headers

Vanligtvis skickas Content-Security-Policy från servern till klienten som en HTTP-header. Dock kan den, om den anges på klientsidan med meta-taggen, skrivas direkt i HTML-koden.

Det finns dock några viktiga skillnader mellan att ställa in den som en HTTP-header och att specificera den med en meta-tagg:

1. Prioritet: En CSP som skickas via HTTP-headers har företräde framför en som specificeras i en meta-tagg. Detta innebär att om en CSP ställs in på serversidan kommer den inte att åsidosättas av en meta-tagg som används på klientsidan.

2. Tillämpningstidpunkt: En CSP som specificeras via HTTP-headers tillämpas innan sidan laddas. Å andra sidan tillämpas en CSP som specificeras via en meta-tagg när HTML解析en pågår, vilket innebär att resurser redan kan vara laddade.

Tillgängliga direktiv i CSP

I CSP används olika direktiv för att specificera policyer som tillåter eller förbjuder laddning och körning av vissa typer av resurser. Typiska direktiv inkluderar följande:.

• default-src: Specificerar standardpolicyn för alla resurser. Den tillämpas på resurser som inte specificeras av andra direktiv.
• script-src: Specificerar källan för JavaScript. För att förhindra XSS-attacker kan du begränsa laddningen av skript från externa webbplatser.
• style-src: Specificerar källan för CSS. Genom att begränsa laddningen av stilmallar från externa källor kan du förhindra attacker på din webbplats utseende.
• img-src: Specificerar källan för bilder. Du kan begränsa laddning av bilder från externa källor.
• connect-src: Specificerar tillåtna URL:er för XMLHttpRequests och WebSocket-anslutningar. Detta säkerställer säkerheten för externa API- och WebSocket-kommunikationer.

Genom att kombinera dessa direktiv kan du skapa detaljerade policyer för resurser på din webbsida.

Praktiska CSP-inställningar för att förbättra säkerheten

Nedan är ett exempel på CSP-inställningar för att stärka säkerheten på din webbplats. Detta kan minska risken för XSS-attacker och informationsläckor.

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öljande policyer tillämpas med denna konfiguration:

• default-src 'self': Alla resurser laddas endast från samma ursprung.
• script-src 'self' https://trusted-cdn.com: Skript laddas endast från samma ursprung eller en betrodd CDN.
• object-src 'none': object-taggen används inte. Detta är för att förhindra attacker baserade på Flash eller andra plugins.
• style-src 'self': Stilmallar laddas endast från ursprunget.
• base-uri 'self': URL-bas som anges med <base>-taggen är begränsad till ursprunget.
• form-action 'self': Formulärets måladress är begränsad till ursprunget. Detta minskar risken för att formulärdata skickas till externa webbplatser.

Slutsats

Genom att använda http-equiv="content-security-policy" för att definiera CSP inom HTML är det möjligt att förbättra säkerheten för webbsidan. En korrekt konfigurerad CSP är ett kraftfullt verktyg som minskar risken för XSS-attacker och informationsläckor samt skyddar din webbplats.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video