Javascript 违反内容安全策略的OnClick

我有一个附加到HTML/EJS页面的外部脚本。该脚本使用“createElement”和“setAttribute”命令将图像填充到页面。此外，我还创建了一个“onclick”属性，以便在“单击”其中一个创建的图像时运行函数。外部“.js”文件的代码类似于以下内容：

addEventListener("load", initialize);

const vitals = document.querySelector('#passed');

const _convert = vitals.dataset.pix.split(",");  
  //convert the passed ('dataset') string into an array...

function initialize() {

...

  //**ADD THE PHOTO...

  _item = document.createElement("img"); 
  _item.setAttribute("id", "pix_" + _str);
  _item.setAttribute("src", "/gallery/photo/" + _convert[_count]);
  _item.setAttribute("onclick", "reRouter(this);");  
  _item.setAttribute("alt", "picture of " + _str);
  _item.setAttribute("width", '100%');
  document.getElementById("group_" + _tally).appendChild(_item);

...

}

function reRouter(_sent) {

//do stuff based upon the 'clicked' image...
//the Content Security Policy error is thrown ONLY upon a click of an image created in the 'initialize' function above...WHY?

}

“初始化”功能似乎运行正常，页面根据需要填充来自指定文件夹的图像。但是，当我在其中一个图像上执行“鼠标单击”时，我会遇到内容安全策略冲突，如下所示：

拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令：“script src attr'none”“。启用内联执行需要'unsafe inline'关键字、哈希（'sha256-…'）或nonce（'nonce-…'）

---

为什么鼠标点击会抛出这样的错误？奇怪的是，‘initialize’函数运行良好，并且没有抛出错误……它只在鼠标点击图像时发生。非常感谢您的建议。

您的外部脚本可能来自CSP中列出的源代码。onclick代码实际上是内联javascript，除非您指定“unsafe inline”，否则它将被阻止。即使Chrome建议使用散列，它也不会将其作为onclick用于事件处理程序。在CSP级别3（尚未得到广泛支持）中，您可以使用“不安全哈希”来实现这一点：

---

解决方案是在外部脚本中添加一个事件侦听器来处理onclick事件。

您的外部脚本可能来自CSP中列出的源。onclick代码实际上是内联javascript，除非您指定“unsafe inline”，否则它将被阻止。即使Chrome建议使用散列，它也不会将其作为onclick用于事件处理程序。在CSP级别3（尚未得到广泛支持）中，您可以使用“不安全哈希”来实现这一点：

---

解决方案是在外部脚本中添加一个事件侦听器来处理onclick事件。

谢谢您的回复。我将尝试编写一些处理onclick事件的代码。我们只需要弄清楚如何确定哪些图像被“点击”。我会尝试一下，当/如果我让它工作起来，我会很乐意“检查”你的答案。感谢您的回复。与document.getElementById（“pix”+\u str）.addEventListener（'click'，function{/*do stuff here*/}，false）类似的内容；谢谢你的回复。我将尝试编写一些处理onclick事件的代码。我们只需要弄清楚如何确定哪些图像被“点击”。我会尝试一下，当/如果我让它工作起来，我会很乐意“检查”你的答案。感谢您的回复。与document.getElementById（“pix”+\u str）.addEventListener（'click'，function{/*do stuff here*/}，false）类似的内容；