MathMLElement.nonce — Eigenschaft · JavaScript-Referenz

Signatur

MathMLElement.nonce

Beschreibung

Die Eigenschaft nonce gehört zum Mixin HTMLOrSVGElement und steht daher auch auf MathMLElement zur Verfügung. Sie gibt den Wert des Inhaltsattributs nonce zurück, also eine „number used once“. Die Content Security Policy (CSP) vergleicht diesen Wert mit einer Direktive wie script-src 'nonce-…' oder style-src 'nonce-…'. So entscheidet sie, ob eine Ressource geladen oder ausgeführt werden darf.

Aus Sicherheitsgründen verbirgt der Browser das Attribut: Wenn ein Dokument mit CSP-Header geladen wird, entfernt er nach dem Einfügen des Elements den Attributwert (getAttribute("nonce") liefert dann ""). Der eigentliche Wert bleibt nur über die IDL-Eigenschaft element.nonce lesbar. Dadurch lässt er sich nicht über CSS-Attributselektoren abgreifen, etwa mit [nonce^="a"].

Bei MathML ist das in der Praxis selten relevant, weil MathML-Elemente selbst keine Skripte ausführen. Die Eigenschaft gibt es aber aus Gründen der Einheitlichkeit mit HTML- und SVG-Elementen. Nützlich ist sie vor allem für Framework- und Bibliothekscode, der Elemente generisch behandelt: zum Beispiel beim Klonen von Knoten, beim Weiterreichen einer Nonce an dynamisch erzeugte Elemente oder bei der Prüfung, ob ein Element eine gültige Nonce trägt.

Rückgabewert

Typ

string

Beschreibung

Der Nonce-Wert des Elements. Ist kein Nonce gesetzt, wird ein leerer String "" zurückgegeben. Die Eigenschaft ist beschreibbar.

Beispiele

Nonce eines MathML-Elements auslesen

// HTML: <math id="formel" nonce="r4nd0m123"><mi>x</mi></math>
const formel = document.getElementById("formel");

console.log(formel instanceof MathMLElement);
console.log(formel.nonce);
// Mit aktivem CSP-Header wurde das Attribut verborgen:
console.log(formel.getAttribute("nonce"));

true r4nd0m123 "" (bei aktiver CSP) bzw. "r4nd0m123" (ohne CSP)

Nonce auf dynamisch erzeugtes Element übertragen

const MATHML_NS = "http://www.w3.org/1998/Math/MathML";

// Nonce aus einem vorhandenen, vom Server ausgelieferten Skript übernehmen
const pageNonce = document.querySelector("script[nonce]")?.nonce ?? "";

const math = document.createElementNS(MATHML_NS, "math");
math.nonce = pageNonce;
math.innerHTML = "<mi>a</mi><mo>+</mo><mi>b</mi>";
document.body.append(math);

console.log(math.nonce === pageNonce);

true

Generische Prüfung für HTML-, SVG- und MathML-Elemente

const hasNonce = (el) =>
  "nonce" in el && typeof el.nonce === "string" && el.nonce.length > 0;

const elements = document.querySelectorAll("script, style, math");
for (const el of elements) {
  console.log(el.localName, hasNonce(el) ? "mit Nonce" : "ohne Nonce");
}

script mit Nonce style mit Nonce math ohne Nonce

// Wichtig · Fallstricke

Verbergen des Attributs: Ist eine CSP aktiv, liefert getAttribute("nonce") nach dem Einfügen einen leeren String. Lies den Wert deshalb immer über die Eigenschaft element.nonce.
Sicherheit: Eine Nonce muss bei jeder Antwort neu, kryptografisch zufällig und nicht erratbar erzeugt werden (mindestens 128 Bit, Base64-kodiert). Eine statische oder wiederverwendete Nonce hebelt die CSP aus. Gib die Nonce nie an nicht vertrauenswürdigen Code weiter. Wer sie im DOM auslesen kann, kann damit eigene Skripte zulassen.
Wird die Nonce nachträglich per JavaScript gesetzt, macht das ein bereits blockiertes Element nicht nachträglich erlaubt. Die Prüfung findet beim Laden bzw. Ausführen statt.
MathML-Elemente laden oder führen selbst keine Skripte aus. Die Eigenschaft dient hier vor allem der einheitlichen API mit HTMLElement und SVGElement.
Kompatibilität: MathMLElement und damit nonce gibt es in aktuellen Versionen von Chrome, Edge, Firefox und Safari. In älteren Browsern ohne MathML-Core-Unterstützung (z. B. Chrome vor Version 109) sind MathML-Elemente nur einfache Element-Instanzen ohne diese Eigenschaft.

Siehe auch

MathMLElement HTMLElement.nonce SVGElement.nonce MathMLElement.dataset Element.getAttribute() Document.createElementNS() HTMLTableElement.align