Соответствие CSP - сбой из-за JS встроенных обработчиков событий (onclick)

Question

Я пытаюсь сделать существующее php веб-приложение совместимым с CSP, отказавшись от 'unsafe-inline' в директиве 'script-sr c'.

Текущий код (работает, но только из-за 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 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. Не уверен, как реализовать здесь концепцию возврата) :::

Fixed ReferenceError: 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 () {

 });

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();
           } 


        });

    });  


});