CSP 的 script-src 为啥会阻止我内联的 Vue 事件处理？

程序猿一莹提问于 2026-03-21 10:36:21 阅读 43

安全

我在项目里加了 Content Security Policy，结果页面上所有 @click 之类的内联事件都不执行了，控制台报错说被 script-src 阻止。可我明明没写 <script> 标签啊？

试过加上 ‘unsafe-inline’ 能跑，但听说这不安全。有没有办法在不降低安全性的前提下让 Vue 的事件正常工作？

<template>
  <button @click="handleClick">点我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('clicked!');
    }
  }
}
</script>

我来解答赞 6 收藏

反馈

1 条解答

博主国凤 Lv1

CSP 的 script-src 默认情况下会阻止内联脚本执行，包括 Vue 的内联事件处理器。即使你没显式写

不过这样可能还会有 CSP 报错，因为 Vue 在背后生成了一些内联事件处理器。更彻底的解决办法是使用 nonce 或者 hash。不过在 WP 里面配置这些相对麻烦一些。

一个简单的中间方案是，如果你确定网站其他地方没有 XSS 风险，可以在 CSP 里临时放宽对 script-src 的限制，比如添加 'unsafe-hashes' 并指定允许的哈希值，或者用 'unsafe-inline' 作为最后的手段。但注意这样做确实降低了安全性，得权衡利弊。

如果你希望保持高安全标准，那还是得花时间研究 nonce 和 hash 的实现。挺头疼的，不过也值得学习一下。

2026-03-21 11:00