HTMLFormElement.rel — Eigenschaft · JavaScript-Referenz

Signatur

HTMLFormElement.rel

Beschreibung

Die Eigenschaft rel des Interfaces HTMLFormElement spiegelt das HTML-Attribut rel eines <form>-Elements wider. Sie legt fest, in welcher Beziehung das aktuelle Dokument zur Zielressource steht, an die das Formular gesendet wird (festgelegt über action). Beim Lesen erhältst du den Attributwert als String. Beim Schreiben setzt du das Attribut direkt.

Der Wert ist eine Liste von Linktypen, die durch Leerzeichen getrennt sind. Bei Formularen sind vor allem diese Linktypen wichtig:

noopener: Die geöffnete Seite bekommt keinen Zugriff über window.opener.
noreferrer: Der Browser sendet keinen Referer-Header mit. Dieser Wert schließt noopener ein.
opener: Die Zielseite darf window.opener verwenden. Damit hebst du das Standardverhalten bei target="_blank" auf.
nofollow, external, help, license, next, prev, search: Diese Werte beschreiben die Beziehung inhaltlich.

Du brauchst rel vor allem dann, wenn ein Formular mit target="_blank" an eine fremde Seite gesendet wird und du Tabnabbing oder das Weitergeben der aktuellen URL verhindern willst. Wenn du einzelne Werte hinzufügen oder entfernen willst, ist die Eigenschaft relList (eine DOMTokenList) meist bequemer als der rohe String.

Parameter

Name	Typ	Default	Beschreibung
$wert	string	""	Nur beim Setzen: eine durch Leerzeichen getrennte Liste von Linktypen, z. B. `"noopener noreferrer"`. Der Wert wird unverändert in das Attribut `rel` geschrieben.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs rel. Fehlt das Attribut, ist es ein leerer String "".

Beispiele

rel-Wert eines Formulars auslesen

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

console.log(form.rel);
console.log(form.rel.split(' ').includes('noopener'));

noopener search true

Externe Formulare absichern

// Alle Formulare, die an eine fremde Seite gesendet werden, absichern
for (const form of document.forms) {
  const ziel = new URL(form.action, location.href);
  if (ziel.origin !== location.origin && form.target === '_blank') {
    form.rel = 'noopener noreferrer';
  }
}

console.log(document.forms[0]?.rel);

noopener noreferrer

Einzelne Werte bequemer über relList ändern

const form = document.querySelector('form');
form.rel = 'external';

// relList vermeidet mühsames Bearbeiten des Strings
form.relList.add('noreferrer');
form.relList.remove('external');

console.log(form.rel);
console.log(form.getAttribute('rel'));

noreferrer noreferrer

// Wichtig · Fallstricke

Kompatibilität: Das Attribut rel ist bei <form> erst relativ spät in allen Browsern angekommen (Chromium ab etwa Version 108, Firefox ab etwa 111, Safari 15.4). Ältere Browser kennen die Eigenschaft möglicherweise nicht, dann ist sie undefined. Als Rückfall funktioniert form.setAttribute('rel', …), allerdings ohne die Wirkung auf das Navigationsverhalten.

Sicherheit: Moderne Browser behandeln target="_blank" bei Formularen standardmäßig wie noopener. Setze noopener/noreferrer trotzdem ausdrücklich, um ältere Browser abzudecken und die Absicht klar zu machen. noreferrer unterdrückt auch den Referer-Header. Das kann Auswertungen auf der Zielseite oder Prüfungen stören, die sich auf den Referer verlassen.

Fallstricke:

rel ist ein einfacher String. Der Browser prüft die Werte nicht, auch unbekannte Linktypen werden gespeichert.
Wenn du den String zuweist, überschreibst du alle vorhandenen Werte. Für einzelne Änderungen nimm relList.
Die Eigenschaft rel ist etwas anderes als der Attributname von <a>/<link> im DOM: Es gibt kein relation und keinen Namen, der wie bei class → className abweicht.

Siehe auch

Window.opener HTMLAreaElement.rel HTMLFormElement.name HTMLFormElement.relList HTMLFormElement.target