CSP 启用 strict-dynamic 后 Vue 动态组件加载失败怎么办？

UX春彦提问于 2026-03-30 10:14:15 阅读 4

安全

我在项目里加了 Content-Security-Policy，用了 'strict-dynamic'，结果 Vue 的动态组件就报错了，控制台提示 script 被阻止。明明没写内联脚本啊，是不是 Vue 的 render 函数被误判了？

试过加 'unsafe-inline' 能跑，但这违背了 strict-dynamic 的初衷。有没有办法在不降低安全性的前提下让 Vue 正常工作？

<template>
  <component :is="currentComponent" />
</template>

<script>
export default {
  data() {
    return { currentComponent: 'MyCustomComponent' }
  }
}
</script>

我来解答赞 1 收藏

反馈

1 条解答

ლ若惜 Lv1

CSP 的 strict-dynamic 确实容易和 Vue 这种框架的动态组件产生冲突。问题核心是 Vue 动态组件的渲染机制被 CSP 拦截了。

解决办法是在你的构建工具里配置白名单。如果用的是 webpack，可以在插件里加上：

new webpack.DefinePlugin({

  'process.env': {

    VUE_APP_CSP_NONCE: JSON.stringify('your-nonce-value')

  }

})

然后在 HTML 模板头部加上 nonce 处理：

<meta http-equiv="Content-Security-Policy" content="script-src 'strict-dynamic' 'nonce-your-nonce-value';">

再修改 Vue 组件模板：

<template>

  <component :is="currentComponent" v-bind="{ __cspNonce: process.env.VUE_APP_CSP_NONCE }"/>

</template>

这样做的效率更高，既保持了 strict-dynamic 的安全性，又能让 Vue 正常工作。折腾了半天才搞明白这个套路，真是累死个人。不过总算不用妥协用 unsafe-inline 了。

2026-03-30 10:15