如何在Helmet配置的CSP中正确设置https通配符，解决解析报错问题

报错根因 #

• CSP 规范中仅 'self'、'unsafe-inline'、'unsafe-eval' 这类特殊指令值需要用单引号包裹，普通的源地址、通配规则不需要加单引号
• 你所写的 'https://*'、'http://*' 存在两处语法错误：一是多余的单引号，二是匹配所有 HTTP/HTTPS 源的标准写法为 https:、http:，不需要加 //* 后缀

解决方案 #

推荐方案（仅允许 Discord 图片资源，安全性更高） #

直接将 Discord 官方的图片 CDN 域名加入 img-src 规则即可，不需要放开所有 HTTP/HTTPS 源，降低安全风险：

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      ...helmet.contentSecurityPolicy.getDefaultDirectives(),
      'default-src': ['\'unsafe-inline\'', '\'self\'', 'https:', 'http:'],
      'script-src': ['\'self\'', '\'unsafe-inline\'', '\'unsafe-eval\'', '*'],
      'img-src': ['\'self\'', 'https://cdn.discordapp.com', 'https://media.discordapp.net'],
    },
  })
);

通用方案（允许所有 HTTP/HTTPS 图片资源） #

如果确实需要允许加载任意 HTTP/HTTPS 协议的图片，修正语法即可：

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      ...helmet.contentSecurityPolicy.getDefaultDirectives(),
      'default-src': ['\'unsafe-inline\'', '\'self\'', 'https:', 'http:'],
      'script-src': ['\'self\'', '\'unsafe-inline\'', '\'unsafe-eval\'', '*'],
      'img-src': ['\'self\'', 'https:', 'http:'],
    },
  })
);

额外提示 #

你当前配置的 script-src 和 default-src 权限放开范围过大，unsafe-inline、unsafe-eval 以及通配符 * 会大幅削弱 CSP 的安全防护能力，建议后续根据实际使用场景逐步缩小允许的源范围。

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