SVGAElement.referrerPolicy — Eigenschaft · JavaScript-Referenz

Signatur

SVGAElement.referrerPolicy

Beschreibung

Die Eigenschaft referrerPolicy der Schnittstelle SVGAElement spiegelt das Inhaltsattribut referrerpolicy eines SVG-<a>-Elements wider. Sie bestimmt, welche Informationen im Referer-Header mitgeschickt werden, wenn der Benutzer dem Link folgt. Sie funktioniert genauso wie HTMLAnchorElement.referrerPolicy bei HTML-Links.

Gültige Werte sind:

"" (leer): Es gilt die Standard-Policy des Dokuments, meist strict-origin-when-cross-origin.
no-referrer: Es wird nie ein Referrer gesendet.
no-referrer-when-downgrade: Kein Referrer beim Wechsel von HTTPS auf HTTP.
origin: Nur der Ursprung wird gesendet (Schema, Host, Port).
origin-when-cross-origin: Bei gleichem Ursprung die volle URL, sonst nur der Ursprung.
same-origin: Ein Referrer wird nur bei gleichem Ursprung gesendet.
strict-origin: Nur der Ursprung, und bei einem Downgrade gar nichts.
strict-origin-when-cross-origin: Bei gleichem Ursprung die volle URL, bei fremdem Ursprung nur der Ursprung, bei einem Downgrade nichts.
unsafe-url: Immer die volle URL, auch bei einem Downgrade.

Die Eigenschaft ist nützlich, wenn du in interaktiven SVG-Grafiken wie Karten, Diagrammen oder Infografiken Links auf fremde Seiten einbaust und dabei den Datenschutz steuern willst. So verhinderst du zum Beispiel, dass URLs mit Sitzungs- oder Suchparametern an Dritte weitergegeben werden.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Setzen einer der gültigen Policy-Werte, z. B. `"no-referrer"`. Ungültige Werte führen beim Lesen zu `""`.

Rückgabewert

Typ

string

Beschreibung

Die aktuelle Referrer-Policy als String. Ist das Attribut nicht gesetzt oder ungültig, ist der Wert "".

Beispiele

Policy eines SVG-Links auslesen

// <svg><a id="doku" href="https://example.com" referrerpolicy="origin"><text y="20">Doku</text></a></svg>
const link = document.querySelector('svg a#doku');
console.log(link.referrerPolicy);

origin

Alle externen Links in einer SVG-Grafik absichern

const svg = document.querySelector('#infografik');

svg.querySelectorAll('a').forEach((a) => {
  const url = new URL(a.href.baseVal, location.href);
  if (url.origin !== location.origin) {
    a.referrerPolicy = 'no-referrer';
    a.setAttribute('target', '_blank');
  }
});

console.log(svg.querySelector('a').getAttribute('referrerpolicy'));

no-referrer

SVG-Link dynamisch erzeugen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

const a = document.createElementNS(SVG_NS, 'a');
a.setAttribute('href', 'https://partner.example/karte');
a.referrerPolicy = 'strict-origin-when-cross-origin';

const text = document.createElementNS(SVG_NS, 'text');
text.setAttribute('y', '40');
text.textContent = 'Zur Partnerkarte';

a.append(text);
svg.append(a);
console.log(a.referrerPolicy);

strict-origin-when-cross-origin

Ungültiger Wert wird verworfen

const a = document.createElementNS('http://www.w3.org/2000/svg', 'a');
a.referrerPolicy = 'irgendwas';
console.log(JSON.stringify(a.referrerPolicy));
console.log(a.getAttribute('referrerpolicy'));

"" irgendwas

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Eigenschaft wird in Chromium und Firefox schon länger unterstützt, in Safari aber erst seit neueren Versionen. Prüfe die Unterstützung vorher mit 'referrerPolicy' in SVGAElement.prototype. Als Rückfalllösung kannst du das Attribut direkt mit setAttribute('referrerpolicy', …) setzen oder rel="noreferrer" verwenden.
Bei SVGAElement ist href kein String, sondern ein SVGAnimatedString. Die URL liest du über a.href.baseVal aus.
SVG-Elemente musst du mit document.createElementNS() im SVG-Namensraum erzeugen, sonst entsteht ein normales HTML-Element.
unsafe-url kann sensible Daten aus Pfad und Query-String (Tokens, Suchbegriffe) an Dritte weitergeben. Setze es nur ein, wenn es wirklich nötig ist.
Die Policy gilt nur für die Navigation über diesen Link. Eine Policy im Link hat Vorrang vor der Policy des Dokuments, die per Referrer-Policy-Header oder <meta name="referrer"> festgelegt ist.

Siehe auch

SVGAElement SVGAElement.rel SVGAElement.target SVGAElement.href HTMLAnchorElement.referrerPolicy Document.referrer HTMLAreaElement.referrerPolicy