CSPViolationReport: referrer-Eigenschaft
Baseline 2026
Neu verfügbar
Seit März 2026 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Die referrer-Eigenschaft des CSPViolationReport-Wörterbuchs ist ein String, der die URL der verweisenden Seite der Ressource darstellt, deren Content Security Policy (CSP) verletzt wurde.
Der Referrer ist die Seite, die dazu führte, dass die Seite mit der CSP-Verletzung geladen wurde. Wenn wir beispielsweise einem Link zu einer Seite mit einer CSP-Verletzung gefolgt sind, ist der referrer die Seite, von der aus wir navigiert haben.
Wert
Ein String, der die URL des Referrers der Seite mit der CSP-Verletzung darstellt, oder null.
Beachten Sie, dass, wenn der Referrer eine HTTP(S)-URL ist, jeglicher Benutzername, Passwort oder Fragment entfernt wird.
Wenn das URL-Schema nicht http: oder https: ist, wird nur das Schema zurückgegeben.
Beispiele
CSP-Inline-Skript-Verletzung mit Referreranzeige
Dieses Beispiel löst eine CSP-Verletzung mit einem Inline-Skript aus und meldet die Verletzung mithilfe eines ReportingObserver.
Wir navigieren von einer anderen Seite zu der Seite und protokollieren den referrer, documentURL und blockedURL.
HTML
Zuerst definieren wir unsere Referrer-Seite /bounce/index.html.
Diese Seite enthält lediglich einen Link zu einer anderen Seite ../report_sample/index.html.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<ul>
<li><a href="../report_sample/">report sample</a></li>
</ul>
</body>
</html>
Die HTML-Datei ../report_sample/index.html wird unten definiert.
Diese verwendet das <meta>-Element, um die Content-Security-Policy script-src-elem auf self zu setzen, was bedeutet, dass Skripte aus derselben Domain geladen werden dürfen, Inline-Skripte jedoch nicht ausgeführt werden dürfen.
Das Dokument enthält auch ein Inline-Skript, das eine CSP-Verletzung auslösen wird.
<!doctype html>
<!-- /report_sample/index.html -->
<html lang="en">
<head>
<meta
http-equiv="Content-Security-Policy"
content="script-src-elem 'self' 'report-sample'" />
<script src="main.js"></script>
</head>
<body>
<script>
const int = 4;
</script>
</body>
</html>
JavaScript (main.js)
Das oben beschriebene Beispiel lädt auch das externe Skript main.js, das unten angezeigt wird.
Da dies aus der gleichen Domain wie das HTML geladen wird, wird es nicht durch die CSP blockiert.
Das Skript erstellt einen neuen ReportingObserver, um Berichte über Inhaltsverletzungen des Typs "csp-violation" zu beobachten.
Jedes Mal, wenn die Callback-Funktion aufgerufen wird, erhalten wir den Körper des ersten Eintrags des Reports-Arrays und verwenden ihn, um die Verletzung documentURL, referrer und blockedURL in der Konsole zu protokollieren.
// main.js
const observer = new ReportingObserver(
(reports, observer) => {
console.log(`documentURL: ${reports[0].body.referrer}`);
console.log(`referrer: ${reports[0].body.referrer}`);
console.log(`blockedURL: ${reports[0].body.blockedURL}`);
},
{
types: ["csp-violation"],
buffered: true,
},
);
observer.observe();
Beachten Sie, dass, obwohl mehrere Berichte im zurückgegebenen Array sein könnten, wir aus Gründen der Kürze nur die Werte des ersten Elements protokollieren.
Ergebnisse
Die Konsolenausgabe für den obigen Code würde ungefähr so aussehen (die Seite hängt davon ab, wie die Seiten bereitgestellt werden):
documentURL: http://127.0.0.1:9999/report_sample/ referrer: http://127.0.0.1:9999/bounce/ blockedURL: inline
Beachten Sie, dass referrer die Seite ist, von der aus wir navigiert haben, documentURL die Seite mit der CSP-Verletzung ist und blockedURL in diesem Fall keine URL ist, sondern ein Hinweis darauf, dass die Verletzung durch ein unsicheres Inline-Skript verursacht wurde.
Spezifikationen
| Spezifikation |
|---|
| Content Security Policy Level 3 # reporting |