Utilia
Kategorien ▾
Sprache: de ▾

SRI-Hash-Generator

SRI-Hash erzeugen: Subresource-Integrity-Hashes (sha384) für JavaScript- oder CSS-Dateien berechnen und fertige integrity- und crossorigin-Attribute kopieren.

Fügen Sie den Inhalt der Datei ein oder öffnen Sie die Datei selbst: Dieses Tool lädt keine URLs herunter. Ein Skript von einer anderen Website zu lesen, setzt voraus, dass deren Server das erlaubt (CORS), oder dass ein eigener Server es für Sie abruft – und nichts, was Sie hier hashen, verlässt jemals Ihren Browser. Hashen Sie genau die Datei, die Sie ausliefern.

Hashen

Der Text wird als UTF-8 gehasht. Browser wandeln Windows-Zeilenenden (CRLF) in eingefügtem Text in LF um, und ein einziges geändertes Byte macht den Hash ungültig: Öffnen Sie im Zweifel die Datei selbst.

Algorithmen

Die URL wird nur in das Snippet geschrieben, aber nie aufgerufen. Lassen Sie das Feld leer, um den Dateinamen zu verwenden.

So erzeugen Sie einen SRI-Hash

  1. Wählen Sie unter „Hashen“ entweder „Eingefügter Code“ oder „Dateien“.
  2. Fügen Sie den exakten Inhalt des Skripts oder Stylesheets in „Inhalt des Skripts oder Stylesheets“ ein und klicken Sie auf „SRI-Hash erzeugen“, oder ziehen Sie eine oder mehrere .js- und .css-Dateien auf die Ablagefläche. Die Hashes werden während der Eingabe aktualisiert.
  3. Lassen Sie „SHA-384 (empfohlen)“ aktiviert oder ergänzen Sie SHA-256 und SHA-512. Jeder aktivierte Algorithmus fügt dem Wert ein weiteres Token hinzu.
  4. Wählen Sie das „Tag“ (automatisch nach Dateiname, <script>, <script type="module"> oder <link rel="stylesheet">), tragen Sie die „Ressourcen-URL für das Snippet (optional)“ ein und legen Sie den crossorigin-Modus fest.
  5. Kopieren Sie den „integrity-Wert“ oder das vollständige Tag.
  6. Um ein bereits verwendetes Tag zu prüfen, fügen Sie seinen Wert oder das ganze Tag in „Vorhandenen integrity-Wert prüfen (optional)“ ein.

Was Subresource Integrity bewirkt

Lädt eine Seite ein Skript von einem CDN, vertraut der Browser allem, was dieser Server zurückgibt. Wird das CDN kompromittiert oder die Datei verändert, läuft der manipulierte Code mit vollem Zugriff auf Ihre Seite. Subresource Integrity (W3C SRI) schließt diese Lücke: Sie hinterlegen den erwarteten Hash der Datei im Attribut integrity, der Browser hasht die heruntergeladene Datei und weigert sich, das Skript auszuführen oder das Stylesheet anzuwenden, wenn die beiden Werte voneinander abweichen.

<script src="https://cdn.example.com/lib.min.js"
        integrity="sha384-H8BRh8j48O9oYatfu5AZzq6A9RINhZO5H16dQZngK7T62em8MUt1FLm52t+eX6xO"
        crossorigin="anonymous"></script>

Der Wert besteht aus dem Namen des Algorithmus, einem Bindestrich und dem Base64-kodierten Digest der Dateibytes. Das Beispiel ist der Hash von alert('Hello, world.'); aus der SRI-Spezifikation. Stehen mehrere Hashes im Attribut, berücksichtigen Browser nur den stärksten vorhandenen Algorithmus und akzeptieren die Datei, wenn irgendein Hash dieses Algorithmus passt. So kann eine Website während eines Rollouts zwei Versionen einer Datei zulassen.

Warum crossorigin nötig ist

Bei einer Datei von einem anderen Ursprung kann der Browser die Integrität nur prüfen, wenn die Antwort im CORS-Modus abgerufen wird. Das Tag braucht daher ein crossorigin-Attribut, und der Server muss mit einem Access-Control-Allow-Origin-Header antworten. Verwenden Sie anonymous (ohne Cookies) für öffentliche CDNs; use-credentials ist für seltene private Ressourcen gedacht. Ohne CORS blockiert der Browser die Datei, statt sie ungeprüft zu laden.

Warum dieses Tool keine URLs abruft

Dieses Tool hasht nur Code, den Sie einfügen, oder Dateien, die Sie öffnen. Ein Skript direkt von seiner URL herunterzuladen, würde nur funktionieren, wenn der betreffende Server Cross-Origin-Zugriffe erlaubt. Das zu umgehen, bräuchte einen Server, der die Datei für Sie abruft – und der würde auch sehen, was Sie hashen. Hier läuft alles in Ihrem Browser. Am einfachsten laden Sie genau die Datei herunter, die Sie einbinden (gleiche Version, gleicher minifizierter Build), und öffnen sie hier.

Häufige Fragen

Welchen Algorithmus sollte ich verwenden?

SHA-384 ist die übliche Wahl und das, was die meisten CDNs veröffentlichen. SHA-256 und SHA-512 werden ebenfalls von allen modernen Browsern unterstützt. MD5 und SHA-1 sind in SRI nicht erlaubt.

Mein Hash stimmt, aber der Browser blockiert die Datei trotzdem. Warum?

Prüfen Sie, ob der Server Access-Control-Allow-Origin sendet und das Tag crossorigin enthält. Stellen Sie außerdem sicher, dass das CDN dieselben Bytes ausliefert: Eine andere Version, ein automatischer Minifier oder ein fehlender Zeilenumbruch am Dateiende verändern den Hash.

Warum ergibt eingefügter Code einen anderen Hash als die Datei?

Browser wandeln in Textfeldern Windows-Zeilenenden (CRLF) in LF um, und ein Editor kann eine Byte-Order-Mark oder einen abschließenden Zeilenumbruch hinzufügen oder entfernen. Öffnen Sie die Datei selbst, um ihre exakten Bytes zu hashen.

Brauche ich SRI für Dateien auf meiner eigenen Domain?

SRI schützt vor Änderungen, die nach der Berechnung des Hashs vorgenommen werden, und ist daher vor allem bei Fremdanbietern wichtig. Für eigene Dateien ist ein Bundler, der die Hashes beim Build erzeugt, meist bequemer.

Funktioniert SRI auch für Bilder oder Schriften?

Das Attribut integrity wird bei <script> und <link rel="stylesheet"> unterstützt (sowie bei <link rel="preload"> oder modulepreload für diese Ressourcen). Bilder und Schriften können es nicht nutzen.

Ähnliche Tools