Wissensdatenbank

Cloudflare Snippets sind eine moderne und sichere Code-Snippet-Laufzeitumgebung, mit der Sie in HTTP-Anfragen an Ihre Website eingreifen können. Mit einer JavaScript-ähnlichen Skriptsprache bietet dieses System mithilfe der Workers-Infrastruktur von Cloudflare die Möglichkeit zur serverseitigen Anpassung.

In diesem Artikel untersuchen wir die Cloudflare Snippets-Funktion in all ihren Aspekten. Wir erklären detailliert, was sie bewirkt, wie sie verwendet wird, wo sie mit Beispielen nützlich ist und welche Sicherheitsaspekte es gibt.

Was sind Cloudflare Snippets?

Cloudflare Snippets sind leichte, sichere, sofort ausführbare Codeblöcke, die verwendet werden, um Vorgänge wie das Hinzufügen von Code zum HTML-Header, das Bearbeiten von Metadaten, das Anwenden benutzerdefinierter Sicherheitsheader oder das Erstellen benutzerdefinierter Weiterleitungen durchzuführen.

Im Wesentlichen handelt es sich um kleine JavaScript-basierte Skriptfragmente, die jedoch mit der Sicherheits-, Leistungs- und Bereitstellungsinfrastruktur von Cloudflare zusammenarbeiten.

Wo werden sie verwendet?

• Hinzufügen von benutzerdefinierten Meta-Tags, Skripten oder Stilvorlagen in den HTML-

• Benutzerdefinierte Weiterleitungen

• Ändern von Cache-Control-Headern

• Hinzufügen von Sicherheitsheadern (Content-Security-Policy, Strict-Transport-Security usw.)

• SEO-Zwecke: Bearbeitungen von Canonical-URLs oder Robots-Meta-Tags

• Steuern des Ladens von Tracking- und Analysescripts (z. B. Google Analytics)

Wie werden Snippets erstellt? Schritt für Schritt

1. Melden Sie sich bei Ihrem Cloudflare-Konto an

2. Gehen Sie im linken Menü zum Tab Snippets oder Rules > Snippets (Funktion muss aktiviert sein)

3. Klicken Sie auf die Schaltfläche „Create Snippet“

4. Geben Sie dem Code-Snippet einen Namen und legen Sie die Betriebsbedingungen fest (z. B. Ausführung auf einer bestimmten URL)

5. Schreiben Sie den Codeblock:

// Beispiel: Meta-Tag zum Head-Tag hinzufügen
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const response = await fetch(request);
  const newHeaders = new Headers(response.headers);
  newHeaders.set('Content-Security-Policy', "default-src 'self'");
  return new Response(response.body, {
    status: response.status,
    headers: newHeaders
  });
}

6. Aktivieren Sie das Snippet mit „Deploy“

⚙️ Erweiterte Funktionen

• Bereichsdefinition (Scope): Ausführung basierend auf der gesamten Domain, einem bestimmten Pfad, Hostnamen oder einer bestimmten Erweiterung

• Bedingte Ausführung: Auslösen von Snippets mit Filtern wie User-Agent, Zeitzone, IP

• Bietet zusätzliche Geschwindigkeit, da es auf dem CDN Edge ausgeführt wird

Sicherheits- und Leistungshinweise

• Snippets werden in einer Sandbox-Umgebung ausgeführt. Das heißt, der Zugriff auf externe Ressourcen ist eingeschränkt.

• Verursacht keine Netzwerkverzögerung; wird am nächstgelegenen Cloudflare-Punkt ausgeführt, bevor der Inhalt den Benutzer erreicht.

• Obwohl sie mit der gleichen Geschwindigkeit wie Workers ausgeführt werden, werden sie für einfachere Zwecke empfohlen.

Unterschiede zwischen Snippets und Workers

Fazit

Cloudflare Snippets sind ein sehr leistungsstarkes und praktisches Tool für Benutzer, die kleine, aber effektive Eingriffe vornehmen möchten. Dank dieses leistungsfreundlichen und äußerst sicheren Systems können Sie standortspezifische Anpassungen in der Cloudflare-Schicht vornehmen und optimieren, ohne den Back-End zu belasten.

Insbesondere für SEO-Experten, Frontend-Entwickler und sicherheitsorientierte Systemadministratoren sind Cloudflare Snippets eine hervorragende Lösung für die Code-Anpassung und das Ergreifen von Vorsichtsmaßnahmen.