Location.host — Eigenschaft · JavaScript-Referenz

Signatur

Location.host

Beschreibung

Die Eigenschaft location.host enthält den Host-Teil der aktuellen Dokument-URL. Er besteht aus dem hostname und, falls die URL einen nicht leeren Port enthält, einem Doppelpunkt gefolgt vom port, z. B. "example.com:8080". Hat die URL keinen Hostnamen (etwa bei file:- oder about:blank-URLs), ist der Wert ein leerer String.

Wichtig: Der Standard-Port des Protokolls (80 bei http:, 443 bei https:) wird nicht mit ausgegeben, weil er beim URL-Parsen entfernt wird. Auf https://example.com:443/ liefert location.host daher nur "example.com".

Die Eigenschaft lässt sich auch schreiben. Weist man einen neuen Wert zu, navigiert der Browser zur geänderten URL; Protokoll, Pfad, Query und Fragment bleiben dabei erhalten. In der Praxis wird host vor allem gelesen: um Umgebungen zu erkennen (lokal, Staging, Produktion), absolute URLs zusammenzubauen oder Herkunftsprüfungen vorzubereiten.

Die Eigenschaft ist unterschiedlich zu location.hostname (ohne Port) und location.origin (mit Protokoll, nur lesbar).

Rückgabewert

Typ

string

Beschreibung

Hostname, bei nicht leerem Port ergänzt um : und Port (z. B. "localhost:3000"). Leerer String, wenn die URL keinen Host besitzt. Beim Schreiben löst die Zuweisung eine Navigation aus.

Beispiele

Host der aktuellen Seite auslesen

// Angenommen, die Seite läuft unter http://localhost:3000/dashboard?tab=1
console.log(location.host);
console.log(location.hostname);
console.log(location.port);

localhost:3000 localhost 3000

Standard-Port wird weggelassen

// Vergleich mit dem URL-Konstruktor, der dieselbe Logik verwendet
const a = new URL('https://example.com:443/shop');
const b = new URL('https://example.com:8443/shop');
console.log(a.host);
console.log(b.host);

example.com example.com:8443

Umgebung anhand des Hosts erkennen

const getEnvironment = () => {
  const { host } = location;
  if (host.startsWith('localhost') || host.startsWith('127.0.0.1')) return 'development';
  if (host === 'staging.example.com') return 'staging';
  return 'production';
};

const apiBase = getEnvironment() === 'development'
  ? `http://${location.hostname}:8080/api`
  : `https://api.${location.host}`;

console.log(getEnvironment(), apiBase);

development http://localhost:8080/api // bei localhost:3000

Auf anderen Host umleiten (Pfad bleibt erhalten)

// Von www.example.com auf example.com umleiten, Pfad/Query/Hash bleiben gleich
if (location.host === 'www.example.com') {
  location.host = 'example.com';
}

// Wichtig · Fallstricke

Standard-Ports fehlen: :80 bzw. :443 tauchen nie in host auf. Wer einen Port zwingend braucht, sollte location.port prüfen und bei leerem String den Standard-Port des Protokolls annehmen.
Nicht für Sicherheitsprüfungen allein verwenden: Für Herkunftsvergleiche (z. B. bei postMessage) ist event.origin bzw. location.origin geeigneter, da host das Protokoll nicht enthält – http:// und https:// wären sonst nicht unterscheidbar. Niemals mit includes() oder endsWith() ohne Punkt prüfen: "evil-example.com".endsWith("example.com") ist true.
Internationalisierte Domains werden in Punycode zurückgegeben (z. B. xn--mnchen-3ya.de statt münchen.de).
IPv6-Adressen erscheinen in eckigen Klammern, z. B. [::1]:8080.
Das Setzen löst sofort eine Navigation aus und erzeugt einen neuen History-Eintrag; in Sandbox-Iframes oder bei fremden Origins kann das Schreiben einen SecurityError auslösen.
Bei file:-URLs ist der Wert meist ein leerer String.
Unterstützt von allen Browsern; identisches Verhalten bieten URL.prototype.host und HTMLAnchorElement.host.

Siehe auch

Location.hostname Location.port Location.origin Location.href Location URL.host ProcessingInstruction.sheet