CSPViolationReport.blockedURL — Eigenschaft · JavaScript-Referenz

Signatur

CSPViolationReport.blockedURL

Beschreibung

blockedURL ist ein Feld des Wörterbuchs CSPViolationReport. Dieses Wörterbuch ist der body eines Berichts vom Typ "csp-violation" in der Reporting API. Das Feld gibt an, was blockiert wurde: zum Beispiel ein externes Skript, ein Bild, ein iframe oder ein Ziel von fetch().

Handelt es sich um eine echte Ressource, steht dort ihre URL. Bei manchen Verstößen gibt es keine URL. Dann steht im Feld eines dieser Schlüsselwörter:

"inline": Inline-Skript, Inline-Style oder ein Event-Handler-Attribut
"eval": eval(), new Function() oder etwas Ähnliches
"wasm-eval": WebAssembly-Kompilierung ohne 'wasm-unsafe-eval'
"trusted-types-policy" bzw. "trusted-types-sink": Verstöße gegen Trusted Types

Sie erhalten den Wert auf zwei Wegen:

Im Browser über einen ReportingObserver mit types: ["csp-violation"]
Auf dem Server: Setzen Sie Reporting-Endpoints zusammen mit der CSP-Direktive report-to. Der Browser sendet die Berichte dann als JSON (application/reports+json) an den angegebenen Endpunkt. Dort steht der Wert unter body.blockedURL.

Das Feld eignet sich vor allem zur Fehlersuche, wenn Sie eine Richtlinie einführen, etwa im Modus Content-Security-Policy-Report-Only. Zusammen mit effectiveDirective sehen Sie, welche Quellen Ihnen in der Richtlinie noch fehlen.

Rückgabewert

Typ

string | null

Beschreibung

Die absolute URL der blockierten Ressource oder ein Schlüsselwort wie "inline", "eval" oder "wasm-eval". Bei Weiterleitungen über Ursprungsgrenzen hinweg wird die URL auf den Ursprung gekürzt. Kann in Sonderfällen null oder leer sein.

Beispiele

CSP-Verstöße im Browser mit ReportingObserver protokollieren

// Die Seite wurde z. B. ausgeliefert mit:
// Content-Security-Policy: script-src 'self'
const observer = new ReportingObserver((reports) => {
  for (const report of reports) {
    const { blockedURL, effectiveDirective } = report.body;
    console.log(`Blockiert: ${blockedURL} (Direktive: ${effectiveDirective})`);
  }
}, { types: ['csp-violation'], buffered: true });

observer.observe();

// Löst einen Verstoß aus, weil eine fremde Quelle nicht erlaubt ist
const script = document.createElement('script');
script.src = 'https://cdn.example.com/tracker.js';
document.head.append(script);

Blockiert: https://cdn.example.com/tracker.js (Direktive: script-src-elem)

Schlüsselwörter von echten URLs unterscheiden

const KEYWORDS = new Set(['inline', 'eval', 'wasm-eval', 'trusted-types-policy', 'trusted-types-sink']);

const classify = (blockedURL) => {
  if (!blockedURL) return 'unbekannt';
  if (KEYWORDS.has(blockedURL)) return `Schlüsselwort: ${blockedURL}`;
  return `Ressource von ${new URL(blockedURL).origin}`;
};

const observer = new ReportingObserver((reports) => {
  reports.forEach(({ body }) => console.log(classify(body.blockedURL)));
}, { types: ['csp-violation'] });
observer.observe();

// Löst einen Verstoß aus, wenn 'unsafe-eval' fehlt
try { eval('1 + 1'); } catch (e) { /* EvalError */ }

Schlüsselwort: eval

Berichte serverseitig mit Node.js/Express auswerten

// Response-Header der Seite:
// Reporting-Endpoints: csp="https://example.com/csp-reports"
// Content-Security-Policy-Report-Only: default-src 'self'; report-to csp
import express from 'express';

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

app.post('/csp-reports', (req, res) => {
  const reports = Array.isArray(req.body) ? req.body : [];
  reports
    .filter((r) => r.type === 'csp-violation')
    .forEach(({ url, body }) => {
      console.log(`[CSP] ${url} -> ${body.blockedURL} (${body.effectiveDirective})`);
    });
  res.sendStatus(204);
});

app.listen(3000);

[CSP] https://example.com/ -> https://fonts.example.net/font.woff2 (font-src)

// Wichtig · Fallstricke

Browserunterstützung: ReportingObserver und report-to werden vollständig nur von Chromium-Browsern unterstützt. In Firefox und Safari ist die Unterstützung teilweise oder fehlt. Wer auch diese Browser erreichen will, verwendet zusätzlich die veraltete Direktive report-uri oder das Event securitypolicyviolation.
Andere Feldnamen: Das DOM-Event SecurityPolicyViolationEvent nennt den Wert blockedURI. Das alte report-uri-JSON nennt ihn "blocked-uri". Nur die Reporting API verwendet blockedURL in camelCase.
Datenschutz: Wurde eine Anfrage über Ursprungsgrenzen hinweg weitergeleitet, meldet der Browser nur den Ursprung und nicht den vollständigen Pfad. So gelangen keine sensiblen Weiterleitungsziele nach außen.
Kein URL-Parsing ohne Prüfung: Das Feld kann Schlüsselwörter wie "inline" oder "eval" enthalten. new URL(blockedURL) löst dann einen TypeError aus.
Sicherheit: Berichte an einen Server-Endpunkt kann jeder fälschen. Behandeln Sie blockedURL dort als nicht vertrauenswürdige Eingabe. Escapen Sie den Wert, bevor Sie ihn in einem Dashboard anzeigen, sonst droht XSS. Begrenzen Sie außerdem die Menge der Berichte (Rate Limiting).
Browser-Erweiterungen erzeugen oft Berichte, die mit Ihrer Seite nichts zu tun haben, etwa mit chrome-extension://-URLs. Filtern Sie solche Einträge bei der Auswertung heraus.

Siehe auch

CSPViolationReport.documentURL CSPViolationReport.lineNumber CSPViolationReport.referrer CSPViolationReport.sample CSPViolationReport.sourceFile