HTMLFormElement.relList — Eigenschaft · JavaScript-Referenz

Signatur

HTMLFormElement.relList

Beschreibung

Die schreibgeschützte Eigenschaft relList von HTMLFormElement gibt eine dynamische DOMTokenList zurück. Sie enthält die Link-Typen, die die Beziehung zwischen dem aktuellen Dokument und der Ressource beschreiben, die beim Absenden des Formulars entsteht. Die Werte kommen aus dem HTML-Attribut rel des <form>-Elements.

Für Formulare sind vor allem diese Link-Typen wichtig:

noopener: Die Zielseite bekommt keinen Zugriff auf window.opener.
noreferrer: Der Browser sendet keinen Referer-Header. Außerdem wirkt noopener automatisch mit.
opener: Hebt das Standardverhalten noopener bei target="_blank" ausdrücklich auf.
external, help, license, next, prev, search und nofollow beschreiben die Beziehung nur inhaltlich.

Die Eigenschaft selbst ist schreibgeschützt. Die Liste lässt sich aber mit den Methoden von DOMTokenList ändern: add(), remove(), toggle() und replace(). Jede Änderung wird sofort in das rel-Attribut übernommen. Mit supports() lässt sich außerdem prüfen, ob der Browser einen bestimmten Link-Typ für Formulare kennt. Gegenüber dem Bearbeiten der Zeichenkette form.rel hat das den Vorteil, dass man die Tokens nicht selbst trennen und zusammensetzen muss.

Rückgabewert

Typ

DOMTokenList

Beschreibung

Eine dynamische Liste der Link-Typen aus dem rel-Attribut. Ohne rel-Attribut ist sie leer (length === 0).

Beispiele

Link-Typen eines Formulars auslesen

// HTML: <form id="suche" action="/suche" rel="search noopener"></form>
const form = document.getElementById('suche');

console.log(form.relList.length);
for (const typ of form.relList) {
  console.log(typ);
}
console.log(form.relList.contains('search'));

2 search noopener true

Formular in neuem Tab sicher absenden

// Formular, das in einem neuen Tab absendet, gegen Tabnabbing absichern
const form = document.querySelector('form[target="_blank"]');

if (form && !form.relList.contains('noopener')) {
  form.relList.add('noopener', 'noreferrer');
}

console.log(form.rel);

noopener noreferrer

Unterstützung per supports() prüfen

const form = document.createElement('form');

// Prüft, ob der Browser relList für <form> und 'noreferrer' kennt
if ('relList' in form && form.relList.supports('noreferrer')) {
  form.relList.add('noreferrer');
  console.log('noreferrer gesetzt:', form.getAttribute('rel'));
} else {
  // Rückfall für ältere Browser
  form.setAttribute('rel', 'noreferrer');
  console.log('Rückfall über setAttribute');
}

noreferrer gesetzt: noreferrer

Tokens umschalten und ersetzen

const form = document.createElement('form');
form.rel = 'external nofollow';

form.relList.toggle('nofollow'); // entfernt nofollow
form.relList.replace('external', 'help');
form.relList.toggle('noopener', true); // erzwingt Hinzufügen

console.log(form.rel);
console.log([...form.relList]);

help noopener ["help", "noopener"]

// Wichtig · Fallstricke

Schreibgeschützt: Die Zuweisung form.relList = 'noopener' ersetzt die Liste nicht. In der Praxis wird die Zuweisung (per [PutForwards=value]) an relList.value weitergeleitet und setzt damit das rel-Attribut. Klarer ist es, form.rel zu setzen oder add()/remove() zu verwenden.
Browser-Kompatibilität: relList und das rel-Attribut an <form> gibt es erst in neueren Versionen: Chrome/Edge 103, Firefox 111 und Safari 16.4. Vorher war die Eigenschaft undefined. Prüfen Sie deshalb mit 'relList' in HTMLFormElement.prototype, ob sie vorhanden ist.
Sicherheit: Formulare mit target="_blank" verhalten sich in aktuellen Browsern standardmäßig wie noopener. Setzen Sie noopener trotzdem ausdrücklich, damit ältere Browser keinen Zugriff auf window.opener erlauben (Reverse Tabnabbing). Mit noreferrer sendet der Browser beim Absenden keine Referrer-Informationen an Fremdseiten.
supports() meldet nur Link-Typen, die für <form> Auswirkungen haben, zum Beispiel noopener, noreferrer und opener. Rein inhaltliche Link-Typen wie help kann man trotzdem hinzufügen.
Die Tokens werden durch Leerzeichen getrennt. Groß-/Kleinschreibung wird bei contains() berücksichtigt, doppelte Tokens werden automatisch entfernt.

Siehe auch

HTMLFormElement.acceptCharset HTMLFormElement.rel HTMLFormElement.action HTMLFormElement.elements HTMLFormElement.length