CSP环境下无需unsafe-inline运行GTM的可行方案？

问题背景 #

结账页面部署了支持nonce的GTM脚本：

<script nonce="eWp5ejMyZjFiZDRzMzBwZjc1M3dhYXdpNHRnM3RoNjc=">(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;var n=d.querySelector('[nonce]');
n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXX');</script>

nonce已正确生成并配置在CSP Header中，但JS控制台出现如下错误：

执行内联脚本违反了以下内容安全策略指令
...
需使用'unsafe-inline'关键字、哈希值('sha256-lN/NhA...Od4=')或nonce('nonce-...')才能启用内联执行，操作已被阻止。

错误发生在gtm.js的insertBefore()函数行，无法修改谷歌官方的GTM代码。添加unsafe-inline到CSP头可临时解决，但需要更安全的替代方案。

解决步骤 #

1. 在GTM后台创建一个nonce变量
2. 在GTM的HTML脚本模板中插入该变量，格式如下：

<script nonce="{{nonce}}">

3. 勾选该HTML组件下方的**兼容"document.write"**选项

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