URL.origin — Eigenschaft · JavaScript-Referenz

Signatur

get URL.prototype.origin

Beschreibung

Die Eigenschaft origin einer URL-Instanz liefert den serialisierten Ursprung der URL. Bei hierarchischen URLs (http:, https:, ws:, wss:, ftp:) hat er die Form schema://host[:port]. Pfad, Suchparameter, Fragment und Zugangsdaten (username/password) sind darin nicht enthalten.

Der Ursprung ist die Grundlage der Same-Origin-Policy des Browsers. Deshalb ist origin das richtige Werkzeug, wenn du prüfen willst, ob zwei URLs zum selben Ursprung gehören, etwa um externe Links zu erkennen, postMessage-Absender zu prüfen oder CORS-Konfigurationen abzugleichen. Anders als ein selbst gebauter String-Vergleich berücksichtigt origin die Normalisierung: Das Schema und der Host werden kleingeschrieben, und der Standardport (80 bei http, 443 bei https) fällt weg.

Bei URLs ohne sinnvollen Ursprung, zum Beispiel data:, about:blank oder javascript:, ist der Wert der String "null". Bei blob:-URLs wird der Ursprung der eingebetteten URL zurückgegeben. Bei file:-URLs hängt der Wert von der Implementierung ab und ist meist "null".

Rückgabewert

Typ

string

Beschreibung

Der serialisierte Ursprung, z. B. "https://example.com" oder "http://localhost:3000". Gibt es keinen Ursprung, ist der Wert der String "null" (nicht der Wert null).

Beispiele

Ursprung aus einer vollständigen URL auslesen

const url = new URL('https://user:geheim@Shop.Example.com:443/produkte?id=42#details');

console.log(url.origin);
// Standardport 443 fällt weg, der Host wird kleingeschrieben, Zugangsdaten entfallen

const dev = new URL('http://localhost:3000/api/users');
console.log(dev.origin);

https://shop.example.com http://localhost:3000

Externe Links auf der Seite erkennen und markieren

const eigenerUrsprung = window.location.origin;

document.querySelectorAll('a[href]').forEach((link) => {
  const ziel = new URL(link.href, document.baseURI);
  if (ziel.origin !== eigenerUrsprung) {
    link.target = '_blank';
    link.rel = 'noopener noreferrer';
    link.classList.add('extern');
  }
});

Sonderfälle: data:, blob: und ungültige Zuweisung

'use strict';

console.log(new URL('data:text/plain,Hallo').origin);
console.log(new URL('about:blank').origin);

// blob:-URLs erben den Ursprung des erzeugenden Dokuments
const blobUrl = URL.createObjectURL(new Blob(['x']));
console.log(new URL(blobUrl).origin === location.origin);
URL.revokeObjectURL(blobUrl);

try {
  const u = new URL('https://example.com');
  u.origin = 'https://evil.com'; // nur ein Getter vorhanden
} catch (err) {
  console.log(err.name);
}

null null true TypeError

Absender einer postMessage-Nachricht absichern

const ERLAUBTE_URSPRUENGE = new Set([
  new URL('https://app.example.com').origin,
  new URL('https://admin.example.com').origin,
]);

window.addEventListener('message', (event) => {
  // event.origin ist ebenfalls ein serialisierter Ursprung
  if (!ERLAUBTE_URSPRUENGE.has(event.origin)) {
    console.warn('Nachricht von unbekanntem Ursprung verworfen:', event.origin);
    return;
  }
  console.log('Vertrauenswürdige Daten:', event.data);
});

// Wichtig · Fallstricke

Schreibgeschützt: Es gibt nur einen Getter. Im nicht-strikten Modus wird eine Zuweisung ohne Meldung ignoriert. Im Strict Mode, also auch in ES-Modulen, löst sie einen TypeError aus. Um den Ursprung zu ändern, setzt du protocol, hostname oder port.
String "null": Bei undurchsichtigen Ursprüngen (data:, about:, javascript:, meist auch file:) ist der Rückgabewert der String "null". Zwei solche Werte sind gleich ("null" === "null"), obwohl die Ursprünge sicherheitstechnisch nicht gleich sind. Behandle "null" bei Prüfungen deshalb immer ausdrücklich als nicht vertrauenswürdig.
Internationalisierte Domains: Anders als ältere Dokumentationen („Unicode-Serialisierung“) nahelegen, geben aktuelle Browser und Node.js den Host in Punycode aus. Zum Beispiel ergibt new URL('https://münchen.de').origin den Wert "https://xn--mnchen-3ya.de". Vergleiche Ursprünge deshalb immer über URL-Objekte und nicht mit handgeschriebenen Strings.
Sicherheit: Prüfe Ursprünge nie mit startsWith() oder includes(). Sonst wird zum Beispiel https://example.com.evil.net als erlaubt erkannt. Vergleiche stattdessen immer exakt mit === oder über ein Set.
Relative URLs brauchen eine Basis-URL: new URL('/pfad') wirft einen TypeError, new URL('/pfad', location.href) funktioniert.
Kompatibilität: Wird von allen modernen Browsern unterstützt, nicht vom Internet Explorer. In Node.js ist die Eigenschaft ab Version 10 global verfügbar, davor über require('url').URL.

Siehe auch

URL URL.host URL.hostname URL.protocol URL.port Location.origin Window.postMessage() MessageEvent.origin