Signatur
Beschreibung
Die Eigenschaft referrerPolicy eines HTMLAreaElement legt fest, welche Referrer-Informationen der Browser mitsendet, wenn ein Nutzer auf einen verlinkten Bereich einer Image-Map (<map>/<area>) klickt. Sie spiegelt das Inhaltsattribut referrerpolicy wider: Beim Lesen wird der aktuelle Wert zurückgegeben, beim Schreiben wird das Attribut im DOM aktualisiert.
Erlaubte Werte sind:
no-referrer– es wird keinReferer-Header gesendet.no-referrer-when-downgrade– kein Referrer beim Wechsel von HTTPS zu HTTP.origin– nur der Ursprung (Schema, Host, Port) wird gesendet.origin-when-cross-origin– volle URL bei gleichem Ursprung, sonst nur der Ursprung.same-origin– Referrer nur bei gleichem Ursprung.strict-origin– nur Ursprung, und nur ohne Sicherheits-Downgrade.strict-origin-when-cross-origin– Standardverhalten moderner Browser.unsafe-url– immer die volle URL (inkl. Pfad und Query), auch bei HTTP.
Die Eigenschaft ist nützlich, wenn einzelne Bereiche einer Image-Map auf externe Seiten verweisen und dabei keine internen URLs (z. B. mit Session-Parametern oder Suchbegriffen) preisgeben sollen. Ist kein Attribut gesetzt, liefert sie einen leeren String, und es greift die Richtlinie des Dokuments (z. B. aus dem Referrer-Policy-HTTP-Header oder einem <meta name="referrer">).
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Beim Setzen: einer der gültigen Referrer-Policy-Werte, z. B. "no-referrer" oder "origin". Ungültige Werte werden beim Lesen als leerer String zurückgegeben. |
Rückgabewert
"", wenn kein bzw. ein ungültiger Wert gesetzt ist.Beispiele
Referrer-Richtlinie auslesen
// HTML: <map name="karte"><area id="berlin" shape="rect" coords="0,0,100,100" href="https://example.com/berlin" referrerpolicy="origin" alt="Berlin"></map>
const area = document.getElementById('berlin');
console.log(area.referrerPolicy);Alle externen Bereiche einer Image-Map absichern
const areas = document.querySelectorAll('map[name="karte"] area[href]');
areas.forEach((area) => {
const ziel = new URL(area.href, location.href);
// Externe Links sollen keinen Referrer erhalten
if (ziel.origin !== location.origin) {
area.referrerPolicy = 'no-referrer';
}
});
console.log([...areas].map((a) => `${a.alt}: ${a.referrerPolicy || '(Dokument-Standard)'}`));Dynamisch erzeugtes area-Element
const map = document.createElement('map');
map.name = 'produkte';
const area = document.createElement('area');
area.shape = 'circle';
area.coords = '50,50,40';
area.href = 'https://partner.example.org/angebot';
area.alt = 'Partnerangebot';
area.referrerPolicy = 'strict-origin-when-cross-origin';
map.append(area);
document.body.append(map);
// Die Eigenschaft wird als Attribut reflektiert
console.log(area.getAttribute('referrerpolicy'));Ungültige Werte erkennen
const area = document.createElement('area');
area.referrerPolicy = 'geheim';
console.log(area.getAttribute('referrerpolicy')); // Attribut enthält den Rohwert
console.log(JSON.stringify(area.referrerPolicy)); // Eigenschaft liefert leeren String// Wichtig · Fallstricke
Ungültige Werte: Wird ein unbekannter Wert gesetzt, landet er zwar im Attribut, die Eigenschaft liefert aber "" und es gilt die Richtlinie des Dokuments. Eine Fehlermeldung gibt es nicht – Tippfehler bleiben also leicht unbemerkt.
Datenschutz: unsafe-url überträgt die vollständige URL inklusive Query-String auch an fremde Ursprünge und über unverschlüsseltes HTTP. Das kann Tokens, Suchbegriffe oder Nutzer-IDs preisgeben – nur mit gutem Grund verwenden.
Zusammenspiel mit rel: Ein rel="noreferrer" auf dem <area> unterdrückt den Referrer unabhängig von referrerPolicy und setzt zusätzlich noopener.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt; Safari erst ab Version 14.1. Der Internet Explorer kennt die Eigenschaft nicht. Der Standardwert ohne Angabe ist in modernen Browsern strict-origin-when-cross-origin.