TypeError: Cannot read properties of undefined (reading 'digest')

Der Wortlaut ist der generische TypeError der Engine: Chromium/V8 „Cannot read properties of undefined (reading 'digest')“, Firefox „can't access property \"digest\", crypto.subtle is undefined“, Safari/WebKit „undefined is not an object (evaluating 'crypto.subtle.digest')“. Der Methodenname richtet sich nach dem ersten Aufruf (`importKey`, `sign`, `generateKey` …).

WebCrypto — window.crypto.subtle is undefined outside a secure context (Chromium / Firefox / WebKit)

Was der Fehler bedeutet

`crypto.subtle` existiert auf dieser Seite nicht, daher scheitert der erste Aufruf darauf mit einem generischen TypeError, der „undefined“ meldet. Browser stellen `SubtleCrypto` nur in sicheren Kontexten bereit: auf Seiten, die über HTTPS, von `http://localhost` / `127.0.0.1` oder über URLs mit `file:` ausgeliefert werden. Derselbe Code funktioniert auf deinem Rechner unter localhost und bricht ab, sobald die Seite über einfaches HTTP unter einem anderen Hostnamen oder einer IP-Adresse geöffnet wird. `crypto.getRandomValues` funktioniert weiter, was den Fehler selektiv aussehen lässt.

Warum der Fehler auftritt

• Die Seite wird über einfaches HTTP ausgeliefert

  häufig

  Staging-Hosts, Intranet-Tools und Preview-Umgebungen ohne TLS sind keine sicheren Kontexte. Dort verschwindet laut Spezifikation jede WebCrypto-Funktion.

• Entwicklungsserver über eine LAN-Adresse aufgerufen

  häufig

  `http://localhost:5173` ist sicher, `http://192.168.1.20:5173` (Test auf einem Smartphone) nicht. Code, der in der Entwicklung funktioniert hat, scheitert auf dem Gerät.

• Ein unsicherer Frame oder eine unsichere WebView

  gelegentlich

  Eine sichere Seite, die in einen übergeordneten Frame mit `http:` eingebettet ist, oder eine WebView, die lokale Inhalte über ein eigenes unsicheres Schema lädt, ist ebenfalls kein sicherer Kontext.

So behebst du den Fehler

1. 1.

   Erkennen und mit einer klaren Meldung abbrechen

   Prüfe `window.isSecureContext`, bevor du WebCrypto verwendest. Weiche nicht stillschweigend auf ein Krypto-Polyfill in JavaScript aus – ohne TLS ist die Integrität der Seite ohnehin nicht gewährleistet.

   if (!window.isSecureContext || !globalThis.crypto?.subtle) {
     throw new Error("WebCrypto needs HTTPS (or http://localhost). Current origin: " + location.origin);
   }
   const digest = await crypto.subtle.digest("SHA-256", data);

2. 2.

   Seite über HTTPS ausliefern

   Verwende TLS in jeder Umgebung, auch für Entwicklungsserver, die du von anderen Geräten aus öffnest; Tools wie mkcert erzeugen lokal vertrauenswürdige Zertifikate.

   # Local HTTPS for a dev server reachable from other devices
   mkcert -install
   mkcert dev.example.test 192.168.1.20 localhost
   # Vite: server.https = { key: fs.readFileSync("dev.example.test+2-key.pem"), cert: fs.readFileSync("dev.example.test+2.pem") }

← Gesamte Signaturfehler-Datenbank durchsuchen