Google Analytics与CSP配置：nonce替代unsafe-inline后仍报错

问题背景 #

为提升安全性，将CSP的script-src中的'unsafe-inline'替换为nonce配置：

script-src 'self' 'nonce-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'

并为页面内嵌脚本添加对应nonce属性：

<script nonce="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
</script>

但Google Analytics的tags.js动态注入脚本时仍被CSP拦截，仅能通过script-src-elem添加'unsafe-inline'临时解决，需更安全的替代方案。

最优解决方案：使用strict-dynamic指令 #

strict-dynamic是CSP的核心安全指令，它允许已被信任的脚本（如带合法nonce/hash的脚本）加载或创建的其他脚本自动获得信任，无需额外配置源或unsafe-inline，完美适配GA动态注入脚本的场景。

配置步骤 #

1. 更新CSP的script-src规则，加入'strict-dynamic'：

script-src 'nonce-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' 'strict-dynamic'

注意：添加strict-dynamic后，'self'等源指令会被忽略（除非配合'unsafe-inline'，但我们不需要），仅信任由可信脚本加载的资源。

2. 保持原有内嵌脚本的nonce属性不变，确保初始化GA的脚本被CSP信任。

原理说明 #

• 带nonce的内嵌脚本属于可信脚本，它加载的tags.js会自动被CSP信任；
• tags.js动态创建并注入的脚本，因由可信脚本生成，同样会被CSP允许执行，无需额外授权。

备选方案：手动控制GA脚本注入 #

如果需要兼容不支持strict-dynamic的旧浏览器（如IE），可手动创建脚本元素并添加nonce，替代GA自动注入的逻辑：

1. 保持CSP的script-src配置不变（包含nonce和'self'，同时需添加GA脚本的源）：

script-src 'self' 'nonce-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' https://www.googletagmanager.com

2. 替换原有GA初始化脚本，手动创建并插入tags.js：

<script nonce="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    // 手动创建tags.js脚本元素并添加nonce
    const script = document.createElement('script');
    script.nonce = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
    script.src = 'https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID';
    document.body.appendChild(script);
</script>

此方案通过手动为动态创建的脚本添加nonce，让CSP识别为合法脚本，避免使用unsafe-inline。

内容的提问来源于stack exchange，提问作者Adventitious Angles Qs Poster