Start · Sprachen · JavaScript · Referenz · Window.isSecureContext

Window.isSecureContext

Eigenschaft

Schreibgeschützte Eigenschaft, die <code>true</code> liefert, wenn das aktuelle Dokument in einem sicheren Kontext (z. B. HTTPS oder localhost) läuft, sonst <code>false</code>.

seit JavaScript Baseline: alle modernen Browser (Chrome 47, Firefo Kategorie: webapi

Signatur

Window.isSecureContext

Beschreibung

window.isSecureContext gibt an, ob die aktuelle Seite in einem sicheren Kontext läuft. Das ist der Fall, wenn das Dokument über eine vertrauenswürdige Verbindung ausgeliefert wurde – typischerweise über https:// oder wss:// – oder von einer lokal als sicher geltenden Adresse wie http://localhost, http://127.0.0.1 oder file:// stammt.

Viele leistungsfähige Web-APIs stehen nur in sicheren Kontexten zur Verfügung, z. B. Service Worker, navigator.clipboard, crypto.subtle, Geolocation, getUserMedia(), Web Bluetooth, WebAuthn oder die Payment Request API. Mit isSecureContext prüfst du vorab, ob solche Funktionen überhaupt verfügbar sein können, und kannst eine verständliche Rückmeldung oder eine Ausweichlösung anbieten.

Wichtig: Ein Dokument gilt nur dann als sicher, wenn auch alle übergeordneten Frames sicher sind. Ein HTTPS-iframe, das in eine HTTP-Seite eingebettet ist, liefert daher false. Die Eigenschaft existiert auch in Workern als self.isSecureContext (über WorkerGlobalScope).

Beispiele

Einfache Prüfung des Kontexts

if (window.isSecureContext) {
  console.log('Sicherer Kontext – geschützte APIs sind nutzbar.');
} else {
  console.warn('Unsicherer Kontext – bitte die Seite über HTTPS aufrufen.');
}
Sicherer Kontext – geschützte APIs sind nutzbar.

Service Worker nur im sicheren Kontext registrieren

const registerWorker = async () => {
  if (!window.isSecureContext || !('serviceWorker' in navigator)) {
    console.info('Service Worker nicht verfügbar – Offline-Modus deaktiviert.');
    return;
  }
  const reg = await navigator.serviceWorker.register('/sw.js');
  console.log('Service Worker registriert:', reg.scope);
};

registerWorker();
Service Worker registriert: https://example.com/

Kopieren in die Zwischenablage mit Fallback

const copyText = async (text) => {
  if (window.isSecureContext && navigator.clipboard) {
    await navigator.clipboard.writeText(text);
    return 'Clipboard-API';
  }
  // Fallback für unsichere Kontexte (veraltet, aber breit unterstützt)
  const ta = document.createElement('textarea');
  ta.value = text;
  document.body.append(ta);
  ta.select();
  document.execCommand('copy');
  ta.remove();
  return 'execCommand-Fallback';
};

copyText('Hallo Welt').then((weg) => console.log('Kopiert über:', weg));
Kopiert über: Clipboard-API

Prüfung im Web Worker

// worker.js
self.postMessage({ secure: self.isSecureContext, hasSubtle: !!self.crypto?.subtle });
{ secure: true, hasSubtle: true }

// Wichtig · Fallstricke

  • Iframes: Ein HTTPS-Frame innerhalb einer HTTP-Seite ist nicht sicher – maßgeblich ist die gesamte Kette der übergeordneten Dokumente.
  • Lokale Entwicklung: http://localhost und 127.0.0.1 gelten als sicher, eine lokale IP wie http://192.168.0.10 dagegen nicht. Tests auf Mobilgeräten im LAN schlagen daher oft fehl – nutze HTTPS oder einen Tunnel.
  • Kein Sicherheitsnachweis: true sagt nur etwas über den Transportweg aus, nicht über die Vertrauenswürdigkeit des Inhalts oder eingebundener Skripte (XSS bleibt möglich).
  • Feature-Erkennung: Prüfe zusätzlich immer die konkrete API (z. B. 'serviceWorker' in navigator), da Browser APIs auch aus anderen Gründen weglassen können.
  • Kompatibilität: In allen aktuellen Browsern verfügbar; in sehr alten Browsern ist die Eigenschaft undefined – ein Vergleich mit === true ist dann robust.