hCaptcha with Nodejs and React not working (csp)

Question

I have nodejs with helmet as backend and react with the "@hcaptcha/react-hcaptcha" library in the frontend

nodejs:

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

react:

import HCaptcha from "@hcaptcha/react-hcaptcha";

export default function Captcha({ onVerify }) {
  return (
    <HCaptcha
      sitekey="10000000-ffff-ffff-ffff-000000000001"
      theme="dark"
      onVerify={onVerify}
    />
  );
}

However, the captcha is not displayed

I get this warning in chrome VM15:161 crbug/1173575, non-JS module files deprecated.

And firefox This error page has no error code in its security info

screenshot of actual captcha

Answer 1

I've tried to replicate your error, the only way was by loading localhost with port 3001 instead of 3000 (node vs react port) I used a 1:1 copy of your code and it produces a test captcha as expected:

And when you try a different port, or don't specify one, the error occurs: