Tags met betrekking tot metainformatie

Dit artikel legt tags uit die verband houden met metainformatie.

Het legt de <meta>-tag uit, inclusief punten met betrekking tot SEO, responsief ontwerp en Content-Security-Policy.

YouTube Video

Tags met betrekking tot metainformatie

<meta>-tag

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

• De <meta>-tag biedt metadata voor het HTML-document. De metadata wordt niet op de pagina weergegeven, maar wordt gebruikt door zoekmachines en browsers. De <meta>-tag wordt gebruikt voor paginabeschrijvingen, trefwoorden, auteursinformatie en instellingen voor responsief ontwerp.

<meta name="viewport">-tag

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

• De <meta name="viewport">-tag regelt de lay-out en schaal van webpagina's op verschillende apparaten. Het wordt vaak gebruikt in responsief ontwerp om een juiste weergave op mobiele apparaten te garanderen.

<meta name="description">-tag

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

• De <meta name="description">-tag wordt gebruikt om de inhoud van een webpagina kort te beschrijven. Zoekmachines gebruiken deze beschrijving om een samenvatting van de pagina in zoekresultaten weer te geven.

<meta name="keywords">-tag

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

• De <meta name="keywords">-tag biedt een lijst met trefwoorden die relevant zijn voor de inhoud van de pagina. Zoekmachines gebruiken deze trefwoorden om de inhoud van de pagina beter te begrijpen.

<meta name="author">-tag

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

• De <meta name="author">-tag specificeert de auteur van de webpagina. Deze informatie wordt voornamelijk gebruikt door zoekmachines en tools om de auteur van de pagina nauwkeurig te identificeren.

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

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

• De <meta http-equiv="refresh">-tag wordt gebruikt om de pagina automatisch te verversen of door te sturen naar een andere URL na een bepaalde tijd. Het is handig om de pagina te herladen of de gebruiker door te sturen.

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

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

• De <meta http-equiv="cache-control">-tag wordt gebruikt om het cachegedrag van de webpagina te regelen. Het kan aangeven of de pagina in de cache moet worden opgeslagen of bij volgende toegang opnieuw gevalideerd moet worden.

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

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

• De <meta http-equiv="expires">-tag stelt een vervaldatum in voor de inhoud van de pagina. Zodra de opgegeven datum is verstreken, wordt de inhoud verouderd en wordt de browser gevraagd een nieuwe versie op te halen.

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

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

• De <meta http-equiv="X-UA-Compatible">-tag wordt gebruikt om de compatibiliteitsmodus voor Internet Explorer op te geven. Deze tag zorgt ervoor dat de browser de juiste versie van de rendering engine gebruikt om de pagina weer te geven.

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

Het attribuut http-equiv="content-security-policy" in een HTML-meta-tag is een functie om specifieke beveiligingsregels in de browser toe te passen om de beveiliging van de webpagina te verbeteren. Door dit attribuut te gebruiken, kunnen websiteontwikkelaars beleidsregels instellen met betrekking tot het laden van bronnen en het uitvoeren van scripts om aanvallen zoals XSS (Cross-Site Scripting) en gegevensinjectie te voorkomen.

Wat is Content-Security-Policy?

Content-Security-Policy (CSP) is een type HTTP-header die bepaalt welke externe bronnen (afbeeldingen, scripts, stylesheets, enz.) een webpagina kan laden en welk soort code kan worden uitgevoerd. Het wordt meestal verzonden als een HTTP-header, maar kan ook in HTML worden gedefinieerd met behulp van een meta-tag. Met deze methode kan CSP worden gespecificeerd aan de clientzijde in plaats van headers op de serverzijde in te stellen.

Bijvoorbeeld, je kunt CSP instellen in de HTML meta-tag als volgt:.

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

In dit voorbeeld worden de volgende beleidsregels ingesteld:

• default-src 'self': In principe worden alle bronnen alleen geladen vanaf dezelfde oorsprong (zelf).
• img-src https://example.com: Afbeeldingen worden alleen geladen van https://example.com.
• script-src 'self' https://apis.google.com: Scripts kunnen alleen worden uitgevoerd vanaf dezelfde oorsprong of van https://apis.google.com.

Verschillen tussen http-equiv en HTTP-headers

Normaal gesproken wordt Content-Security-Policy vanaf de server naar de client verzonden als een HTTP-header. Als je het echter aan de clientzijde instelt met behulp van de meta-tag, kan het direct in de HTML worden geschreven.

Er zijn echter enkele belangrijke verschillen tussen het instellen als een HTTP-header en het specificeren met een meta-tag:

1. Prioriteit: Een CSP die via HTTP-headers wordt verzonden, krijgt voorrang boven een die in een meta-tag is gespecificeerd. Dit betekent dat als een CSP aan de serverzijde is ingesteld, deze niet zal worden overschreven door een meta-tag die aan de clientzijde wordt gebruikt.

2. Applicatietiming: Een CSP die via HTTP-headers is gespecificeerd, wordt toegepast voordat de pagina wordt geladen. Aan de andere kant wordt een CSP die via een meta-tag is gespecificeerd toegepast wanneer de HTML wordt geparsed, dus bronnen kunnen al zijn geladen.

Beschikbare richtlijnen in CSP

In CSP worden verschillende richtlijnen gebruikt om beleidsregels te specificeren die het laden en uitvoeren van bepaalde soorten bronnen toestaan of verbieden. Typische richtlijnen zijn onder andere de volgende:.

• default-src: Specificeert het standaardbronbeleid voor alle bronnen. Het is van toepassing op bronnen die niet door andere richtlijnen zijn gespecificeerd.
• script-src: Specificeert de bron voor JavaScript. Om XSS-aanvallen te voorkomen, kun je het laden van scripts van externe sites beperken.
• style-src: Specificeert de bron voor CSS. Door het laden van stylesheets van externe bronnen te beperken, kun je aanvallen op de stijlen van je site voorkomen.
• img-src: Specificeert de bron voor afbeeldingen. Je kunt het laden van afbeeldingen van externe bronnen beperken.
• connect-src: Specificeert de toegestane URL's voor XMLHttpRequests en WebSocket-verbindingen. Dit zorgt voor de beveiliging van externe API- en WebSocket-communicatie.

Door deze richtlijnen te combineren, kun je gedetailleerde beleidsregels opstellen voor middelen op je webpagina.

Praktische CSP-instellingen voor het verbeteren van beveiliging

Hieronder staat een voorbeeld van CSP-instellingen om de beveiliging van je website te verbeteren. Dit kan het risico op XSS-aanvallen en datalekken verminderen.

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';">

De volgende beleidsregels worden toegepast met deze configuratie:

• default-src 'self': Alle bronnen worden alleen geladen vanuit dezelfde oorsprong.
• script-src 'self' https://trusted-cdn.com: Scripts worden alleen geladen vanuit dezelfde oorsprong of een vertrouwde CDN.
• object-src 'none': De object-tag wordt niet gebruikt. Dit is om Flash- of plugin-gebaseerde aanvallen te voorkomen.
• style-src 'self': Stylesheets worden alleen geladen vanuit dezelfde oorsprong.
• base-uri 'self': De URL-basis ingesteld door de <base>-tag is beperkt tot dezelfde oorsprong.
• form-action 'self': De formulierverzendingsbestemming is beperkt tot dezelfde oorsprong. Dit vermindert het risico dat formuliergegevens naar externe sites worden verzonden.

Conclusie

Door http-equiv="content-security-policy" te gebruiken om CSP binnen HTML te definiëren, is het mogelijk de beveiliging van de webpagina te verbeteren. Een goed geconfigureerde CSP is een krachtig hulpmiddel dat het risico op XSS-aanvallen en datalekken vermindert en je website beschermt.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video