网络安全：（十二）基于 CSP 的前端内容安全策略：减少 XSS 风险

网络安全：（十二）基于 CSP 的前端内容安全策略：减少 XSS 风险

跨站脚本攻击（XSS）是前端开发中常见的安全漏洞之一，它允许攻击者在受害者的浏览器中执行恶意代码，从而窃取用户数据或劫持用户会话。内容安全策略（CSP, Content Security Policy）是一种浏览器机制，能帮助开发者有效地减少 XSS 的风险。本文将详细讲解如何在前端项目中基于 CSP 实现内容安全策略，确保应用的安全性。

---

目录

1. 什么是 CSP？
2. CSP 的工作原理
3. XSS 攻击的类型与危害
4. 配置 CSP 减少 XSS 风险
   • 4.1 启用基础 CSP 策略
   • 4.2 限制外部资源加载
   • 4.3 使用 nonce 和 hash 控制内联脚本
5. Vue 项目中配置 CSP 的实践
6. 常见 CSP 配置示例
7. 总结

---

1. 什么是 CSP？

CSP 是一种 web 安全策略，旨在帮助开发者防止 XSS 攻击及其他代码注入的威胁。它通过定义网页允许加载的内容类型、源站点、请求方式等策略，来限制页面中哪些资源可以被加载、哪些脚本可以执行。通过 CSP 可以将未经授权的内容阻止，从而保护用户数据。

---

2. CSP 的工作原理

CSP 的工作原理是将一份策略指令发送到浏览器，指令由服务器通过 HTTP 响应头或 HTML meta 标签设置。浏览器在加载页面时，会按照指定的策略检查和限制资源的加载与执行。如果不符合策略，浏览器将拒绝加载相关资源，从而有效阻止可能的攻击。

---

3. XSS 攻击的类型与危害

常见 XSS 类型：

• 存储型 XSS：攻击者将恶意脚本存储在服务器上，其他用户访问页面时恶意脚本会被执行。
• 反射型 XSS：攻击者将恶意代码嵌入请求链接中，用户点击链接后浏览器会执行该代码。
• DOM-based XSS：攻击者修改网页中的 DOM 结构，使得前端直接执行恶意脚本。

XSS 的危害：

XSS 可以窃取用户的 Cookie、会话信息，甚至利用恶意代码劫持用户浏览器控制。对于用户和应用数据安全，防范 XSS 是极其重要的。

---

4. 配置 CSP 减少 XSS 风险

4.1 启用基础 CSP 策略

启用 CSP 策略需要添加一个 Content-Security-Policy 响应头，或在页面的 <meta> 标签中添加 CSP 规则。一般的基础策略如下：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self';">

此策略规定：

• default-src 'self'：所有资源默认只能来自同源。
• script-src 'self'：JavaScript 脚本只能来自同源。
• style-src 'self'：CSS 样式只能来自同源。
• img-src 'self'：图片只能来自同源。

4.2 限制外部资源加载

有些情况下我们可能需要加载外部资源（如 CDN），可以在 CSP 中为特定资源指定允许的来源。

示例：允许加载指定的外部源

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src