Start · Sprachen · JavaScript · Referenz · Node.baseURI

Node.baseURI

Eigenschaft

Gibt als schreibgeschützten String die absolute Basis-URL des Dokuments zurück, das den Knoten enthält.

seit JavaScript Baseline: alle Browser (DOM Level 3) Kategorie: webapi

Signatur

Node.baseURI

Beschreibung

Die schreibgeschützte Eigenschaft baseURI der Node-Schnittstelle liefert die absolute Basis-URL des Knotens. Gegen diese URL löst der Browser relative Angaben in Attributen wie href, src oder action auf.

Meist ist die Basis-URL die Adresse des Dokuments selbst (document.location.href). Steht im Dokument ein <base href="...">-Element, hat dessen href Vorrang. Maßgeblich ist das erste <base>-Element mit href-Attribut. In HTML haben alle Knoten eines Dokuments dieselbe Basis-URL. In XML/SVG kann das Attribut xml:base sie in älteren Implementierungen je Element verändern.

Nützlich ist baseURI vor allem dann, wenn man relative Pfade selbst auflösen will, etwa mit new URL(relativ, node.baseURI). Das kommt in Web Components, Bookmarklets, Crawlern im Browser oder beim Kopieren von Inhalten zwischen Dokumenten vor.

Rückgabewert

Typ
string
Beschreibung
Die absolute Basis-URL als String. Ein Knoten, der noch in keinem Dokument hängt, liefert die Basis-URL seines ownerDocument.

Beispiele

Basis-URL des Dokuments auslesen

// Seite: https://example.com/blog/artikel.html (ohne <base>)
console.log(document.baseURI);
console.log(document.body.baseURI);
https://example.com/blog/artikel.html https://example.com/blog/artikel.html

Einfluss eines <base>-Elements

// Seite: https://example.com/blog/artikel.html
const base = document.createElement('base');
base.href = 'https://cdn.example.com/assets/';
document.head.prepend(base);

const p = document.createElement('p');
console.log(p.baseURI);

// Relative Links werden jetzt gegen die neue Basis aufgelöst
const a = document.createElement('a');
a.setAttribute('href', 'bild.png');
console.log(a.href);
https://cdn.example.com/assets/ https://cdn.example.com/assets/bild.png

Relative Pfade selbst auflösen

// Alle relativen Bildquellen im Artikel in absolute URLs umwandeln
const toAbsolute = (node, path) => new URL(path, node.baseURI).href;

const images = document.querySelectorAll('article img[src]');
const urls = [...images].map((img) => toAbsolute(img, img.getAttribute('src')));
console.log(urls);
["https://example.com/blog/img/titel.jpg", "https://example.com/img/logo.svg"]

// Wichtig · Fallstricke

  • Schreibgeschützt: Zuweisungen an node.baseURI werden stillschweigend ignoriert (im Strict Mode gibt es einen TypeError). Um die Basis zu ändern, setzt oder ändert man ein <base>-Element.
  • Nur das erste <base href> im Dokument zählt. Ein relatives href im <base> wird gegen die Dokument-URL aufgelöst.
  • xml:base wird von modernen Browsern nicht mehr ausgewertet. Firefox hat die Unterstützung ab Version 66 für HTML entfernt. Man sollte sich nicht darauf verlassen.
  • Bei about:blank-iframes und srcdoc-Dokumenten wird die Basis-URL meist vom einbettenden Dokument übernommen.
  • Sicherheit: Wenn Angreifer ein <base>-Element einschleusen können (HTML-Injection), zeigen alle relativen Skript- und Link-URLs auf fremde Server. Mit der CSP-Direktive base-uri 'self' lässt sich das verhindern.
  • Kompatibilität: wird von allen modernen Browsern unterstützt. Internet Explorer kennt die Eigenschaft nicht.