CSPViolationReport.sourceFile — Eigenschaft · JavaScript-Referenz

Signatur

CSPViolationReport.sourceFile

Beschreibung

sourceFile ist eine schreibgeschützte Eigenschaft des Dictionaries CSPViolationReport. Dieses Objekt steckt im Feld body eines Berichts vom Typ "csp-violation" aus der Reporting API. Die Eigenschaft nennt die URL der Ressource, deren Code den Verstoß ausgelöst hat. Beispiel: Ein externes Skript ruft eval() auf, obwohl die Richtlinie 'unsafe-eval' nicht erlaubt. Dann steht in sourceFile die URL dieses Skripts.

Den Wert erhalten Sie auf zwei Wegen:

clientseitig über einen ReportingObserver mit types: ["csp-violation"],
serverseitig als JSON-Bericht, den der Browser an den Endpunkt schickt, der in der CSP-Direktive report-to und im HTTP-Header Reporting-Endpoints festgelegt ist.

Zusammen mit lineNumber und columnNumber zeigt sourceFile genau auf die Stelle im Code, die gegen die Richtlinie verstößt. Das ist beim Einführen einer strengen CSP sehr hilfreich, zum Beispiel im Modus Content-Security-Policy-Report-Only. So finden Sie heraus, welche eigenen Skripte oder Drittanbieter-Skripte noch Inline-Code, eval oder nicht erlaubte Quellen verwenden.

Verwechseln Sie sourceFile nicht mit blockedURL. blockedURL ist die Ressource, die blockiert wurde, etwa ein Bild von einer fremden Domain. sourceFile ist die Datei, deren Code den Verstoß verursacht hat.

Rückgabewert

Typ

string | null

Beschreibung

Die URL der Quelldatei als Zeichenkette. null, wenn der Browser keine Quelldatei ermitteln kann. Bei Verstößen in Inline-Code steht hier meist die URL des Dokuments.

Beispiele

CSP-Verstöße clientseitig mit ReportingObserver erfassen

const observer = new ReportingObserver((reports) => {
  for (const report of reports) {
    const { sourceFile, lineNumber, columnNumber, effectiveDirective } = report.body;
    console.log(
      `Verstoß gegen ${effectiveDirective} in ${sourceFile ?? 'unbekannt'}:${lineNumber}:${columnNumber}`
    );
  }
}, { types: ['csp-violation'], buffered: true });

observer.observe();

// Löst bei CSP ohne 'unsafe-eval' einen Verstoß aus
try {
  eval('1 + 1');
} catch (err) {
  console.warn('eval blockiert:', err.message);
}

eval blockiert: Refused to evaluate a string as JavaScript ... Verstoß gegen script-src in https://example.com/js/app.js:12:3

Berichte serverseitig mit Node.js/Express entgegennehmen

// HTTP-Header der Seite:
// Reporting-Endpoints: csp="https://example.com/csp-reports"
// Content-Security-Policy: script-src 'self'; report-to csp

import express from 'express';

const app = express();
app.use(express.json({ type: ['application/reports+json', 'application/json'] }));

app.post('/csp-reports', (req, res) => {
  const reports = Array.isArray(req.body) ? req.body : [req.body];
  for (const report of reports) {
    if (report.type !== 'csp-violation') continue;
    const { sourceFile, blockedURL, lineNumber } = report.body;
    console.log(`Quelle: ${sourceFile} (Zeile ${lineNumber}) -> blockiert: ${blockedURL}`);
  }
  res.sendStatus(204);
});

app.listen(3000);

Quelle: https://example.com/js/widget.js (Zeile 48) -> blockiert: https://tracker.example.net/pixel.gif

Verstöße nach Quelldatei gruppieren

const counts = new Map();

const observer = new ReportingObserver((reports) => {
  for (const { body } of reports) {
    const key = body.sourceFile ?? '(ohne Quelle)';
    counts.set(key, (counts.get(key) ?? 0) + 1);
  }
  console.table(Object.fromEntries(counts));
}, { types: ['csp-violation'] });

observer.observe();

┌──────────────────────────────────────┬────────┐ │ (index) │ Values │ ├──────────────────────────────────────┼────────┤ │ https://cdn.example.com/lib.js │ 3 │ │ https://example.com/ │ 1 │ └──────────────────────────────────────┴────────┘

// Wichtig · Fallstricke

Kann null sein: Prüfen Sie den Wert vor der Weiterverarbeitung, zum Beispiel mit ??.
Datenschutz und Herkunft: Ist die Quelldatei ursprungsübergreifend (Cross-Origin), kann der Browser die URL kürzen, etwa bis auf den Origin. Fragmente (#...) werden entfernt. Rechnen Sie nicht immer mit der vollständigen URL.
Inline-Code: Bei Verstößen durch Inline-Skripte oder Event-Handler-Attribute steht in sourceFile meist die Dokument-URL und keine eigene Datei. Das Feld sample hilft dann bei der Zuordnung.
Altes Format: Beim veralteten report-uri heißt das Feld source-file (Bindestrich-Schreibweise) im JSON-Objekt csp-report. Die Reporting API mit report-to verwendet dagegen sourceFile.
Browser-Kompatibilität: Berichte vom Typ csp-violation über ReportingObserver und Reporting-Endpoints gibt es vor allem in Chromium-Browsern. Für breitere Unterstützung können Sie zusätzlich das Ereignis securitypolicyviolation (SecurityPolicyViolationEvent.sourceFile) auswerten.
Sicherheit: Berichts-Endpunkte nehmen Daten ohne Authentifizierung an. Validieren und begrenzen Sie eingehende Berichte, und geben Sie sourceFile nie ungefiltert als HTML aus (XSS-Gefahr im Admin-Dashboard).

Siehe auch

CSPViolationReport.columnNumber CSPViolationReport.sample CSPViolationReport.referrer CSPViolationReport.statusCode CSPViolationReport.blockedURL