Vue Academy · 课时

使用 Vue 配置内容安全策略（CSP）

Q: 「使用 Vue 配置内容安全策略（CSP）」这节课中我会学到什么？

CSP 响应头、基于随机数的脚本、基于哈希的策略，以及 Vite CSP 配置 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

CSP 响应头、基于随机数的脚本、基于哈希的策略，以及 Vite CSP 配置

使用 Vue 配置内容安全策略（CSP） 是 CoddyKit 上的免费 Vue Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

什么是 CSP

内容安全策略是一种 HTTP 响应标头，用于告知浏览器哪些脚本、样式、图像和连接来源是允许的。它是防御 XSS 的重要第二道防线——即使注入了脚本，只要其来源不在允许范围内，也会被阻止。

标头

CSP 通过 Content-Security-Policy 响应标头传递。每条指令都会列出某类资源允许使用的来源。

Content-Security-Policy: default-src 'self'; script-src 'self';

限制脚本来源

script-src 指令控制脚本可以从哪里加载。将其限制为 'self'，即可阻止攻击者可能注入的内联脚本和第三方脚本。

Content-Security-Policy: script-src 'self' https://cdn.trusted.com;

避免使用 unsafe-inline

'unsafe-inline' 允许内联脚本和事件处理程序属性——这正是 XSS 所利用的内容。严格的策略会省略它，从而不让注入的内联代码运行。

避免使用 unsafe-eval

'unsafe-eval' 允许使用 eval 和 Function 构造函数。Vue 3 运行时版本不需要它（模板会预先编译），因此可以并且应该将其省略。

基于随机数的内联脚本

确实需要内联脚本时，请为它生成一个每次响应都不同的随机 nonce，并将该随机数列入策略。只有携带匹配随机数的脚本才能执行。

<!-- header includes: script-src 'nonce-abc123' -->
<script nonce="abc123">
  // allowed because nonce matches
</script>

为什么随机数优于 unsafe-inline

随机数不可预测，并且每次响应都会改变，因此攻击者注入脚本后无法猜出它。这样既能让内联脚本正常工作，又避免了 unsafe-inline 带来的整体风险。

CSP 与 Vue 样式

Vue 和许多用户界面库会在运行时注入样式。您可以通过带随机数或哈希值的 style-src 来允许这些样式，或者将 CSS 提取到文件中，这样 style-src 'self' 就足够了。

Content-Security-Policy: style-src 'self';

用于开发环境的 Vite CSP 随机数插件

Vite 的开发服务器会注入脚本，这可能与严格的 CSP 发生冲突。CSP 随机数插件会在开发期间为 Vite 注入的标签加上匹配的随机数。

// vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  html: {
    cspNonce: "DEV_NONCE"
  }
});

用于接口的 connect-src

使用 connect-src 限制应用可以发起请求的位置，这样注入的代码就无法将数据泄露到攻击者控制的域名。

Content-Security-Policy: connect-src 'self' https://api.example.com;

仅报告模式

可以使用 Content-Security-Policy-Report-Only 安全地逐步启用 CSP。它只报告违规行为而不会进行阻止，让您可以在正式强制执行前调整策略。

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report;

快速检查

为了保持 XSS 防护的强度，应避免使用哪个 CSP 指令值？

回顾

CSP 是一种限制脚本、样式和连接来源的 HTTP 标头，即使 XSS 攻击成功注入代码，也能将其阻止。请避免使用 unsafe-inline 和 unsafe-eval；必须使用内联脚本时，为每次响应使用不同的随机数，并在开发环境中使用 Vite CSP 随机数插件。正式强制执行前，请先以仅报告模式逐步启用。

常见问题解答

「使用 Vue 配置内容安全策略（CSP）」课时是免费的吗？

是的 — 「使用 Vue 配置内容安全策略（CSP）」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「使用 Vue 配置内容安全策略（CSP）」这节课中我会学到什么？

CSP 响应头、基于随机数的脚本、基于哈希的策略，以及 Vite CSP 配置你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「使用 Vue 配置内容安全策略（CSP）」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

Vue 中的 XSS 防护
使用 Vue 配置内容安全策略（CSP）
Vue SPA 中的 CSRF 防护
安全认证模式

← 返回 Vue Academy