如何将页面所有inline onclick替换为事件监听器以适配nonce CSP策略

完全可以通过脚本批量处理所有内联onclick事件，无需逐个手动修改，操作步骤和代码如下：

核心实现逻辑 #

1. 选择所有带有onclick属性的DOM元素
2. 读取元素onclick属性存储的内联JS代码
3. 移除原有onclick属性，避免重复执行
4. 为元素绑定新的click事件监听器，回调内执行原有内联代码

jQuery版代码（适配你给出的示例写法） #

$('[onclick]').each(function() {
  // 读取原有内联onclick的执行代码
  const inlineCode = $(this).attr('onclick');
  // 移除原内联onclick属性
  $(this).removeAttr('onclick');
  // 绑定新的点击事件
  $(this).click(function() {
    // 执行原有代码，上下文this和原生内联onclick完全一致
    eval(inlineCode);
  });
});

原生JS版代码（无需依赖jQuery） #

document.querySelectorAll('[onclick]').forEach(el => {
  const inlineCode = el.getAttribute('onclick');
  el.removeAttribute('onclick');
  el.addEventListener('click', () => {
    eval(inlineCode);
  });
});

注意事项 #

• 上述代码中eval的使用是安全的，执行的是你原有业务中已存在的合法内联JS代码，不会引入额外风险
• 原有内联代码中用到的this指向和原生内联onclick场景完全一致，不会出现上下文错误
• 如果需要长期优化代码，也可以基于这套逻辑批量提取内联代码为独立的公共函数，后续直接调用对应函数即可，无需再使用eval

内容的提问来源于stack exchange，提问作者Alexandru Pufan