Location.origin — Eigenschaft · JavaScript-Referenz

Signatur

get Location.origin

Beschreibung

Die schreibgeschützte Eigenschaft Location.origin (meist aufgerufen als window.location.origin oder location.origin) liefert den Ursprung (englisch „origin“) des aktuell geladenen Dokuments. Der Ursprung setzt sich aus Schema (protocol), Hostname und Port zusammen, zum Beispiel https://shop.example.com oder http://localhost:3000. Pfad, Query-String und Fragment gehören nicht dazu.

Der Ursprung ist die Grundlage der Same-Origin-Policy des Browsers. Deshalb braucht man location.origin vor allem, um absolute URLs zur eigenen Anwendung zu bauen (etwa für API-Aufrufe, Weiterleitungen oder OAuth-Callbacks), um bei postMessage den Zielursprung anzugeben oder um zu prüfen, ob ein Link oder eine Nachricht vom selben Ursprung kommt.

Ist der Port der Standard-Port des Schemas (80 bei http, 443 bei https), fehlt er im Ergebnis. Andere Ports erscheinen mit Doppelpunkt. Bei Dokumenten mit undurchsichtigem Ursprung (englisch „opaque origin“), etwa aus data:-URLs oder in Sandbox-iframes ohne allow-same-origin, ist der Wert der String "null".

Rückgabewert

Typ

string

Beschreibung

Der serialisierte Ursprung im Format schema://host[:port], ohne abschließenden Schrägstrich. Bei einem undurchsichtigen Ursprung ist es der String "null".

Beispiele

Ursprung der aktuellen Seite auslesen

// Angenommen, die Seite lautet https://example.com:8443/shop/artikel?id=42#details
console.log(location.origin);
console.log(location.protocol, location.hostname, location.port);

https://example.com:8443 https: example.com 8443

Absolute API-URL relativ zur eigenen Anwendung bauen

const loadUser = async (id) => {
  // new URL() mit origin als Basis vermeidet Fehler durch doppelte Schrägstriche
  const url = new URL(`/api/users/${encodeURIComponent(id)}`, location.origin);
  const response = await fetch(url);
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
};

console.log(new URL('/api/users/7', location.origin).href);

https://example.com/api/users/7

postMessage sicher nur an den eigenen Ursprung senden und prüfen

const iframe = document.querySelector('#editor');

// Nachricht nur zustellen, wenn das iframe denselben Ursprung hat
iframe.contentWindow.postMessage({ type: 'save' }, location.origin);

window.addEventListener('message', (event) => {
  // Nachrichten fremder Ursprünge verwerfen
  if (event.origin !== location.origin) return;
  console.log('Vertrauenswürdige Nachricht:', event.data);
});

Externe Links erkennen und kennzeichnen

const isSameOrigin = (href) => new URL(href, location.href).origin === location.origin;

document.querySelectorAll('a[href]').forEach((link) => {
  if (!isSameOrigin(link.href)) {
    link.rel = 'noopener noreferrer';
    link.target = '_blank';
  }
});

console.log(isSameOrigin('/kontakt'), isSameOrigin('https://andere-seite.de'));

true false

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an location.origin hat keine Wirkung und löst im Strict Mode einen TypeError aus. Für eine Navigation nutzt man location.href oder location.assign().
Kein abschließender Schrägstrich: location.origin + 'api' ergibt https://example.comapi. Hängen Sie deshalb '/' an oder verwenden Sie besser new URL(pfad, location.origin).
\"null\" ist ein String: Bei undurchsichtigen Ursprüngen (data:-URLs, Sandbox-iframes) erhalten Sie den String \"null\", nicht den Wert null. Bei file:-URLs verhalten sich die Browser unterschiedlich: Chrome liefert \"file://\", Firefox \"null\".
Internationalisierte Domains: Anders als ältere Dokumentation behauptet, geben aktuelle Browser Hostnamen in Punycode (ASCII) zurück, z. B. https://xn--mnchen-3ya.de statt https://münchen.de.
Sicherheit: Vergleichen Sie Ursprünge immer exakt (===), niemals mit includes() oder startsWith(), denn https://example.com.boese.de würde solche Prüfungen bestehen. Übergeben Sie bei postMessage location.origin statt '*'.
Fremde Fenster: Wer location.origin eines fremden Fensters oder iframes mit anderem Ursprung liest, bekommt einen SecurityError (DOMException).
Kompatibilität: Wird von allen modernen Browsern unterstützt, im Internet Explorer erst ab Version 11. In Web Workern steht self.location.origin (WorkerLocation) bereit, außerdem self.origin.

Siehe auch

Location Location.href Location.host Location.protocol URL.origin Window.origin Window.postMessage() MessageEvent.origin