HTMLAreaElement.origin — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAreaElement.origin

Beschreibung

Die Eigenschaft origin des HTMLAreaElement gibt den Ursprung der im href-Attribut hinterlegten URL als String zurück. Der Ursprung setzt sich aus Schema, Hostname und – falls vom Standard abweichend – Port zusammen, z. B. https://example.com oder http://localhost:8080. Pfad, Query-String und Fragment gehören nicht dazu.

Die Eigenschaft ist Teil der URL-Zerlegungs-Eigenschaften (HTMLHyperlinkElementUtils), die <area> und <a> gemeinsam haben – analog zu protocol, host, hostname, port, pathname usw. Relative URLs werden dabei gegen die Basis-URL des Dokuments aufgelöst.

Typische Anwendungsfälle sind das Erkennen externer Links in Image-Maps (Vergleich mit location.origin), das Filtern von Klickzielen oder das Setzen von Attributen wie rel="noopener" für fremde Ursprünge. Da die Eigenschaft schreibgeschützt ist, ändert man den Ursprung nur über href (oder protocol, host etc.).

Rückgabewert

Typ

string

Beschreibung

Die Unicode-Serialisierung des Ursprungs, z. B. "https://example.com". Bei opaken Ursprüngen (z. B. data:-URLs) der String "null"; ohne bzw. mit ungültigem href ein leerer String "".

Beispiele

Ursprung eines area-Elements auslesen

// <map name="karte"><area id="bereich" shape="rect" coords="0,0,100,100" href="https://example.com:8443/pfad/seite.html?x=1#oben"></map>
const area = document.getElementById('bereich');
console.log(area.origin);

https://example.com:8443

Externe Links in einer Image-Map markieren

const areas = document.querySelectorAll('map area[href]');

for (const area of areas) {
  if (area.origin !== location.origin) {
    // Fremder Ursprung: in neuem Tab öffnen, ohne window.opener
    area.target = '_blank';
    area.rel = 'noopener noreferrer';
    console.log(`Extern: ${area.origin}`);
  }
}

Extern: https://partner.example.org

Standardport und relative URLs

const area = document.createElement('area');

area.href = 'https://example.com:443/info';
console.log(area.origin); // Standardport entfällt

area.href = '/kontakt'; // relativ zur Dokument-URL
console.log(area.origin === location.origin);

area.href = 'data:text/plain,Hallo';
console.log(area.origin);

https://example.com true null

Schreibversuch hat keine Wirkung

const area = document.createElement('area');
area.href = 'https://example.com/';

area.origin = 'https://evil.example'; // wird ignoriert (im Strict Mode: TypeError)
console.log(area.origin);

// Richtig: über host bzw. href ändern
area.host = 'example.org';
console.log(area.origin);

https://example.com https://example.org

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wird still ignoriert; in Modulen/Strict Mode wirft sie einen TypeError.
Opake Ursprünge: Bei data:-, javascript:- oder blob:-ähnlichen Sonderfällen kann der String "null" zurückkommen – beim Vergleich nicht mit dem Wert null verwechseln.
Unicode-Serialisierung: Internationalisierte Domains werden je nach Browser als Punycode (xn--…) oder Unicode ausgegeben; für robuste Vergleiche besser new URL(area.href).origin verwenden bzw. beide Seiten gleich normalisieren.
Sicherheit: Ein Ursprungsvergleich im Client ist kein Ersatz für serverseitige Prüfungen; er eignet sich nur für UI-Logik wie das Markieren externer Links.
Kompatibilität: In allen aktuellen Browsern verfügbar; sehr alte Versionen (z. B. Internet Explorer) unterstützen die Eigenschaft nicht – dort protocol + '//' + host als Ersatz.

Siehe auch

URL.origin Location.origin HTMLAreaElement.href HTMLAreaElement.ping HTMLAreaElement.port