Node.js环境下Google Tag Manager与CSP内联脚本限制冲突求解

错误根因说明 #

• 错误1：CSP的script-src-elem指令不支持源地址携带查询参数，你配置的带?id=GTM-*******的GTM地址会被自动判定为无效，无法通过校验。
• 错误2：多个配置问题共同导致内联脚本未通过校验：1. 内联的GTM script标签未添加nonce属性；2. 你只给script-src配置了nonce，未同步给优先级更高的script-src-elem配置nonce；3. 路由传参时nonce拼写错误，全局生成nonce的逻辑不符合安全要求。

具体修复步骤 #

步骤1：修正nonce生成逻辑，改为每个请求动态生成 #

你当前的nonce是全局生成的，服务启动后所有请求复用同一个，不符合nonce单次使用的安全规范，需要放到中间件里每个请求生成：

// 删掉全局的nonceToken定义，改为中间件动态生成
app.use((req, res, next) => {
  res.locals.nonceToken = 'nonce-' + crypto.randomBytes(16).toString('base64');
  next();
});

步骤2：修正Helmet CSP配置 #

app.use(helmet.contentSecurityPolicy({
    useDefaults: true,
    directives: (req, res) => ({
        "script-src-elem": [
            "'self'", 
            "https://unpkg.com/scrollreveal", 
            "https://www.googletagmanager.com/gtm.js", // 去掉查询参数
            `'${res.locals.nonceToken}'` // 加入当前请求的nonce，注意包裹单引号
        ],
        "form-action": "'self'", // self需要包裹单引号
        "script-src": [
            `'${res.locals.nonceToken}'`,
            "https://www.googletagmanager.com" // 加入GTM域名，覆盖默认配置
        ],
        // 按需添加GTM后续加载资源的权限配置
        "img-src": ["'self'", "https://www.googletagmanager.com", "https://*.google-analytics.com"],
        "connect-src": ["'self'", "https://www.googletagmanager.com", "https://*.google-analytics.com"]
    })
}));

步骤3：修正路由传参（可选） #

如果不使用res.locals全局变量，就修正路由里的拼写错误（你之前把nonce拼成了nounce）：

app.get('/', (req, res) => {
    res.render('index', {
        nonceToken: res.locals.nonceToken // 修正拼写错误
    })
});

步骤4：给EJS里的GTM内联脚本添加nonce属性 #

<!-- Google Tag Manager -->
<script nonce="<%= nonceToken %>">
(function (w, d, s, l, i) {
    w[l] = w[l] || []; w[l].push({
        'gtm.start': new Date().getTime(), event: 'gtm.js'
    }); 
    var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s), 
        dl = l != 'dataLayer' ? '&l=' + l : ''; 
    j.async = true; 
    j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; 
    j.nonce = '<%= nonceToken %>'; // 给动态创建的script也加nonce，兼容部分浏览器的校验规则
    f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-*******');
</script>
<!-- End Google Tag Manager -->

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