在内容安全策略中使用 Microsoft UET 标签

内容安全策略（CSP）是一种广泛使用的网络安全标准，它有助于检测和缓解某些类型的网站相关攻击，包括跨站脚本、点击劫持和数据注入。

UET 页面加载事件

要在具有CSP的网页上使用UET标签，必须允许内容策略执行标签代码。标签代码由内联JavaScript代码组成，该代码注入bat.js脚本。我们建议您使用nonce（一次性数字）来解决这个问题。nonce属性是一个任意数字，而不是静态页面中的固定值。您的网站从服务器获取每个请求的新nonce值。您可以参考这个页面了解更多关于nonce的信息。

使用此代码为您的CSP提供nonce值：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; child-src 'none';script-src 'nonce-{NONCE-FROM-SERVER}' bat.bing.com; img-src bat.bing.com" />

Use the same nonce值在标签代码中。以下是页面加载事件的示例：

<script nonce='{NONCE-FROM-SERVER}'>(function (w, d, t, r, u) { var f, n, i; w[u] = w[u] || [], f = function () { var o = { ti: "16017482" }; o.q = w[u], w[u] = new UET(o), w[u].push("pageLoad") }, 
	n = d.createElement(t), n.src = r, n.async = 1, 
	n.onload = n.onreadystatechange = function () { var s = this.readyState; s && s !== "loaded" && s !== "complete" || (f(), n.onload = n.onreadystatechange = null) },
	m = d.querySelector('[nonce]'),
	m&&n.setAttribute('nonce', m.nonce||m.getAttribute('nonce')),
	i = d.getElementsByTagName(t)[0], i.parentNode.insertBefore(n, i) 
})(window, document, "script", "//bat.bing.com/bat.js", "uetq");
</script>

UET 自定义事件

为具有 CSP 的网站设置 UET 自定义事件类似。以下是触发按钮单击事件的示例：

<!--这里我们在按钮被点击时调用一个javascript函数，执行报告自定义事件的代码--><input type="button"  id="button1" value="(CSP) Click here to report a standard custom event with static values"/><script nonce='{NONCE-FROM-SERVER}'>
	document.getElementById('button1').addEventListener('click', function(){
	window.uetq = window.uetq || []; window.uetq.push({ 'ec': 'MyCategory', 'ea': 'MyAction', 'el': 'MyLabel', 'ev': 3 });
  	}, true);
</script>

你可以试试这个 此处。 注意：您的服务器生成随机的 nonce值。静态值仅用于演示目的。

如果nonce解决方案不适合你，你可以在script-src部分添加'unsafe-inline'：

<meta http-equiv="Content-Security-Policy" content="img-src https://*; child-src 'none'; script-src 'unsafe-inline' https://bat.bing.com;" />

使用 Google Tag Manager 配合 UET

如果您使用Google Tag Manager启用了UET标签，请遵循Google的文档，解除对您的CSP网站上的GTM的阻止。但是，如果您只完成了Google的指导，典型的CSP仍然会阻止我们的JavaScript。要移除阻止，CSP必须包含https://bat.bing.com作为一个指令。这里是一个例子：

<meta http-equiv="Content-Security-Policy" content=" child-src 'none';script-src 'nonce-{NONCE-FROM-SERVER}' https://bat.bing.com/; " />

使用 UET 与 Clarity

通常，如果您的网站没有CSP，Clarity就可以正常工作。如果您想在您的CSP网站上使用Clarity，您需要在script-src部分添加域名为"unsafe-inline"：

<meta http-equiv="Content-Security-Policy" content="img-src https://*; child-src 'none'; script-src 'unsafe-inline