Content Security Policy (CSP) ist eine Sicherheitsmaßnahme, die von Webbrowsern genutzt wird, um bestimmte Arten von Angriffen zu verhindern, einschließlich Cross-Site Scripting (XSS) und Dateninjektionsangriffe. Sie funktioniert, indem sie Richtlinien für die Arten von Inhalten festlegt, die auf einer Webseite geladen und ausgeführt werden dürfen.
Die CSP wird vom Server als HTTP-Header gesendet. Ein typischer CSP-Header könnte folgendermaßen aussehen:
Content-Security-Policy: default-src 'self'; img-src 'self' https://example.com; script-src 'self' https://example.com;
Dieser Header legt eine Reihe von Richtlinien fest:
default-src 'self': Dies bedeutet, dass Inhalte (wie Skripte, Styles, Medien und mehr) nur von der aktuellen Domain geladen werden dürfen.img-src 'self' https://example.com: Dies bedeutet, dass Bilder nur von der aktuellen Domain oderhttps://example.comgeladen werden dürfen.script-src 'self' https://example.com: Dies bedeutet, dass Skripte nur von der aktuellen Domain oderhttps://example.comgeladen werden dürfen.
Diese Richtlinien helfen, Angriffe zu verhindern, indem sie den Ursprung von Inhalten, die in einer Webseite ausgeführt werden dürfen, einschränken. Beispielsweise würde eine CSP, die das Laden von Skripten nur von der aktuellen Domain erlaubt, verhindern, dass ein Angreifer ein Skript von einer externen Quelle in die Webseite einfügt.
Der CSP Nonce
In der Content Security Policy (CSP) kann eine Nonce (“number only used once”, in diesem Fall kann es auch ein alphanumerischer Wert sein) dazu verwendet werden, bestimmten Inline-Skripten oder Inline-Styles die Ausführung zu erlauben.
Jedes Mal, wenn die Seite geladen wird, generiert der Server eine neue eindeutige Nonce-Wert, die dann dem CSP-Header und dem entsprechenden Inline-Script oder -Style hinzugefügt wird.
Angenommen, Sie haben eine Webserver-Konfiguration (z.B. in Node.js), die in der Lage ist, eine zufällige Nonce zu generieren und in Ihre Seite einzufügen. Ihre CSP-Richtlinie könnte dann folgendermaßen aussehen:
Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-2726c7f26c'
In diesem Beispiel ist 'nonce-2726c7f26c' der Nonce-Wert. Dieser Wert würde dem Inline-Script-Tag in Ihrem HTML-Dokument hinzugefügt, so dass es trotz der CSP ausgeführt werden kann:
<script nonce="2726c7f26c">
// JS Code hier
</script>
Wenn die Seite neu geladen wird, würde der Server eine neue Nonce generieren und sowohl den CSP-Header als auch das nonce-Attribut des Script-Tags aktualisieren. Das bedeutet, dass, selbst wenn ein Angreifer die aktuelle Nonce kennen würde, sie ihm nicht helfen würde, schädliche Skripte auszuführen, da die Nonce bei jedem Seitenladen geändert wird.
Der folgende Code würde vom Browser nicht ausgeführt werden als Schutz vor Angriffen:
<script>
// Code wird geblockt
</script>
Die Reporting Funktion
Die Berichtsfunktion in der Content Security Policy (CSP) ermöglicht es Ihnen, Benachrichtigungen zu erhalten, wenn bestimmte Vorfälle, wie beispielsweise Verstöße gegen die CSP, auftreten. Dies wird über die report-uri oder die report-to Direktive in der CSP-Header-Zeichenkette gesteuert.
Wenn ein CSP-Verstoß auftritt, sendet der Browser einen POST-Request mit einem JSON-Body an die URL, die in der report-uri oder report-to Direktive angegeben ist.
Das JSON-Objekt enthält Details zum Verstoß, wie den Dokument-URI, den Verstoßenden URI, die Zeilen- und Spaltennummer, die die Verletzung verursacht hat, und die genaue CSP-Richtlinie, die verletzt wurde.
Hier ist ein Beispiel für eine CSP mit Berichtsfunktion:
Content-Security-Policy: default-src 'self'; report-uri /csp-violation-report-endpoint/
In diesem Fall würde der Browser, wenn ein Verstoß auftritt, einen POST-Request an /csp-violation-report-endpoint/ senden, der die Details des Verstoßes enthält.
Die Verknüpfung von Angular und dem Nonce Wert
Der Nonce Token wird vom Backend generiert und kann der Angular Anwendung bereit gestellt werden über:
import {bootstrapApplication, CSP_NONCE} from '@angular/core';
import {AppComponent} from './app/app.component';
bootstrapApplication(AppComponent, {
providers: [{
provide: CSP_NONCE,
useValue: myNonceService.getValue()
}]
});
Der Nonce Wert wird vom Backend gesetzt und beim ausliefern des Frontend Angular Projektes gesetzt über die index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="/" />
</head>
<body>
<app-root
data-nonce="MY_NONCE_PLACEHOLDER"></app-root>
</body>
</html>
Der Service Zum Auslesen sieht so aus:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class MyNonceService {
getValue(): string {
return document.querySelector<HTMLElement>('app-root')?.dataset['nonce'];
}
}
Jetzt muss das Backend so konfiguriert werden, dass es
- Bei jedem Request auf den Angular Code einen eindeutigen Nonce generiert und in den Header packt.
- Alle vorkommen von MY_NONCE_PLACEHOLDER ersetzt werden durch den Wert des Nonce.
Beispiel nginx Konfiguration:
add_header Content-Security-Policy "default-src 'self'; script-src 'nonce-${request_id}'; style-src 'nonce-${request_id}';";
Damit fügt der nginx dem Header den Nonce Wert hinzu.
Die request_id Variable wird vom nginx bei jedem Request automatisch berechnet und steht global zur Verfügung.
location / {
sub_filter MY_NONCE_PLACEHOLDER $request_id;
sub_filter_once off;
}
Diese Direktive sorgt dafür, dass jede Instanz von „MY_NONCE_PLACEHOLDER“ im HTML-Inhalt der Seite durch den Nonce Wert ersetzt wird.
Der CSP Header für Angular
Ab Angular Version 16:
default-src 'self'; style-src 'self' 'nonce-randomNonceGoesHere'; script-src 'self' 'nonce-randomNonceGoesHere';
Vor Version 16 war es notwendig ‚unsafe-inline‘ hinzuzufügen für die style-src:
default-src 'self'; style-src 'self' 'unsafe-inline' 'nonce-randomNonceGoesHere'; script-src 'self' 'nonce-randomNonceGoesHere';