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

Question

我正在尝试通过取消“script-src”指令中的“unsafe-inline”来使现有的 php web 应用程序符合 CSP当前的代码（工作但仅由于 unsafe-inline ）：// 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 filefunction 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”概念）:::修复了 ReferenceError：未定义 msg1function 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 is not defined ）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 () { });

Answer 1

终于让它工作如下......

function singleConfirm(msg1) {

  if (confirm(msg1)) { 

      return true;

  } else {    

      return false;    

  }

}

// Use class confirmProceed on the php/html form

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

    const elems = document.getElementsByClassName('confirmProceed');

    Array.prototype.forEach.call(elems, (elem) => {    

        elem.addEventListener('click', (event) => {

           if ( !singleConfirm('Proceed with Action?') ){

                event.preventDefault();

           } 

        });

    });  

});