CSP 合规性 - 由于 JS 内联事件处理程序 (onclick) 而失败
我正在尝试通过取消“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 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”概念）:::
修复了 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 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 () {
});
函数式编程1回答
-
弑天下
终于让它工作如下......function singleConfirm(msg1) { if (confirm(msg1)) { return true; } else { return false; }}// Use class confirmProceed on the php/html formdocument.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(); } }); }); });
随时随地看视频慕课网APP
PHP