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

O texto é o TypeError genérico do motor JavaScript: 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')”. O nome do método é o da primeira chamada (`importKey`, `sign`, `generateKey`…).

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

O que significa

`crypto.subtle` não existe nesta página, então a primeira chamada a ele falha com um TypeError genérico de “undefined”. Os navegadores só expõem `SubtleCrypto` em contextos seguros: páginas servidas por HTTPS, a partir de `http://localhost` / `127.0.0.1` ou de URLs `file:`. O mesmo código funciona na sua máquina em localhost e quebra assim que a página é aberta por HTTP não criptografado a partir de outro nome de host ou endereço IP. `crypto.getRandomValues` continua funcionando, o que faz a falha parecer seletiva.

Por que acontece

• A página é servida por HTTP não criptografado

  comum

  Hosts de homologação, ferramentas de intranet e ambientes de preview sem TLS não são contextos seguros. Neles, todos os recursos do WebCrypto desaparecem, conforme a especificação.

• Um servidor de desenvolvimento aberto por um endereço da rede local

  comum

  `http://localhost:5173` é seguro; `http://192.168.1.20:5173` (teste em um celular) não é. Um código que funcionava durante o desenvolvimento falha no dispositivo.

• Um frame ou WebView inseguro

  ocasional

  Uma página segura incorporada em um frame pai `http:`, ou um WebView que carrega conteúdo local por um esquema personalizado inseguro, também não é um contexto seguro.

Como corrigir

1. 1.

   Detectar o problema e falhar com uma mensagem clara

   Verifique `window.isSecureContext` antes de usar o WebCrypto. Não recorra silenciosamente a um polyfill de criptografia em JavaScript — sem TLS, a integridade da página não é garantida de qualquer forma.

   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 a página por HTTPS

   Use TLS em todos os ambientes, inclusive nos servidores de desenvolvimento que você abre de outros dispositivos; ferramentas como o mkcert criam certificados confiáveis localmente.

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

← Ver toda a base de erros de assinatura