GTM nonce-aware 脚本不适用于自定义 HTML 标签的所有浏览器

Question

我有一个使用 SSR 的 Vue 应用程序。为了实施 Content-Security-Policy，我使用 nonce-aware version of GTM snippet.

但它并没有将 nonce 添加到 gtm 注入页面的所有脚本（特别是自定义 HTML 标签）。我按照提到的解决方案解决了 Safari 上的问题。但它在 Chrome、Firefox 或 Edge 上不起作用，我仍然查看这些标签的错误：

这是我的 CSP 设置：

default-src 'self';
base-uri 'self';
block-all-mixed-content;
font-src 'self' https: https://fonts.gstatic.com data:;
img-src 'self' https: data: https://www.google-analytics.com https://ssl.gstatic.com  https://www.gstatic.com https://www.googletagmanager.com;
object-src 'none';
script-src 'self' 'nonce-b62382357618aee340fc9dc596c94a19' https://www.google-analytics.com/ https://ssl.google-analytics.com https://tagmanager.google.com https://www.googletagmanager.com 127.0.0.1:*;
script-src-attr 'none';
style-src 'self' 'unsafe-inline' https://tagmanager.google.com https://fonts.googleapis.com;
upgrade-insecure-requests;
connect-src 'self' https://www.google-analytics.com https://stats.g.doubleclick.net;

经过数小时的研究，我发现了以下评论：

Chrome masks the nonce attribute value so tag manager is unable to grab it and store it as a variable.

我不确定这是否真的是问题所在，但任何人都可以解释一下我如何在不使用 unsafe-inline 或哈希的情况下解决这个问题，因为即使在 [=] 上似乎也没有修复它的标准方法38=] 文档？

Answer 1

在互联网上进行了大量搜索并阅读了不同的文章后，我发现中提到的解决方案在 Safari 中运行良好，但在其他浏览器中运行良好，因为：

Chrome, Safari, and Edge mask the nonce attribute value so GTM is unable to grab it and store it as a variable.

考虑将 nonce 传播到自定义 HTML 标签，我们继续并应用以下更改来解决 Chrome、Firefox 上的此问题，和边缘。根据建议 here in the comments 我们需要稍微修改 nonce-aware 脚本并将随机数放在 data- 属性中（这样浏览器就不会屏蔽它），并将其推送到数据层:

<!-- Google Tag Manager -->
<script
  nonce='{{YOUR_GTM_NONCE}}'
  data-gtm-nonce='{{YOUR_GTM_NONCE}}'
>
  (function(w,d,s,l,i){
    const gtmNonce = d.querySelector('[data-gtm-nonce]').dataset.gtmNonce;
    w[l]=w[l]||[];
    w[l].push({'nonce': gtmNonce});
    w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
    const 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.setAttribute('nonce', gtmNonce);
    f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','YOUR_GTM_ID');
</script>
<!-- End Google Tag Manager -->

然后在GTM中，你需要把你根据定义的nonce变量改成这个：

对此：

其余保持不变

GTM nonce-aware 脚本不适用于自定义 HTML 标签的所有浏览器

GTM nonce-aware script does not work on all browsers for Custom HTML tags

google-analytics

google-chrome

content-security-policy

google-tag-manager

vue-ssr