SecurityPolicyViolationEvent.columnNumber — Eigenschaft · JavaScript-Referenz

Signatur

SecurityPolicyViolationEvent.columnNumber

Beschreibung

Die schreibgeschützte Eigenschaft columnNumber eines SecurityPolicyViolationEvent gibt die Zeichenposition (Spalte) in der Zeile der Quelldatei an, in der der CSP-Verstoß passiert ist. Das kann ein Dokument oder ein Worker-Skript sein. Die Datei selbst steht in sourceFile, die Zeile in lineNumber.

Nützlich ist die Eigenschaft vor allem beim Debuggen und Überwachen einer CSP. Zusammen mit sourceFile und lineNumber lässt sich genau feststellen, welcher Code gegen die Richtlinie verstoßen hat, zum Beispiel ein Inline-Skript, ein eval()-Aufruf oder ein nachgeladenes Fremdskript. Diese Angaben kann man dann an einen eigenen Logging-Endpunkt schicken.

Wenn der Browser keine Position ermitteln kann, ist der Wert 0. Das kommt häufig vor, etwa wenn eine blockierte Ressource über ein HTML-Attribut und nicht aus einem Skript heraus angefordert wurde.

Rückgabewert

Typ

number

Beschreibung

Eine positive Ganzzahl für die Spalte in der Quellzeile. Ist die Position unbekannt, ist der Wert 0.

Beispiele

Position eines CSP-Verstoßes protokollieren

document.addEventListener('securitypolicyviolation', (event) => {
  const { sourceFile, lineNumber, columnNumber, violatedDirective } = event;
  console.log(`${violatedDirective} verletzt in ${sourceFile}:${lineNumber}:${columnNumber}`);
});

// Löst bei einer 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 ... script-src verletzt in https://example.com/app.js:7:3

Verstöße an einen eigenen Logging-Endpunkt senden

const reportViolation = (event) => {
  const payload = {
    directive: event.effectiveDirective,
    blockedURI: event.blockedURI,
    file: event.sourceFile || null,
    line: event.lineNumber || null,
    // 0 bedeutet: Position unbekannt
    column: event.columnNumber > 0 ? event.columnNumber : null
  };
  navigator.sendBeacon('/csp-log', JSON.stringify(payload));
};

document.addEventListener('securitypolicyviolation', reportViolation);

Ereignis zum Testen selbst erzeugen

const event = new SecurityPolicyViolationEvent('securitypolicyviolation', {
  blockedURI: 'https://evil.example/x.js',
  violatedDirective: 'script-src',
  effectiveDirective: 'script-src',
  originalPolicy: "script-src 'self'",
  disposition: 'enforce',
  statusCode: 200,
  sourceFile: 'https://example.com/main.js',
  lineNumber: 12,
  columnNumber: 25
});

console.log(event.columnNumber);

25

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an event.columnNumber wird ignoriert. Im Strict Mode löst sie einen TypeError aus. Eigene Werte lassen sich nur über das Init-Dictionary des Konstruktors setzen.
Wert 0: Wenn keine Position bekannt ist, liefert die Eigenschaft 0 und nicht null. Das sollte man beim Auswerten gesondert behandeln.
Zählweise: Ob die Spalten ab 0 oder ab 1 gezählt werden, handhaben die Browser nicht ganz einheitlich. Deshalb ist der Wert nur als ungefährer Hinweis zu verstehen.
Datenschutz und Herkunft: Bei Skripten von fremden Ursprüngen kann der Browser sourceFile und die Positionsangaben kürzen oder leer lassen, damit keine Informationen über Ursprungsgrenzen hinweg nach außen gelangen.
Nur Report-Modus: Auch bei Content-Security-Policy-Report-Only wird das Ereignis ausgelöst. In diesem Fall hat disposition den Wert "report".
Das Ereignis wird auf document, auf Elementen und in Workern auf self ausgelöst. Es steigt im DOM auf (Bubbling).

Siehe auch

SecurityPolicyViolationEvent.lineNumber SecurityPolicyViolationEvent.documentURI SecurityPolicyViolationEvent.sourceFile SecurityPolicyViolationEvent.referrer SecurityPolicyViolationEvent.sample