0

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

Jake
  • 3
  • 2
  • Helmet maintainer here. I don't know why this is happening, but it looks like HCaptcha might be trying to import a non-JS module, which causes issues. Could be worth looking up "crbug/1173575". – Evan Hahn Mar 29 '23 at 12:42
  • Hi, I have already done that without success. Without helmet (csp) hCaptcha loads, only with csp the error appears. Unfortunately I have not found a solution for this – Jake Mar 29 '23 at 19:03
  • Helmet is made up of several smaller modules and it's possible that one of them is causing the issue. Try [doing something similar to what I suggested in this comment](https://github.com/helmetjs/helmet/issues/401#issuecomment-1450211290) to see if that will fix things for you. – Evan Hahn Apr 03 '23 at 00:36

1 Answers1

0

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:

port 3000

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

using port 3001