Signatur
Beschreibung
Die schreibgeschützte Eigenschaft window.origin (global auch einfach als origin erreichbar) liefert den Ursprung des globalen Kontexts als Zeichenkette. Ein Ursprung besteht aus Schema, Host und Port, z. B. "https://shop.example.com:8443". Der Standardport des Schemas (443 bei HTTPS, 80 bei HTTP) wird dabei weggelassen.
Anders als location.origin, das nur die URL des Dokuments auswertet, gibt window.origin den tatsächlichen Sicherheitsursprung zurück. Das ist wichtig bei Sandbox-iframes (<iframe sandbox> ohne allow-same-origin), data:-URLs oder Dokumenten mit CSP-Direktive sandbox: Dort ist der Ursprung opak, und window.origin liefert "null", während location.origin womöglich noch die ursprüngliche Adresse anzeigt.
Typische Einsatzgebiete sind Sicherheitsprüfungen beim Nachrichtenaustausch mit postMessage(), das Bilden absoluter URLs für die gleiche Herkunft und das Protokollieren bzw. Diagnostizieren von Kontexten (z. B. in Workern über self.origin, das über WindowOrWorkerGlobalScope ebenfalls verfügbar ist).
Rückgabewert
"https://example.com". Bei opaken Ursprüngen (Sandbox, data:-URL, teils file:) die Zeichenkette "null" — nicht der Wert null.Beispiele
Aktuellen Ursprung auslesen
// Auf https://www.example.com:443/pfad/seite.html?x=1
console.log(window.origin);
console.log(origin === window.origin); // globaler Kurzzugriff
Nachrichten nur vom eigenen Ursprung akzeptieren
window.addEventListener('message', (event) => {
// Nur Nachrichten aus demselben Ursprung verarbeiten
if (event.origin !== window.origin) {
console.warn('Nachricht von fremdem Ursprung verworfen:', event.origin);
return;
}
console.log('Vertrauenswürdige Nachricht:', event.data);
});
// Gezielt an ein gleich-ursprüngliches Fenster senden
const popup = window.open('/hilfe.html');
popup?.postMessage({ typ: 'init' }, window.origin);
Opaken Ursprung in einer Sandbox erkennen
const istOpak = window.origin === 'null';
if (istOpak) {
console.log('Sandbox-Kontext: kein Zugriff auf Cookies/Storage erwarten.');
} else {
console.log(`Normaler Kontext: ${window.origin}`);
console.log('location.origin:', location.origin);
}
Absolute API-URL für den gleichen Ursprung bauen
const apiUrl = new URL('/api/benutzer', window.origin);
const ladeBenutzer = async () => {
const res = await fetch(apiUrl);
return res.json();
};
console.log(apiUrl.href);
// Wichtig · Fallstricke
- Zeichenkette
"null": Bei opaken Ursprüngen wird der String"null"zurückgegeben. Prüfungen wieif (!window.origin)greifen daher nicht — explizit mit=== 'null'vergleichen. - Sicherheit bei
postMessage: Niemalsevent.origin === 'null'als vertrauenswürdig akzeptieren – alle Sandbox-iframes unddata:-Dokumente teilen sich diesen Wert. Außerdem beim Senden nie'*'als Ziel-Ursprung verwenden, wenn sensible Daten übertragen werden. - Unterschied zu
location.origin:location.originleitet sich aus der URL ab,window.originspiegelt den echten Sicherheitsursprung. Für Sicherheitsentscheidungen istwindow.origindie richtige Wahl. - Überschreibbar: Die Eigenschaft ist als
[Replaceable]definiert; eine Zuweisungwindow.origin = 'x'ersetzt sie im Skript still durch einen eigenen Wert. Globale Variablen namensoriginkönnen sie daher verdecken. - Kompatibilität: In allen modernen Browsern verfügbar, nicht im Internet Explorer. In Workern über
self.originnutzbar.file:-URLs liefern je nach Browser"null"oder"file://".