HTMLAnchorElement.origin — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAnchorElement.origin

Beschreibung

Die schreibgeschützte Eigenschaft origin des HTMLAnchorElement-Interfaces liefert den Ursprung der Link-URL. Er besteht aus dem Schema (z. B. https:), //, dem Hostnamen und, falls vorhanden, einem vom Standard abweichenden Port, also etwa https://example.com:8080. Pfad, Suchparameter, Fragment und Zugangsdaten gehören nicht dazu.

Relative href-Werte werden vorher gegen die Basis-URL des Dokuments aufgelöst. origin gibt also immer den tatsächlichen Ursprung des Linkziels zurück. Das hilft vor allem, wenn Sie externe Links erkennen wollen: Vergleichen Sie anchor.origin mit location.origin und kennzeichnen Sie Links auf andere Seiten, öffnen Sie sie in einem neuen Tab oder zählen Sie sie für eine Analyse.

Die Eigenschaft gehört zum Mixin HTMLHyperlinkElementUtils. Dieselbe Eigenschaft gibt es deshalb auch bei HTMLAreaElement, und sie verhält sich wie URL.prototype.origin. Bei Schemata ohne echten Ursprung, zum Beispiel data:, javascript: oder mailto:, sowie bei ungültigen URLs ist der Wert der String "null". Einen direkten Schreibzugriff gibt es nicht. Um den Ursprung zu ändern, setzen Sie protocol, host oder href.

Rückgabewert

Typ

string

Beschreibung

Der Ursprung im Format schema://host[:port]. Standard-Ports (80 bei http, 443 bei https) werden weggelassen. Bei Schemata ohne echten Ursprung oder bei ungültigen URLs ist der Wert "null". Fehlt das href-Attribut, ist er ein leerer String.

Beispiele

Ursprung eines Links auslesen

const link = document.createElement('a');
link.href = 'https://shop.example.com:8443/produkte?id=42#details';

console.log(link.origin);
console.log(link.pathname);

https://shop.example.com:8443 /produkte

Externe Links automatisch in neuem Tab öffnen

// Alle Links auf fremde Ursprünge markieren
document.querySelectorAll('a[href]').forEach((a) => {
  if (a.origin !== 'null' && a.origin !== location.origin) {
    a.target = '_blank';
    a.rel = 'noopener noreferrer';
    a.classList.add('extern');
  }
});

Relative URLs und Sonderfälle

// Angenommen, die Seite läuft unter https://example.com/blog/
const rel = document.createElement('a');
rel.href = '../kontakt';
console.log(rel.origin);

const mail = document.createElement('a');
mail.href = 'mailto:info@example.com';
console.log(mail.origin);

const std = document.createElement('a');
std.href = 'https://example.com:443/';
console.log(std.origin);

https://example.com null https://example.com

// Wichtig · Fallstricke

String "null": Bei mailto:, data:, javascript: und ähnlichen Schemata ist der Rückgabewert der String "null", nicht der Wert null. Prüfen Sie deshalb auf === 'null'.
file:-URLs: Der Wert hängt vom Browser ab. Meist ist er "null", manche Browser geben aber "file://" zurück.
Internationalisierte Domains: Laut Spezifikation werden Hostnamen in Punycode ausgegeben (z. B. xn--mnchen-3ya.de). Ältere Browser haben eine Unicode-Form geliefert. Vergleichen Sie Ursprünge daher am besten immer mit Werten aus derselben API, etwa location.origin oder new URL(...).origin.
Schreibgeschützt: Eine Zuweisung an origin wird still ignoriert, im Strict Mode gibt es einen TypeError.
Kein Sicherheitsersatz: Ein Vergleich von Ursprüngen im Client ersetzt keine Prüfung auf dem Server und keine CSP-Regeln. Er eignet sich für Darstellung und Benutzerführung, nicht zur Zugriffskontrolle.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Der Internet Explorer kennt die Eigenschaft nicht, dort hilft a.protocol + '//' + a.host.

Siehe auch

URL.origin Location.origin HTMLAreaElement.origin HTMLAnchorElement.href HTMLAnchorElement.ping