new SecurityPolicyViolationEvent() — Methode · JavaScript-Referenz

Signatur

new SecurityPolicyViolationEvent(type, options)

Beschreibung

Der Konstruktor SecurityPolicyViolationEvent() erzeugt ein Ereignisobjekt, wie es der Browser normalerweise selbst auslöst, wenn eine Ressource oder ein Skript gegen die Content Security Policy verstößt. Solche Ereignisse gehen an document, an betroffene Elemente oder an einen Worker und steigen dabei im DOM auf (Bubbling).

Selbst gebraucht wird der Konstruktor vor allem in Tests und beim Simulieren von CSP-Verstößen. So lässt sich zum Beispiel prüfen, ob die eigene Logik zum Melden von Verstößen (Telemetrie, Logging) richtig arbeitet, ohne dass man eine echte Richtlinienverletzung auslösen muss.

Seit der aktuellen Spezifikation sind im options-Objekt die Felder documentURI, effectiveDirective, originalPolicy, disposition und statusCode Pflicht. Ältere Browser lassen options auch ganz weg. Weil ein selbst erzeugtes Ereignis nicht vom Browser stammt, steht isTrusted immer auf false.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Name des Ereignisses, üblicherweise `"securitypolicyviolation"`.
$options Pflicht	object		Wörterbuch mit Ereignisdaten. Zusätzlich zu den Feldern aus `EventInit` (`bubbles`, `cancelable`, `composed`) gibt es folgende Felder: `documentURI` (string, Pflicht): URI des Dokuments, in dem der Verstoß passiert ist. `effectiveDirective` (string, Pflicht): Die Direktive, gegen die verstoßen wurde, z. B. `"script-src-elem"`. `originalPolicy` (string, Pflicht): Die vollständige Richtlinie als Text. `disposition` (`"enforce"` \| `"report"`, Pflicht): Gibt an, ob die Richtlinie durchgesetzt oder nur gemeldet wird. `statusCode` (number, Pflicht): HTTP-Statuscode des Dokuments. `blockedURI` (string): Die blockierte Ressource. `violatedDirective` (string): Veralteter Alias für `effectiveDirective`. `referrer`, `sourceFile`, `sample` (string): Referrer, Quelldatei und Codeausschnitt. `lineNumber`, `columnNumber` (number): Fundstelle im Quelltext.

Rückgabewert

Typ

SecurityPolicyViolationEvent

Beschreibung

Ein neues SecurityPolicyViolationEvent-Objekt, dessen Eigenschaften mit den Werten aus options belegt sind.

Beispiele

Ereignis erzeugen und Eigenschaften auslesen

const event = new SecurityPolicyViolationEvent('securitypolicyviolation', {
  documentURI: 'https://example.com/',
  effectiveDirective: 'script-src-elem',
  originalPolicy: "script-src 'self'",
  disposition: 'enforce',
  statusCode: 200,
  blockedURI: 'https://evil.example/tracker.js'
});

console.log(event.type);
console.log(event.effectiveDirective);
console.log(event.blockedURI);
console.log(event.isTrusted);

securitypolicyviolation script-src-elem https://evil.example/tracker.js false

CSP-Meldelogik testen durch simulierten Verstoß

const reports = [];

document.addEventListener('securitypolicyviolation', (e) => {
  reports.push({
    directive: e.effectiveDirective,
    blocked: e.blockedURI,
    line: e.lineNumber
  });
});

// Verstoß simulieren
document.dispatchEvent(new SecurityPolicyViolationEvent('securitypolicyviolation', {
  documentURI: location.href,
  effectiveDirective: 'img-src',
  originalPolicy: "img-src 'self'",
  disposition: 'report',
  statusCode: 200,
  blockedURI: 'https://cdn.example/bild.png',
  lineNumber: 42,
  bubbles: true
}));

console.log(reports);

[{ directive: 'img-src', blocked: 'https://cdn.example/bild.png', line: 42 }]

Echte Verstöße an einen Server melden (on-Property)

document.onsecuritypolicyviolation = async (e) => {
  await fetch('/csp-report', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      directive: e.effectiveDirective,
      blocked: e.blockedURI,
      source: e.sourceFile,
      sample: e.sample,
      trusted: e.isTrusted
    }),
    keepalive: true
  });
};

// Wichtig · Fallstricke

Pflichtfelder: Moderne Browser werfen einen TypeError, wenn in options Pflichtfelder wie documentURI, effectiveDirective, originalPolicy, disposition oder statusCode fehlen.
Bubbling: Wenn nichts angegeben ist, gilt bubbles: false. Der Browser selbst löst das Ereignis dagegen mit Bubbling aus. Für realistische Tests setzt man daher bubbles: true und composed: true.
Sicherheit: Ein selbst erzeugtes Ereignis hat isTrusted === false. Das Ereignis löst keine echte CSP-Meldung aus und sendet nichts an report-uri oder report-to. Da jedes Skript auf der Seite gefälschte Ereignisse auslösen kann, sollte ein Handler, der Verstöße meldet, isTrusted prüfen.
violatedDirective ist veraltet. Stattdessen effectiveDirective verwenden.
sample enthält höchstens 40 Zeichen und nur dann einen Wert, wenn die Richtlinie 'report-sample' enthält.
Kompatibilität: Chromium, Firefox und Safari unterstützen den Konstruktor. Im Internet Explorer gibt es ihn nicht.

Siehe auch

SecurityPolicyViolationEvent new Event() new DocumentPictureInPictureEvent() new GPUValidationError() new DeviceOrientationEvent()