嵌套在 JavaScript 中的内联事件处理程序 - 拒绝执行内联事件处理程序，因为它违反了以下内容安全策略

Question

前言：属于所有已知或可识别的Javascript的哈希值已包含在CSP标头中。

当我单击自定义 Facebook 共享按钮时，出现以下错误：

拒绝执行内联事件处理程序，因为它违反了 遵循内容安全策略指令：“script-src...”

从浏览器控制台中，我看到错误指的是通用 X，它位于调用外部 Javascript 的 HTML 页面中。

看起来被调用的内联事件处理程序嵌套在 Javascript 中（该 Javascript 在 CSP 标头中有自己的哈希，并且从上面提到的 HTML 页面调用）：

内联事件处理程序：

var s = new Array('"#" onclick="window.open(\'//www.facebook.com/sharer/sharer.php?u=' + u + '\', \'_blank\', \'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0\');return false" title="share on example"');

var l = "";

for (j = 0; j < s.length; j++) l += '<a rel="noopener noreferrer" style="display:inline-block;vertical-align:bottom;width:32px;height:32px;margin: 10px 10px 10px 10px;padding:0;outline:none;background:url(' + f + fn + ") -" + 32 * j + 'px 0 no-repeat" href=' + s[j] + ' target="_blank"></a>';

e[k].innerHTML = '< span id="share" >' + l + "< /span >";

事件处理程序应该打开一个新的浏览器窗口，但它无法在主题中生成错误。但是，它会打开一个新的浏览器选项卡，重新加载同一页面（它不会打开 facebook.com）。

如果我禁用标头中的 CSP，则一切正常。

不幸的是，我无法识别用于生成正确哈希的确切内联事件处理程序。

是否有任何有效的调试工具或技术来跟踪触发错误的精确代码，或任何其他方法来解决此问题？

Answer 1

内联脚本/事件处理程序在 JavaScript 中是危险的，如果页面上存在内容安全策略，则隐式禁止该脚本/事件处理程序。禁用它们的方法是添加

unsafe-inline

到脚本-src

但解决此问题的最佳（最安全）方法是不使用内联事件处理程序，而是通过

在 JavaScript 库中执行此操作

Element.addEventListener(...)