Kategorien
Angular Security

Subresource Integrity (SRI) mit Angular

Subresource Integrity (SRI) ist ein Sicherheitsmechanismus, der es Webbrowsern ermöglicht, zu überprüfen, ob Inhalte, die sie von einem Server herunterladen (z.B. Skripte oder Stylesheets), unverändert bleiben. Der Mechanismus wurde entwickelt, um das Risiko zu verringern, dass ein Angreifer diese Inhalte ändern kann, entweder durch die Kompromittierung des Servers selbst oder durch Manipulation der Daten während der Übertragung.

SRI funktioniert, indem es einen Hash-Wert für den erwarteten Inhalt bereitstellt. Der Hash-Wert wird in einem integrity Attribut bereitgestellt, das einem <script> oder <link> Tag hinzugefügt wird. Hier ist ein Beispiel:

<script 
  src="https://example.com/script.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
  crossorigin="anonymous">
</script>

In diesem Beispiel ist der Hash-Wert (beginnend mit sha384-) der Base64-kodierte SHA-384-Hash des erwarteten Inhalts der Datei script.js.

Es ist wichtig zu beachten, dass das crossorigin Attribut in Bezug auf Subresource Integrity (SRI) benötigt wird. Bei Verwendung von SRI in einem <script> oder <link> Tag muss das crossorigin Attribut ebenfalls angegeben werden, um die Überprüfung der Ressourcenintegrität zu ermöglichen.

Wenn der Browser die Datei von example.com lädt, berechnet er seinen eigenen Hash der heruntergeladenen Daten und vergleicht ihn mit dem im integrity Attribut bereitgestellten Hash. Wenn die beiden übereinstimmen, wird die Ressource geladen. Wenn sie nicht übereinstimmen (was darauf hinweisen könnte, dass die Daten manipuliert wurden), blockiert der Browser die Ressource und verhindert, dass sie geladen wird.

Es ist wichtig zu beachten, dass SRI nur einen Schutz bietet, wenn Sie sicher sind, dass die ursprünglichen Inhalte, die Sie hashen, sicher sind. Es schützt Sie nicht vor unsicheren Inhalten, die Sie versehentlich von einer unzuverlässigen Quelle geladen haben.

SRI in Angular

Subresource Integrity (SRI) ist in Angular verfügbar beim Erstellen des produktiven Builds und kann folgender Maßen aktiviert werden:

ng build --subresource-integrity

Das Ergebnis sieht man in der index.html, die mit den passenden integrity Hash-Werten versehen ist.

<!DOCTYPE html>
<html lang="en">
  <head>
      <link rel="stylesheet" href="styles.b59ebdef18b35fdd.css" crossorigin="anonymous"
        integrity="sha384-oErGOTPxF7SP2WL0NQvx3yH3qKf2nU+GaPRoQGwLC86FXbXhZT4NTyvkJk1YhsWG" media="print"
        onload="this.media='all'">
  </head>
  <body>
    <app-root></app-root>
    <script src="runtime.cd88caa9a90985c6.js" type="module" crossorigin="anonymous" integrity="sha384-pa1ldTIy99cxQ4eBdVToPe5QX72nwdMwc1iUQdrfHG12kAQDqWnQr4ht5En4U7vh"></script>
    <script src="polyfills.20b808ea4252e216.js" type="module" crossorigin="anonymous" integrity="sha384-ntg7GMhEvdM6nANo67bhe9ywlmHlclTX9WtzZypoZ5l88rNtopxFbU8KECtXeCgy"></script>
    <script src="scripts.22e9f2ff069003a2.js" defer crossorigin="anonymous" integrity="sha384-D0q55GWgRcYpsttubbKAA87RnYZm6YovXWtOdbHklbKFZi+t0aFHRI88ps3ega/j"></script>
    <script src="main.f007b24de697ee5f.js" type="module" crossorigin="anonymous" integrity="sha384-Iu/ByjgLYT6Ngup3UKnXSUZgDlxc9d+S6vH/O9o4NetAuxd7wCf1+pMLtZ8iersD"></script>
  </body>
</html>