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

Google chrome GTM nonce-aware脚本不适用于自定义HTML标记的所有浏览器,google-chrome,google-analytics,google-tag-manager,content-security-policy,vue-ssr,Google Chrome,Google Analytics,Google Tag Manager,Content Security Policy,Vue Ssr,我有一个使用SSR的Vue应用程序。为了实现内容安全策略,我使用 但它并没有将nonce添加到gtm注入页面的所有脚本(特别是自定义HTML标记)。我遵循上面提到的解决方案,解决了Safari上的问题。但是它不适用于Chrome、Firefox或Edge,我仍然看到这些标签的错误: 这是我的CSP设置: default-src 'self'; base-uri 'self'; block-all-mixed-content; font-src 'self' https: https://fon

我有一个使用SSR的Vue应用程序。为了实现内容安全策略,我使用

但它并没有将
nonce
添加到gtm注入页面的所有脚本(特别是自定义HTML标记)。我遵循上面提到的解决方案,解决了Safari上的问题。但是它不适用于ChromeFirefoxEdge,我仍然看到这些标签的错误:

这是我的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会屏蔽nonce属性值,因此标记管理器无法获取该值并将其存储为变量


我不确定这是否真的是一个问题,但有人能解释一下我如何解决这个问题而不使用
不安全的内联
或散列,因为即使在谷歌文档上似乎也没有标准的解决方法吗?

在互联网上搜索了很多内容并阅读了不同的文章之后,我发现上面提到的解决方案在Safari中非常有效,但在其他浏览器中却不行,因为:

Chrome、Safari和Edge会屏蔽nonce属性值,因此GTM无法获取该值并将其存储为变量

考虑到将
nonce
传播到自定义HTML标记,我们将继续应用以下更改来解决Chrome、Firefox和Edge上的此问题。 正如建议的那样,我们需要稍微修改nonce-aware脚本,并将nonce放在
数据-
属性中(这样浏览器就不会屏蔽它),然后将其推送到数据层:


(功能(w、d、s、l、i){
const gtmnone=d.querySelector(“[data gtm nonce]”)。dataset.gtmnone;
w[l]=w[l]| |[];
w[l].推送({'nonce':gtmNonce});
w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});
常量f=d.getElementsByTagName[0],j=d.createElement,dl=l!=“数据层”?“&l=”+l:”;
j、 异步=真;
j、 src='1〕https://www.googletagmanager.com/gtm.js?id=“+i+dl;
j、 setAttribute('nonce',gtmnone);
f、 parentNode.insertBefore(j,f);
})(窗口、文档、'script'、'dataLayer'、'YOUR_GTM_ID');
然后,在GTM中,您需要从此更改基于定义的nonce变量:

对此


其余部分将保持不变。

请查看,不要忘记勾选。@granty感谢您的回复。在创建这个问题之前,我见过这个问题。我按照此处提供的步骤,勾选了Support document.write复选框,并确认在每个自定义HTML项目中都看到了
nonce
attr。但问题是它只适用于Safari,而不适用于Chrome、Firefox和Edge。我使用的是MacCatalina10.15.1,所有浏览器都是最新版本。还有什么办法可以解决这个问题吗?我只能在Safari上看到我放在GTM脚本标签中的日志。其他人没有。我清除了浏览器缓存,在匿名模式下进行了测试,但没有一个有效。