Tags im Zusammenhang mit Metainformationen

Dieser Artikel erklärt Tags, die sich auf Metainformationen beziehen.

Er beschreibt das <meta>-Tag, einschließlich Punkte zu SEO, responsivem Design und Content-Security-Policy.

YouTube Video

Tags im Zusammenhang mit Metainformationen

<meta>-Tag

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

• Das <meta>-Tag liefert Metadaten für das HTML-Dokument. Die Metadaten werden nicht auf der Seite angezeigt, sondern von Suchmaschinen und Browsern verwendet. Das <meta>-Tag wird für Seitenbeschreibungen, Schlüsselwörter, Autoreninformationen und Einstellungen für responsives Design verwendet.

<meta name="viewport">-Tag

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

• Das <meta name="viewport">-Tag steuert das Layout und die Skalierung von Webseiten auf verschiedenen Geräten. Es wird häufig im responsiven Design verwendet, um eine ordnungsgemäße Anzeige auf mobilen Geräten sicherzustellen.

<meta name="description">-Tag

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

• Das <meta name="description">-Tag wird verwendet, um den Inhalt einer Webseite kurz zu beschreiben. Suchmaschinen verwenden diese Beschreibung, um eine Zusammenfassung der Seite in den Suchergebnissen anzuzeigen.

<meta name="keywords">-Tag

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

• Das <meta name="keywords"> Tag liefert eine Liste von Schlüsselwörtern, die für den Seiteninhalt relevant sind. Suchmaschinen nutzen diese Schlüsselwörter, um den Seiteninhalt besser zu verstehen.

<meta name="author">-Tag

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

• Das <meta name="author"> Tag gibt den Autor der Webseite an. Diese Information wird hauptsächlich von Suchmaschinen und Tools verwendet, um den Autor der Seite genau zu identifizieren.

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

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

• Das <meta http-equiv="refresh"> Tag wird verwendet, um die Seite nach einer bestimmten Zeit automatisch zu aktualisieren oder zu einer anderen URL weiterzuleiten. Es ist nützlich zum Neuladen der Seite oder zum Weiterleiten des Benutzers.

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

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

• Das <meta http-equiv="cache-control"> Tag wird verwendet, um das Caching-Verhalten der Webseite zu steuern. Es kann bestimmen, ob die Seite zwischengespeichert oder bei erneutem Zugriff neu validiert werden soll.

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

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

• Das <meta http-equiv="expires"> Tag setzt ein Ablaufdatum für den Seiteninhalt. Sobald das angegebene Datum verstrichen ist, wird der Inhalt veraltet, und der Browser wird aufgefordert, eine neue Version abzurufen.

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

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

• Das <meta http-equiv="X-UA-Compatible"> Tag wird verwendet, um den Kompatibilitätsmodus für den Internet Explorer anzugeben. Dieses Tag stellt sicher, dass der Browser die passende Version der Rendering-Engine verwendet, um die Seite darzustellen.

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

Das Attribut http-equiv="content-security-policy" in einem HTML-meta-Tag ist eine Funktion, um spezifische Sicherheitsregeln im Browser anzuwenden und die Sicherheit der Webseite zu erhöhen. Durch die Verwendung dieses Attributs können Websiteentwickler Richtlinien für das Laden von Ressourcen und die Ausführung von Skripten festlegen, um Angriffe wie XSS (Cross-Site Scripting) und Dateninjektion zu verhindern.

Was ist Content-Security-Policy?

Content-Security-Policy (CSP) ist eine Art HTTP-Header, der verwendet wird, um zu kontrollieren, welche externen Ressourcen (Bilder, Skripte, Stylesheets usw.) eine Webseite laden kann und welche Arten von Code ausgeführt werden dürfen. Normalerweise wird es als HTTP-Header gesendet, kann aber auch innerhalb von HTML mithilfe eines meta-Tags definiert werden. Mit dieser Methode kann CSP auf der Client-Seite anstelle von Headern auf der Server-Seite festgelegt werden.

Zum Beispiel können Sie CSP im HTML-meta-Tag folgendermaßen festlegen:.

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

In diesem Beispiel werden die folgenden Richtlinien festgelegt:

• default-src 'self': Grundsätzlich werden alle Ressourcen nur von derselben Herkunft (selbst) geladen.
• img-src https://example.com: Bilder werden nur von https://example.com geladen.
• script-src 'self' https://apis.google.com: Skripte können nur von derselben Herkunft oder von https://apis.google.com ausgeführt werden.

Unterschiede zwischen http-equiv und HTTP-Headern

Normalerweise wird Content-Security-Policy vom Server als HTTP-Header an den Client gesendet. Wenn Sie es jedoch auf der Client-Seite mit dem meta-Tag festlegen, kann es direkt im HTML geschrieben werden.

Es gibt jedoch einige wichtige Unterschiede zwischen dem Setzen als HTTP-Header und der Spezifikation mit einem meta-Tag:

1. Priorität: Eine per HTTP-Header gesendete CSP hat Vorrang vor einer, die mit einem meta-Tag angegeben ist. Das bedeutet, dass eine auf der Server-Seite festgelegte CSP nicht durch ein auf der Client-Seite verwendetes meta-Tag überschrieben wird.

2. Anwendungszeitpunkt: Eine über HTTP-Header angegebene CSP wird angewendet, bevor die Seite geladen wird. Eine über ein meta-Tag angegebene CSP wird hingegen angewendet, wenn das HTML geparst wird, sodass Ressourcen möglicherweise bereits geladen sind.

Verfügbare Direktiven in CSP

In CSP werden verschiedene Direktiven verwendet, um Richtlinien festzulegen, die das Laden und Ausführen bestimmter Arten von Ressourcen erlauben oder verbieten. Typische Direktiven umfassen die folgenden:.

• default-src: Gibt die Standardquellenrichtlinie für alle Ressourcen an. Es gilt für Ressourcen, die nicht durch andere Direktiven angegeben sind.
• script-src: Gibt die Quelle für JavaScript an. Um XSS-Angriffe zu verhindern, können Sie das Laden von Skripten von externen Seiten einschränken.
• style-src: Gibt die Quelle für CSS an. Durch die Einschränkung des Ladens von Stylesheets aus externen Quellen können Sie Angriffe auf die Stile Ihrer Seite verhindern.
• img-src: Gibt die Quelle für Bilder an. Sie können das Laden von Bildern aus externen Quellen einschränken.
• connect-src: Gibt die URLs an, die für XMLHttpRequests und WebSocket-Verbindungen zulässig sind. Dies gewährleistet die Sicherheit externer API- und WebSocket-Kommunikationen.

Indem Sie diese Richtlinien kombinieren, können Sie detaillierte Richtlinien für Ressourcen auf Ihrer Webseite erstellen.

Praktische CSP-Einstellungen zur Verbesserung der Sicherheit

Nachfolgend finden Sie ein Beispiel für CSP-Einstellungen, um die Sicherheit Ihrer Webseite zu erhöhen. Dies kann das Risiko von XSS-Angriffen und Datenlecks verringern.

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

Mit dieser Konfiguration werden die folgenden Richtlinien angewendet:

• default-src 'self': Alle Ressourcen werden nur von der gleichen Herkunft geladen.
• script-src 'self' https://trusted-cdn.com: Skripte werden nur von der gleichen Herkunft oder einem vertrauenswürdigen CDN geladen.
• object-src 'none': Das object-Tag wird nicht verwendet. Dies dient zur Verhinderung von Flash- oder Plugin-basierten Angriffen.
• style-src 'self': Stylesheets werden nur vom Ursprung selbst geladen.
• base-uri 'self': Die URL-Basis, die durch das <base>-Tag festgelegt wird, ist auf den Ursprung selbst beschränkt.
• form-action 'self': Das Ziel des Formularversands ist auf den Ursprung selbst beschränkt. Dies verringert das Risiko, dass Formulardaten an externe Seiten gesendet werden.

Fazit

Durch die Verwendung von http-equiv="content-security-policy" zur Definition von CSP innerhalb von HTML ist es möglich, die Sicherheit der Webseite zu erhöhen. Ein richtig konfiguriertes CSP ist ein leistungsstarkes Werkzeug, das das Risiko von XSS-Angriffen und Datenlecks reduziert und Ihre Webseite schützt.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video