HTMLBaseElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLBaseElement extends HTMLElement

Beschreibung

HTMLBaseElement ist die DOM-Schnittstelle des <base>-Elements. Sie erbt alle Eigenschaften und Methoden von HTMLElement und ergänzt sie um zwei eigene Eigenschaften: href (die Basis-URL) und target (der Standard-Browsing-Kontext für Links und Formulare).

Das <base>-Element legt fest, wie relative URLs im Dokument aufgelöst werden: in <a href>, <img src>, <link href>, <form action> und auch in Skript-APIs wie fetch() oder new URL(relativ, document.baseURI). Das ist praktisch bei Single-Page-Anwendungen, die unter einem Unterpfad laufen (z. B. /app/), oder bei statischen HTML-Exporten, deren Ressourcen auf einem CDN liegen.

Die aktuell gültige Basis-URL liest man am einfachsten über document.baseURI aus. Die Eigenschaft HTMLBaseElement.href liefert beim Lesen immer die aufgelöste, absolute URL, während getAttribute('href') den Rohwert aus dem HTML-Quelltext zurückgibt.

Pro Dokument ist nur ein <base>-Element vorgesehen; es muss im <head> stehen, und zwar vor allen Elementen mit URL-Attributen. Existieren mehrere, wird nur das erste mit href-Attribut für die Basis-URL und das erste mit target-Attribut für das Linkziel verwendet.

Parameter

Name	Typ	Default	Beschreibung
$href	string	URL des Dokuments	Eigenschaft: spiegelt das `href`-Attribut. Beim Lesen die absolute, aufgelöste Basis-URL; beim Setzen wird das Attribut geändert und alle relativen URLs werden neu aufgelöst.
$target	string	""	Eigenschaft: spiegelt das `target`-Attribut – Standardziel für Links und Formulare ohne eigenes `target`, z. B. `_blank`, `_self`, `_parent`, `_top` oder ein Frame-Name.

Rückgabewert

Typ

HTMLBaseElement

Beschreibung

Instanzen erhält man per document.querySelector('base') oder document.createElement('base'). Es gibt keinen direkt aufrufbaren Konstruktor.

Beispiele

Vorhandenes base-Element auslesen

// HTML: <head><base href="/app/" target="_blank"></head>
const base = document.querySelector('base');

if (base instanceof HTMLBaseElement) {
  console.log(base.getAttribute('href')); // Rohwert
  console.log(base.href);                 // aufgelöste URL
  console.log(base.target);
  console.log(document.baseURI);
}

/app/ https://example.com/app/ _blank https://example.com/app/

base-Element dynamisch erzeugen (z. B. für SPA unter Unterpfad)

const setBaseUrl = (url) => {
  let base = document.head.querySelector('base');
  if (!base) {
    base = document.createElement('base');
    // möglichst früh im <head> einfügen
    document.head.prepend(base);
  }
  base.href = url;
  return base;
};

setBaseUrl('https://cdn.example.com/assets/');
console.log(document.baseURI);

const img = document.createElement('img');
img.setAttribute('src', 'logo.png');
console.log(img.src);

https://cdn.example.com/assets/ https://cdn.example.com/assets/logo.png

Relative URLs in Skripten gegen die Basis-URL auflösen

// Mit <base href="https://api.example.com/v2/">
const resolve = (path) => new URL(path, document.baseURI).href;

console.log(resolve('users'));
console.log(resolve('../v1/status'));
console.log(resolve('/health'));

// fetch() löst relative URLs ebenfalls gegen document.baseURI auf
const loadUsers = async () => {
  const res = await fetch('users');
  return res.json();
};

https://api.example.com/v2/users https://api.example.com/v1/status https://api.example.com/health

Standard-Linkziel umschalten

const base = document.querySelector('base') ?? document.head.appendChild(document.createElement('base'));

// Alle Links ohne eigenes target öffnen sich nun in einem neuen Tab
base.target = '_blank';
console.log(base.target);

// Zurücksetzen
base.removeAttribute('target');
console.log(JSON.stringify(base.target));

_blank ""

// Wichtig · Fallstricke

Abschließender Schrägstrich: <base href=\"/app\"> und <base href=\"/app/\"> verhalten sich unterschiedlich. Ohne Schrägstrich wird app als Dateiname behandelt, sodass logo.png zu /logo.png aufgelöst wird statt zu /app/logo.png.
Sprungmarken: Auch Anker wie <a href=\"#abschnitt\"> werden gegen die Basis-URL aufgelöst und können dadurch auf eine andere Seite führen. In SPAs ist das eine häufige Fehlerquelle; SVG-Verweise wie url(#id) können ebenfalls brechen.
Reihenfolge: URLs, die vor dem <base>-Element geparst werden, sind schon mit der alten Basis aufgelöst. Ändert man href nachträglich, werden bereits geladene Ressourcen nicht erneut geladen.
Sicherheit: Kann ein Angreifer ein <base>-Element einschleusen (HTML-Injection), leitet er alle relativen Skript- und Formular-URLs auf seinen Server um („Base-Tag-Hijacking“). Deshalb sollte eine Content Security Policy base-uri 'self' oder base-uri 'none' setzen. Außerdem sind data:- und javascript:-URLs als Basis-URL nicht erlaubt.
Mehrere Elemente: Nur das erste <base> mit href zählt; weitere werden ignoriert.
Browser-Unterstützung: Wird seit Langem von allen Browsern unterstützt (Baseline). Früher gab es im IE Unterschiede bei der Auflösung relativer href-Werte im <base> selbst.

Siehe auch

HTMLMapElement HTMLAreaElement HTMLBRElement HTMLBodyElement HTMLDataElement