如何让SubtleCrypto在TestCafe中正常工作？

问题描述 #

我在客户端使用SubtleCrypto Web API生成SHA256，代码如下：

const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);

正常运行时功能正常，但通过TestCafe执行端到端测试时，控制台报错：TypeError: Cannot read properties of undefined (reading 'digest')，说明crypto.subtle未定义。已知SubtleCrypto仅在安全上下文（包含localhost）中可用，且测试使用localhost运行，请问哪里操作有误？

可能的原因及解决方法 #

• TestCafe浏览器实例未正确触发安全上下文判定
  即使使用localhost，TestCafe启动的浏览器实例可能没有自动识别安全上下文。可以通过添加浏览器启动参数强制将localhost标记为安全来源，以Chrome为例：

  testcafe chrome:headless --unsafely-treat-insecure-origin-as-secure=http://localhost:3000 your-test-file.js
  

  替换命令中的3000为你的测试服务端口。

• 测试页面协议不符合要求
  确认测试页面是通过http://localhost:xxxx或https://localhost:xxxx访问的，若使用file://等非HTTP/HTTPS协议，即使是localhost也无法触发安全上下文，导致crypto.subtle不可用。

• TestCafe配置或插件干扰安全策略
  检查是否有自定义TestCafe配置、插件或钩子修改了浏览器安全策略，尝试简化配置，禁用不必要的插件后重新测试。

• 代码执行时机过早
  TestCafe的页面加载钩子可能在crypto.subtle初始化完成前就执行了加密代码。可以在测试中添加等待逻辑，比如用TestCafe的wait API等待页面核心元素加载完成后，再执行SHA256生成操作。

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