javascript - 内联样式 CSP 违规 tawk.to 嵌入式聊天小部件

Question

我在我的网站上使用 Tawk.to 的聊天小部件代码来启用聊天气泡。我只是将代码放在一个 JS 文件中：

var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();

(function() {
var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
s1.async = true;
s1.src = 'https://embed.tawk.to/xxxxxx/default';
s1.charset = 'UTF-8';
s1.setAttribute('crossorigin', '*');
s0.parentNode.insertBefore(s1, s0);
})();

我要求它在 HTML 文件中作为<script>. 它按预期工作。但问题是下面的代码导致我的网站违反了一些内容安全策略。对于我的内容安全策略，出于安全原因，我不允许任何内联样式。显然，“https://embed.tawk.to/xxxxxx/default”确实包含一些内联样式。在我的网站上不允许内联样式的情况下，是否有解决方法？

Answer 1

Tawk.to 的小部件在标签和内联样式块中有很多内联样式，因此使用“哈希值”来允许这些实际上是不可行的。

如果合适的话，唯一的方法是 iframe 这个小部件与主页面 CSP 隔离。

对于我的内容安全策略，出于安全原因，我不允许任何内联样式

脚本中的“不安全内联”怎么样？它比 style-src 更不安全。您可以使用“nonce-base64value”令牌允许小部件本身的内联脚本，但 Tawk.to 的小部件使用 javascript:-navigation，因此在 script-src 中没有“unsafe-inline”，您也会违反 CSP。请单击微笑图标并查看浏览器控制台。