Signatur
Beschreibung
Die Eigenschaft href des HTMLBaseElement-Interfaces spiegelt das gleichnamige HTML-Attribut des <base>-Elements wider. Der Wert legt fest, gegen welche Basis-URL relative Adressen in <a href>, <img src>, <link href>, <form action> und ähnlichen Attributen aufgelöst werden.
Beim Lesen gibt der Browser nicht den rohen Attributwert zurück, sondern eine vollständig aufgelöste, absolute URL. Ein relativer Attributwert wie /docs/ wird dabei gegen die Dokument-URL aufgelöst. Fehlt das Attribut, erhält man die URL des Dokuments. Den unveränderten Attributwert bekommt man mit getAttribute("href").
Beim Schreiben wird das href-Attribut gesetzt. Ist es das erste <base>-Element mit href im Dokument, ändert sich damit sofort document.baseURI. Alle danach aufgelösten relativen URLs, etwa beim Lesen von anchor.href oder beim Klick auf einen Link, verwenden die neue Basis.
Typische Einsatzfälle sind Single-Page-Apps unter einem Unterpfad (z. B. /app/), per JavaScript erzeugte Vorschauen in iframes oder HTML-Schnipsel, die aus einer anderen Quelle geladen werden und deren relative Pfade richtig aufgelöst werden sollen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | Nur beim Setzen: neue Basis-URL, absolut oder relativ. Relative Werte werden gegen die Dokument-URL aufgelöst. |
Rückgabewert
href-Attribut, ist es die URL des Dokuments.Beispiele
Basis-URL auslesen: aufgelöster Wert und Rohwert
// HTML: <base href="/static/"> auf https://example.com/shop/index.html
const base = document.querySelector("base");
console.log(base.href); // aufgelöste, absolute URL
console.log(base.getAttribute("href")); // Rohwert aus dem Attribut
console.log(document.baseURI);Basis-URL zur Laufzeit setzen (z. B. SPA unter Unterpfad)
const ensureBase = (url) => {
let base = document.head.querySelector("base[href]");
if (!base) {
base = document.createElement("base");
document.head.prepend(base); // möglichst früh im <head> einfügen
}
base.href = url;
return base.href;
};
console.log(ensureBase("https://cdn.example.com/app/v2/"));
const link = document.createElement("a");
link.setAttribute("href", "assets/logo.svg");
console.log(link.href);HTML-Vorschau in einem iframe mit richtigen relativen Pfaden
const showPreview = (html, sourceUrl) => {
const iframe = document.querySelector("#preview");
const doc = iframe.contentDocument;
doc.open();
doc.write("<!doctype html><head></head><body></body>");
doc.close();
const base = doc.createElement("base");
base.href = sourceUrl; // relative Bilder/Links zeigen auf die Originalquelle
doc.head.append(base);
doc.body.innerHTML = html; // nur vertrauenswürdiges HTML verwenden!
console.log(doc.baseURI);
};
showPreview('<img src="img/foto.jpg">', "https://blog.example.org/posts/42/");// Wichtig · Fallstricke
- Nur das erste
<base href>zählt: Weitere<base>-Elemente mithrefwerden bei der Bestimmung vondocument.baseURIignoriert. Ihrhrefliefert trotzdem eine aufgelöste URL. - Getter ≠ Attribut:
base.hrefgibt immer eine absolute URL zurück. Wer den Originalwert braucht, verwendetgetAttribute("href"). - Kein Nachladen: Wird die Basis nachträglich geändert, lädt der Browser bereits geladene Ressourcen (Bilder, Skripte, Stylesheets) nicht neu. Die neue Basis gilt nur für URLs, die danach aufgelöst werden.
- Anker-Links: Mit gesetzter Basis wird auch
<a href="#abschnitt">gegen die Basis aufgelöst. Der Link kann dann auf eine andere Seite führen statt zum Abschnitt auf der aktuellen Seite. Ein häufiger Fehler in SPAs. - Sicherheit: Kann ein Angreifer ein
<base>-Element einschleusen (z. B. perinnerHTML-Injektion), werden alle relativen Skript- und Formular-URLs auf seinen Server umgeleitet. Mit der CSP-Direktivebase-uri 'self'(oder'none') lässt sich das verhindern. - Kompatibilität: Wird in allen modernen Browsern unterstützt. Das Auflösen zu einer absoluten URL beim Lesen ist in allen aktuellen Engines umgesetzt.