Signatur
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.');
}
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();
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));
Prüfung im Web Worker
// worker.js
self.postMessage({ secure: self.isSecureContext, hasSubtle: !!self.crypto?.subtle });
// 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://localhostund127.0.0.1gelten als sicher, eine lokale IP wiehttp://192.168.0.10dagegen nicht. Tests auf Mobilgeräten im LAN schlagen daher oft fehl – nutze HTTPS oder einen Tunnel. - Kein Sicherheitsnachweis:
truesagt 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=== trueist dann robust.