express - Helmet 和 contentSecurityPolicy 并使用 nonce 并添加它但仍然出错

Question

我正在使用 Helmet.contentSecurityPolicy，这里是我的对象的要点:

我的脚本没有加载.....
这没有加载，但你可以看到我在我的信任项目中拥有它；

未加载:这些是通过 GOOGLETAGMANGER 加载的项目，但我有一个随机数？


并且在其中一些的脚本标签中，比如 googleTagmanager，我添加了 nonce .. 现在，对于一些，我无法添加，但我将它们明确地放在配置中。

example of nonce in script tag:
<script nonce="2d4f393ea5bc957db4f385232a53fcc8" async src="https://www.googletagmanager.com/gtag/js?id=*******"></script>

那些本地人
这些是由 webpack 创建的，但我的可接受项目中显然有“localhost”......所以我很困惑。有什么帮助吗？

The errors, are like the following: But I do HAVE the nonce tag (in some of them) AND you can see I include "unsafe-inline".

Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'unsafe-inline' nonce-a449a007188e909846c2e74148c3e1b0 <URL> *.kustomerapp.com/ <URL> *.segment.com/ <URL> *.cloudfront.net <URL> *.stripe.com <URL> *.split.io <URL> *.googletagmanager.com 'self' <URL> ws://localhost:*". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

我的 Helm 中间件要带进来..

import helmet from 'helmet';

const trusted = [
  "'self'",
];

if (process.env.NODE_ENV !== 'production') {
  trusted.push('http://localhost:*', 'ws://localhost:*');
}

export default function contentSecurityPolicy(nonce) {
  return helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: trusted,
      scriptSrc: [
        "'unsafe-eval'",
        "'unsafe-inline'",
        `nonce-${nonce}`,
        'https://www.googletagmanager.com',
        '*.googletagmanager.com',
      ].concat(trusted),
      styleSrc: [
        "'unsafe-inline'",
        '*.gstatic.com',
        '*.googleapis.com',
        'https://*.typography.com',
      ].concat(trusted),
      frameSrc: [
        '*.stripe.com',
      ].concat(trusted),
      fontSrc: [
        '*.cloudflare.com',
        'https://*.cloudflare.com',
        '*.bootstrapcdn.com',
        '*.googleapis.com',
        '*.gstatic.com',
        'data',
      ].concat(trusted),
      imgSrc: [
        'www.googletagmanager.com',
      ].concat(trusted),
    },
    // set to true if you only want to report errors
    reportOnly: false,
    // set to true if you want to set all headers
    setAllHeaders: false,
    // set to true if you want to force buggy CSP in Safari 5
    safari5: false
  });
};

我的一些上下文服务器代码:

const nonce = crypto.randomBytes(16).toString('hex');
const app = new Express();
app.use(cookieParser());
app.use(helmet());
app.use(helmet.referrerPolicy({ policy: 'same-origin' }));
app.use(contentSecurityPolicy(nonce));

[![在此处输入图像描述][2]][2]

Answer 1

我是这里的新手，但我注意到您的错误:Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'unsafe-inline' nonce-a449a007188e909846c2e74148c3e1b0 nonce-a449a007188e909846c2e74148c3e1b0缺少 ' s 所以我会考虑修改你的 contentSecurityPolicy功能如下:

export default function contentSecurityPolicy(nonce) {
  return helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: trusted,
      scriptSrc: [
        "'unsafe-eval'",
        "'unsafe-inline'",
        `'nonce-${nonce}'`,
        'https://www.googletagmanager.com',
        '*.googletagmanager.com',
      ].concat(trusted),
      ...
    }
   });
}

添加 ' s 在写 nonce-${nonce} 时部分。
引用: Helmet JS在引用 > Helm .contentSecurityPolicy(options) > 示例 >//设置“Content-Security-Policy: default-src 'self';script-src 'self' 'nonce-e33ccde670f149c1789b1e1e113b0916'”部分