Express.js Cloudflare 的 Helmet CSP 设置 - 要输入什么？

Question

我在 Heroku（免费套餐）上部署了一个简单的投资组合站点。该站点是使用 Express Node.js 和前端 React 构建的。为了使用需要 SSL 的 .dev 域，我注册了 Cloudflare。现在一切正常，除了我的发送电子邮件表格。我收到以下错误：

Refused to connect to `https://<my-app>.herokuapp.com/api/v1/email/sendemail' because it violates the following Contect Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

我发现它与头盔和 CSP 政策有关，但我不明白我到底需要在其中放入什么。作为临时解决方案，我像这样禁用了 CSP：

app.use(
  helmet({
    contentSecurityPolicy: false,
  })
);

但理想情况下我想做这样的事情：

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        ...helmet.contentSecurityPolicy.getDefaultDirectives(),
        'connect-src': ["'self'", 'cdnjs.cloudflare.com'],
      },
    },
  })
);

但我不知道该放什么。 cdnjs.cloudflare.com 和 ajax.cloudflare.com 都不起作用。

Answer 1

以下是 Express 中 CSP 的最常见用法。这是我的应用程序的配置，我想你应该在那里找到你需要的一切：

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        blockAllMixedContent: [],
        fontSrc: ["'self'", 'https:', 'data:'],
        frameAncestors: ["'self'", 'https://accounts.google.com/'],
        frameSrc: ["'self'", 'https://accounts.google.com/'],
        imgSrc: ["'self'", 'data:'],
        objectSrc: ["'self'", 'blob:'],
        mediaSrc: ["'self'", 'blob:', 'data:'],
        scriptSrc: ["'self'", 'https://apis.google.com'],
        scriptSrcAttr: ["'none'"],
        styleSrc: ["'self'", 'https:', "'unsafe-inline'"],
        upgradeInsecureRequests: [],
        connectSrc: ["'self'", 'https://my-app.herokuapp.com'],
      },
    },
  })
);

您的 connectSrc 应该包括 https://my-app.herokuapp.com，就像您在最后一行看到的那样。

Express.js Cloudflare 的 Helmet CSP 设置 - 要输入什么？

Express.js Helmet CSP settings with Cloudflare - what to put in?

heroku

express

cloudflare

helmet.js