Node.js+React集成hCaptcha失败（CSP配置问题）

后端基于Node.js搭配Helmet配置内容安全策略（CSP），前端通过@hcaptcha/react-hcaptcha库集成hCaptcha，但验证码无法正常显示，浏览器出现以下提示：

• Chrome警告：VM15:161 crbug/1173575, non-JS module files deprecated.
• Firefox提示：This error page has no error code in its security info

问题原因 #

当前的CSP指令缺少hCaptcha加载所需的部分资源权限，导致验证码相关的脚本、图片、字体等资源被浏览器拦截。

修复方案 #

修改后端Helmet的CSP配置，补充必要的指令：

app.use(helmet());
app.use(helmet.contentSecurityPolicy({
    directives: {
        ...helmet.contentSecurityPolicy.getDefaultDirectives(),
        "script-src": [
            "'self'",
            "https://*.hcaptcha.com",
            "'unsafe-eval'"
        ],
        "frame-src": [
            "'self'",
            "https://*.hcaptcha.com"
        ],
        "style-src": [
            "'self'",
            "https://*.hcaptcha.com",
            "'unsafe-inline'"
        ],
        "connect-src": [
            "'self'",
            "https://*.hcaptcha.com"
        ],
        "img-src": [
            "'self'",
            "https://*.hcaptcha.com",
            "data:"
        ],
        "font-src": [
            "'self'",
            "https://*.hcaptcha.com"
        ]
    },
}));

关键修改说明 #

• script-src添加'unsafe-eval'：hCaptcha的核心脚本需要执行动态代码，缺少该权限会导致脚本加载失败
• 新增img-src并包含data:：hCaptcha会使用base64格式的验证码图片，允许data:协议才能正常显示图片资源
• 新增font-src：hCaptcha的样式依赖自定义字体，需允许其域名加载字体文件

前端代码无需修改，确保使用的sitekey有效即可（示例中的10000000-ffff-ffff-ffff-000000000001是hCaptcha官方测试密钥，正式环境需替换为自己的sitekey）。

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