HTMLAreaElement.host — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAreaElement.host

Beschreibung

Die Eigenschaft host der Schnittstelle HTMLAreaElement ist ein String mit dem Host-Anteil der URL, die im href-Attribut eines <area>-Elements (Bereich einer Image-Map) steht. Der Host besteht aus dem Hostnamen und, falls vorhanden und nicht der Standardport des Schemas, einem Doppelpunkt mit der Portnummer, z. B. "example.com:8080".

Die Eigenschaft gehört zum Mixin HTMLHyperlinkElementUtils, das auch von HTMLAnchorElement implementiert wird. Sie verhält sich daher genauso wie URL.prototype.host. Mit ihr lässt sich prüfen, ob ein Bereich einer Image-Map auf eine externe Domain verweist, oder man kann alle Links auf einen anderen Server umbiegen, ohne die komplette URL neu zusammenzusetzen.

Beim Schreiben wird nur der Host-Anteil von href ersetzt. Protokoll, Pfad, Query und Fragment bleiben erhalten. Ist href leer, ungültig oder hat die URL keinen Host (z. B. bei mailto:), liefert die Eigenschaft einen leeren String.

Rückgabewert

Typ

string

Beschreibung

Hostname plus optional :port. Ein Standardport (80 bei http, 443 bei https) wird weggelassen. Leerer String, wenn keine gültige URL mit Host vorliegt.

Beispiele

Host eines Bereichs auslesen

// <map name="karte"><area id="nord" shape="rect" coords="0,0,100,100" href="https://shop.example.com:8443/regionen/nord?ref=map" alt="Nord"></map>
const area = document.getElementById('nord');
console.log(area.host);
console.log(area.hostname);
console.log(area.port);

shop.example.com:8443 shop.example.com 8443

Standardport wird nicht angezeigt

const area = document.createElement('area');
area.href = 'https://example.com:443/pfad';
console.log(area.host);

area.href = 'http://example.com:8080/pfad';
console.log(area.host);

example.com example.com:8080

Externe Bereiche einer Image-Map markieren

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

for (const area of areas) {
  if (area.host && area.host !== location.host) {
    // Externe Ziele in neuem Tab öffnen und absichern
    area.target = '_blank';
    area.rel = 'noopener noreferrer';
  }
}

Alle Bereiche auf einen Staging-Server umleiten

const area = document.createElement('area');
area.href = 'https://www.example.com/produkte/42?farbe=rot#details';

area.host = 'staging.example.com:3000';
console.log(area.href);

https://staging.example.com:3000/produkte/42?farbe=rot#details

// Wichtig · Fallstricke

host oder hostname: host enthält den Port, hostname nicht. Wer Domains vergleicht, sollte sich bewusst für eine der beiden entscheiden. Sonst schlägt z. B. "example.com:8080" === "example.com" fehl.
Relative URLs werden gegen die Basis-URL des Dokuments aufgelöst. Bei href="/seite" liefert host also den Host der aktuellen Seite.
Bei URLs ohne Host (mailto:, javascript:, data:) und bei fehlendem oder ungültigem href kommt ein leerer String zurück. Auch Zuweisungen haben dann keine Wirkung.
Internationalisierte Domainnamen werden in Punycode ausgegeben, z. B. xn--mnchen-3ya.de statt münchen.de.
Sicherheit: Für Allowlist-Prüfungen nicht mit includes() oder endsWith() vergleichen, ohne auf Punkt-Grenzen zu achten. Sonst würde evil-example.com als example.com durchgehen.
Kompatibilität: wird von allen modernen Browsern unterstützt.

Siehe auch

URL.host HTMLAreaElement.hash HTMLAreaElement.port HTMLAreaElement.alt HTMLAreaElement.href