PHP加密字符串React/Android解密：部署后crypto.subtle报错求助

问题场景 #

我在PHP端采用AES-256-CTR算法加密字符串，本地环境下，React JS通过Web Crypto API的crypto.subtle和Android端均可正常解密该字符串，但部署到服务器后，JS端出现错误：

Decryption error: TypeError: Cannot read properties of undefined (reading 'importKey')

可能的原因及解决办法 #

• 非安全上下文限制
  Web Crypto API的crypto.subtle仅在安全上下文（HTTPS、localhost）中可用。本地开发时localhost被浏览器默认认定为安全环境，但部署到服务器后如果使用HTTP协议，浏览器会直接禁用crypto.subtle，导致调用importKey时触发undefined报错。
  解决：生产环境必须切换到HTTPS协议；测试环境可临时通过Chrome启动参数--unsafely-treat-insecure-origin-as-secure="http://你的服务器地址"绕过限制，但不建议用于生产。

• 浏览器兼容性或打包工具问题
  部分老旧浏览器、特殊内嵌WebView可能不支持crypto.subtle，或者部署时打包工具（如Webpack）的配置异常导致crypto对象被错误处理。
  解决：

  • 代码中先做兼容性判断：if (!window.crypto?.subtle)，给用户抛出明确的不支持提示；
  • 若为打包工具问题，检查配置确保未剔除crypto相关模块，必要时引入crypto-browserify作为polyfill（注意验证AES-256-CTR的兼容性）。

• 代码执行时机错误
  部署后页面加载顺序、异步逻辑与本地环境存在差异，导致调用crypto.subtle时crypto对象尚未完成初始化。
  解决：

  • React项目中把解密逻辑放在useEffect钩子中（确保DOM和全局对象已加载）；
  • 执行解密前先做存在性校验：if (window.crypto && window.crypto.subtle)再调用相关方法。

• 服务器CSP配置限制
  服务器若配置了严格的内容安全策略（CSP），可能禁止了Web Crypto API的使用，导致crypto.subtle不可用。
  解决：检查服务器的CSP配置，确保未添加限制crypto的规则，必要时调整CSP指令（如添加script-src 'self'）。

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