HTMLAnchorElement.protocol — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAnchorElement.protocol

Beschreibung

Die Eigenschaft protocol gehört zur Schnittstelle HTMLAnchorElement. Sie gibt das Schema der URL aus dem href-Attribut als String zurück, immer mit Doppelpunkt am Ende, also z. B. "https:", "http:", "mailto:", "tel:" oder "javascript:". Relative Links löst der Browser vorher gegen die Basis-URL des Dokuments auf. Ein Link wie href="/kontakt" liefert deshalb das Protokoll der aktuellen Seite.

Die Eigenschaft lässt sich auch beschreiben. Weist du einen neuen Wert zu, ändert der Browser nur das Schema und schreibt die geänderte URL ins href-Attribut zurück. Den Doppelpunkt kannst du dabei weglassen: a.protocol = "https" und a.protocol = "https:" bewirken dasselbe.

Typische Einsatzfälle:

Links nach Art sortieren, etwa Web-Links, E-Mail-Links (mailto:) und Telefon-Links (tel:)
Unsichere http:-Links auf https: umstellen
Gefährliche Schemata wie javascript: in Inhalten von Nutzern erkennen

Die Eigenschaft funktioniert genauso wie URL.prototype.protocol. Beide folgen den Regeln des WHATWG-URL-Standards.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Schreiben: das neue Schema, mit oder ohne abschließendes `:`, z. B. `"https"`. Ungültige oder nicht erlaubte Werte ignoriert der Browser, ohne einen Fehler zu melden.

Rückgabewert

Typ

string

Beschreibung

Das Schema der aufgelösten URL in Kleinbuchstaben, mit abschließendem Doppelpunkt, z. B. "https:". Fehlt das href oder lässt es sich nicht als URL auswerten, ist der Wert ":".

Beispiele

Protokoll eines Links auslesen

const link = document.createElement('a');
link.href = 'https://example.com:8080/pfad?q=1#top';
console.log(link.protocol);

link.href = 'mailto:info@example.com';
console.log(link.protocol);

// Relativer Link: wird gegen die Seiten-URL aufgelöst
link.href = '/kontakt';
console.log(link.protocol); // z. B. auf einer https-Seite

https: mailto: https:

Links nach Typ kennzeichnen

const icons = { 'mailto:': '✉️', 'tel:': '📞' };

document.querySelectorAll('a[href]').forEach((a) => {
  const icon = icons[a.protocol];
  if (icon) {
    a.prepend(`${icon} `);
  } else if (a.protocol === 'http:' || a.protocol === 'https:') {
    if (a.hostname !== location.hostname) {
      a.target = '_blank';
      a.rel = 'noopener noreferrer';
    }
  }
});

Unsichere http-Links auf https umstellen

const upgradeLinks = (root = document) => {
  let count = 0;
  root.querySelectorAll('a[href]').forEach((a) => {
    if (a.protocol === 'http:') {
      a.protocol = 'https'; // der Doppelpunkt ist optional
      count++;
    }
  });
  return count;
};

const a = document.createElement('a');
a.href = 'http://example.com/seite';
document.body.append(a);
console.log(upgradeLinks());
console.log(a.href);

1 https://example.com/seite

javascript:-Links in Inhalten von Nutzern entfernen

const container = document.createElement('div');
container.innerHTML = '<a href="JaVaScRiPt:alert(1)">Klick</a><a href="https://ok.example">OK</a>';

const allowed = new Set(['http:', 'https:', 'mailto:']);
container.querySelectorAll('a[href]').forEach((a) => {
  if (!allowed.has(a.protocol)) {
    console.log('Entfernt:', a.protocol);
    a.removeAttribute('href');
  }
});

Entfernt: javascript:

// Wichtig · Fallstricke

Der Doppelpunkt gehört zum Wert: Vergleiche mit a.protocol === 'https:'. 'https' ohne Doppelpunkt ist nie gleich.
Manche Änderungen scheitern ohne Meldung: Ein „spezielles“ Schema (http, https, ws, wss, ftp, file) lässt sich nicht gegen ein nicht-spezielles tauschen und umgekehrt. a.protocol = 'mailto' bei einem https:-Link ändert also nichts. Ebenso lässt sich nicht auf file: umstellen, wenn die URL Zugangsdaten oder einen Port enthält. In keinem dieser Fälle gibt es einen Fehler. Prüfe deshalb danach, ob sich der Wert wirklich geändert hat.
Kleinbuchstaben: Der Browser liefert das Schema immer kleingeschrieben zurück. Das ist nützlich für Sicherheitsprüfungen, weil Tricks wie JaVaScRiPt: so auffallen.
Sicherheit: Eine Prüfung von protocol ersetzt keinen vollständigen HTML-Sanitizer. Verwende für Inhalte von Nutzern zusätzlich eine erprobte Bibliothek wie DOMPurify und eine Content-Security-Policy.
Kein oder ungültiges href: Dann ist der Wert ":". Ältere Browser konnten hier abweichend einen leeren String liefern.
Für URLs, die nicht im DOM stehen, verwende besser new URL(str).protocol. Das verhält sich genauso und braucht kein Element.
Kompatibilität: Die Eigenschaft wird seit langem von allen Browsern unterstützt. Gleichwertig ist HTMLAreaElement.protocol.

Siehe auch

URL.protocol Location.protocol HTMLAnchorElement.port HTMLAnchorElement.rel HTMLAnchorElement.download