为何简单<button>标签会触发CSP违规？

太懂这种排查几小时的崩溃感了！这个问题确实挺反直觉的——明明功能类似的两个按钮，居然在CSP下表现完全不同。

核心原因推测：<button>的默认行为触发了意外的资源加载 #

最可能的情况是你的<button>标签没有显式指定type属性，浏览器会默认把它识别为type="submit"。如果这个按钮嵌套在<form>标签里，点击时会触发表单的默认提交行为：

• 浏览器会尝试向表单的action地址发起请求（如果action为空就会重新加载当前页面）
• 页面重新加载时，原本带有合法nonce的脚本可能因为页面刷新后nonce值变化，或者某些动态加载的脚本没正确携带nonce，从而触发CSP拦截

而<input type="button">本身没有默认的提交行为，点击时只会执行你绑定的自定义逻辑，不会触发页面刷新或额外请求，自然就避开了这个问题。

验证与解决方案 #

1. 给<button>显式指定type属性 #

直接给按钮加上type="button"，让它和<input type="button">保持一致的行为：

<button type="button">点击我</button>

这一步就能直接避免默认的表单提交行为，也就不会触发后续违反CSP的资源加载。

2. 检查CSP规则的优先级 #

你的CSP规则里同时包含'unsafe-inline'和'nonce-...'，根据CSP规范，当存在nonce或hash时，'unsafe-inline'会被直接忽略。如果你的页面里有内联脚本（比如内联onclick事件），必须确保这些脚本携带了正确的nonce属性，否则会被拦截。
比如正确的内联脚本写法应该是：

<script nonce="EDNnf0...">
  // 你的脚本内容
</script>

更推荐的做法是用外部脚本绑定事件，彻底避免内联脚本带来的CSP风险。

3. 排查表单相关逻辑 #

如果按钮确实需要触发表单提交，检查表单的action地址是否属于script-src允许的'self'范围，同时确保提交后返回的页面里的脚本都正确使用了新的nonce值（因为nonce应该是每次请求唯一的）。

总结 #

这个问题的核心就是<button>的默认submit行为触发了额外的页面请求/刷新，进而导致不符合CSP规则的脚本加载。通过显式指定type="button"就能快速解决，同时也建议尽量减少'unsafe-inline'和'unsafe-eval'的依赖，优先用nonce或hash来保证CSP的安全性。

内容的提问来源于stack exchange，提问作者João Pimentel Ferreira