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

Le texte est celui de l’erreur TypeError générique du moteur : 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') ». Le nom de la méthode suit le premier appel (`importKey`, `sign`, `generateKey`…).

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

Ce que cela signifie

`crypto.subtle` n’existe pas sur cette page : le premier appel qui l’utilise échoue donc avec une erreur TypeError générique qui mentionne « undefined ». Les navigateurs n’exposent `SubtleCrypto` que dans les contextes sécurisés : pages servies en HTTPS, depuis `http://localhost` / `127.0.0.1`, ou depuis des URL `file:`. Le même code fonctionne sur votre machine avec localhost et casse dès que la page est ouverte en HTTP non chiffré depuis un autre nom d’hôte ou une adresse IP. `crypto.getRandomValues` continue de fonctionner, ce qui donne à l’échec une apparence sélective.

Pourquoi cela se produit

• La page est servie en HTTP non chiffré

  fréquente

  Les hôtes de préproduction, les outils d’intranet et les environnements de prévisualisation sans TLS ne sont pas des contextes sécurisés. Toutes les fonctionnalités WebCrypto y disparaissent, conformément à la spécification.

• Un serveur de développement ouvert via une adresse du réseau local

  fréquente

  `http://localhost:5173` est sécurisé, `http://192.168.1.20:5173` (test sur un téléphone) ne l’est pas. Le code qui fonctionnait pendant le développement échoue sur l’appareil.

• Un cadre ou une WebView non sécurisés

  occasionnelle

  Une page sécurisée intégrée dans un cadre parent `http:`, ou une WebView qui charge du contenu local via un schéma personnalisé non sécurisé, n’est pas non plus un contexte sécurisé.

Comment corriger l’erreur

1. 1.

   Le détecter et échouer avec un message clair

   Vérifiez `window.isSecureContext` avant d’utiliser WebCrypto. Ne vous rabattez pas silencieusement sur un polyfill cryptographique en JavaScript : sans TLS, l’intégrité de la page n’est de toute façon pas garantie.

   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.

   Servir la page en HTTPS

   Utilisez TLS dans tous les environnements, y compris pour les serveurs de développement que vous ouvrez depuis d’autres appareils ; des outils comme mkcert créent des certificats approuvés localement.

   # 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") }

← Parcourir toute la base de données des erreurs de signature