Firefox访问http://localhost:3000时window.crypto.subtle未定义问题求助

核心原因 #

没错，就是Firefox的安全策略更新导致的。从Firefox 114版本开始，默认限制了**HTTP环境下（包括localhost）**对window.crypto.subtle的访问，只有HTTPS或特定豁免的本地环境才能调用该API。你的SPA依赖Azure AD的PKCE登录流程，而该流程需要用这个API生成加密挑战码，所以HTTP访问localhost时会触发pkce_not_created错误。

临时恢复旧设置（快速测试用） #

通过修改Firefox配置，重新允许localhost的HTTP环境使用加密API：

• 在地址栏输入about:config，确认弹出的风险提示
• 搜索配置项security.webauth.webauthn_enable_unsafe_localhost，将其值改为true
• 再搜索security.crypto.enable_unsafe_localhost，同样设为true
• 重启Firefox后，本地http://localhost:3000即可正常使用登录功能

长期规范方案（推荐） #

为本地开发环境启用HTTPS，这是更符合现代浏览器安全要求的做法，主流前端脚手架都支持一键配置：

• Vite：在vite.config.js中添加HTTPS配置

  import { defineConfig } from 'vite'
  export default defineConfig({
    server: {
      https: true
    }
  })
  

• Create React App：启动时添加HTTPS=true前缀，比如HTTPS=true npm start
• 若需要自定义证书，可使用mkcert工具生成本地信任的SSL证书，避免浏览器的安全警告

内容的提问来源于stack exchange，提问作者LLL