CSP合规性-由于JS内联事件处理程序（onclick）而失败]]

Question

我正在通过取消'script-src'指令中的'unsafe-inline'来使现有的php web应用程序CSP兼容

当前代码（有效，但仅由于不安全的内联）：

// Currently - button in a php form

 <button type="submit" class="btn-dark" name="button_clearUser" 
        onclick="return singleConfirm('Proceed ?')"  >Clear Penalty</button> 


// js function in an external javascript file

function singleConfirm( msg1 ) {  
  if (confirm(msg1)) {    
        return true;
   } else {
        return false;
   }
 }

为了使上面的CSP完全兼容，我尝试了以下操作...

// Amended - button in a php form - added class confirm

 <button type="submit" class="btn-dark confirm" name="button_clearUser" 
         >Clear Penalty</button> 

// Amended - added a eventListener in the external js file
// for class confirm 

document.addEventListener('DOMContentReady', function () {

  document.getElementsByClassName('confirm')
          .addEventListener('click', return singleConfirm(msg1));
});

以上修订无效。而且我没有在浏览器控制台中看到任何错误。我怀疑这是JS问题。

请告知。

................................以下更新....................... ................

更新3（剩下的唯一问题是，即使我单击“取消”，表单仍会提交。通过onclick方法，使用了'return'关键字。不确定如何在此处实现'return'概念）:::

固定的参考错误：未定义msg1

function singleConfirm(msg1) {  
  if (confirm(msg1)) {   
      return true;     
  } else {
      return false;  
  }  
}


document.addEventListener('DOMContentLoaded', function () {

    const elems = document.getElementsByClassName('confirm');
    Array.prototype.forEach.call(elems, (elem) => {
        elem.addEventListener('click', () => singleConfirm('Proceed ?'));
    });

});

更新2 :::

用于getElementsByClassName的数组。在此更新中，我现在弹出一个模式窗口，但前提是我删除了msg1（给出了ReferenceError：未定义msg1）

document.addEventListener('DOMContentLoaded', function () {

    const elems = document.getElementsByClassName('confirm');
    Array.prototype.forEach.call(elems, (elem) => {
        elem.addEventListener('click', () => singleConfirm(msg1));
    });

});

更新1 :::

已替换的DOMContentReady-> DOMContentLoaded

 document.addEventListener('DOMContentLoaded', function () {

 });

我正在通过使'script-src'指令中的'unsafe-inline'消失来使现有的php web应用程序CSP符合当前的代码（有效，但仅由于unsafe-inline）：// ...

Answer 1

使其按以下方式工作...