HTMLMetaElement.httpEquiv — Eigenschaft · JavaScript-Referenz

Signatur

HTMLMetaElement.httpEquiv

Beschreibung

Die Eigenschaft httpEquiv spiegelt das HTML-Attribut http-equiv eines <meta>-Elements wider. Sie legt fest, welche Pragma-Direktive das Element darstellt. Der zugehörige Wert steht in HTMLMetaElement.content. Solche Elemente wirken wie ein HTTP-Antwort-Header, der direkt im Dokument steht.

Gültige Werte laut HTML-Standard sind unter anderem:

content-security-policy: legt eine CSP für das Dokument fest
refresh: lädt die Seite neu oder leitet nach einer Wartezeit weiter
default-style: bestimmt das bevorzugte alternative Stylesheet
x-ua-compatible: nur noch der Wert IE=edge, veraltet
content-type: veraltete Schreibweise, heute nimmt man stattdessen <meta charset>
set-cookie: veraltet, moderne Browser ignorieren es

Im Alltag liest man die Eigenschaft meist aus. Typische Fälle sind Analyse-Werkzeuge, SEO-Prüfungen oder Tests, die kontrollieren, ob eine Seite eine CSP oder eine Weiterleitung mitbringt. Man kann die Eigenschaft auch schreiben. Die meisten Direktiven wertet der Browser aber nur beim Parsen des Dokuments aus. Eine spätere Änderung per Skript hat deshalb oft keine Wirkung.

Rückgabewert

Typ

string

Beschreibung

Der Wert des Attributs http-equiv. Fehlt das Attribut, ist es ein leerer String "". Beim Setzen wird das Attribut geschrieben.

Beispiele

Alle http-equiv-Direktiven einer Seite auflisten

// Alle <meta>-Elemente mit http-equiv-Attribut sammeln
const pragmas = [...document.querySelectorAll('meta[http-equiv]')]
  .map((meta) => ({ direktive: meta.httpEquiv, wert: meta.content }));

console.table(pragmas);

┌─────────┬───────────────────────────┬──────────────────────────┐ │ (index) │ direktive │ wert │ ├─────────┼───────────────────────────┼──────────────────────────┤ │ 0 │ 'content-security-policy' │ "default-src 'self'" │ │ 1 │ 'refresh' │ '30' │ └─────────┴───────────────────────────┴──────────────────────────┘

Prüfen, ob die Seite eine CSP per meta-Tag setzt

const hasMetaCsp = () =>
  [...document.getElementsByTagName('meta')].some(
    (meta) => meta.httpEquiv.toLowerCase() === 'content-security-policy'
  );

console.log(hasMetaCsp() ? 'CSP per <meta> vorhanden' : 'Keine CSP per <meta>');

CSP per <meta> vorhanden

Meta-Element erzeugen und httpEquiv setzen

// Bevorzugtes alternatives Stylesheet festlegen
const meta = document.createElement('meta');
meta.httpEquiv = 'default-style';
meta.content = 'Dunkles Design';
document.head.append(meta);

console.log(meta.outerHTML);

// Wichtig · Fallstricke

Schreibweise: In JavaScript heißt die Eigenschaft httpEquiv (camelCase), im HTML heißt das Attribut http-equiv. Der Wert wird genau so zurückgegeben, wie er im Attribut steht, auch mit Großbuchstaben. Für Vergleiche am besten toLowerCase() verwenden.
Nachträgliches Einfügen wirkt nur begrenzt: Ein per Skript eingefügtes refresh wird in vielen Browsern zwar noch ausgeführt, verlassen sollte man sich darauf aber nicht. Eine nachträglich eingefügte CSP gilt nur für Ressourcen, die danach geladen werden. Nimmt man sie wieder heraus, bleibt sie trotzdem aktiv.
Sicherheit: Eine CSP per <meta> ist schwächer als ein echter HTTP-Header. frame-ancestors, report-uri und sandbox werden ignoriert. Sie gilt außerdem erst ab der Stelle, an der das Element im Dokument steht. Wenn möglich, sollte man die CSP deshalb als HTTP-Header senden.
Barrierefreiheit: Eine automatische Weiterleitung oder ein Neuladen per refresh kann Nutzer von Screenreadern stören und verstößt gegen WCAG 2.2.1. Besser ist eine serverseitige Weiterleitung (301/302).
Veraltete Werte: set-cookie ignorieren die Browser, x-ua-compatible betraf nur den Internet Explorer.
Kompatibilität: Die Eigenschaft wird seit jeher von allen Browsern unterstützt.

Siehe auch

HTMLMetaElement.content HTMLMetaElement.media HTMLMetaElement.name HTMLMetaElement.scheme HTMLMediaElement.muted