前端安全攻防——XSS 与 CSRF 攻击原理及防御措施

#1 发表于 2026-03-21 00:58:11

前端安全常被忽视，但 XSS（跨站脚本攻击）和 CSRF（跨站请求伪造）是两大常见威胁。本文剖析原理并给出防御方案。

一、XSS 攻击

原理：攻击者将恶意脚本注入到网页中，当其他用户浏览时，脚本在受害者浏览器中执行，可窃取 Cookie、劫持会话等。

类型

反射型 XSS：恶意脚本通过 URL 参数传入，后端直接拼接返回。
存储型 XSS：脚本存储在数据库，每次访问页面时执行（如评论区）。
DOM 型 XSS：前端通过 innerHTML 等方式不安全地渲染用户输入。

防御措施

输出转义：对用户输入进行 HTML 实体编码（< → <）。
使用安全的 API：避免 innerHTML，改用 textContent 或 innerText。

CSP（内容安全策略）：通过 HTTP 头限制脚本来源。

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

设置 Cookie 的 HttpOnly 属性，防止 JavaScript 读取敏感 Cookie。

二、CSRF 攻击

原理：攻击者诱导用户访问恶意网站，利用用户已登录的身份（携带 Cookie）向目标网站发起非预期的请求（如修改密码、转账）。

防御措施

CSRF Token：后端生成随机 Token 嵌入表单或请求头，每次请求时校验。
SameSite Cookie 属性：设置 SameSite=Lax 或 Strict，限制第三方请求携带 Cookie。
text
```
Set-Cookie: sessionId=xxx; SameSite=Lax; Secure
```
验证 Referer 头：后端校验请求来源是否为可信域名（不完全可靠，但可增加一层防护）。

前端代码示例（CSRF Token 自动携带）

// 使用 axios 全局拦截添加 Token
axios.interceptors.request.use(config => {
  const token = document.querySelector('meta[name="csrf-token"]').content;
  config.headers['X-CSRF-Token'] = token;
  return config;
});

安全开发规范

永远不要信任用户输入，在客户端和服务端双重校验
使用现代框架（React/Vue）默认会转义文本内容，但绑定 v-html 或 dangerouslySetInnerHTML 时需格外小心
定期使用安全扫描工具（如 ESLint 插件、OWASP 依赖检查）

前端安全常被忽视，但 XSS（跨站脚本攻击）和 CSRF（跨站请求伪造）是两大常见威胁。本文剖析原理并给出防御方案。一、XSS 攻击原理：攻击者将恶意脚本注入到网页中，当其他用户浏览时，脚本在受害者浏览器中执行，可窃取 Cookie、劫持会话等。类型反射型 XSS：恶意脚本通过 URL 参数传入，后端直接拼接返回。存储型 XSS：脚本存储在数据库，每次访问页面时执行（如评论区）。DOM 型 XSS：前端通过 innerHTML 等方式不安全地渲染用户输入。防御措施输出转义：对用户输入进行 HTML 实体编码（&lt; → &amp;lt;）。使用安全的 API：避免 innerHTML，改用 textContent 或 innerText。CSP（内容安全策略）：通过 HTTP 头限制脚本来源。textContent-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com设置 Cookie 的 HttpOnly 属性，防止 JavaScript 读取敏感 Cookie。二、CSRF 攻击原理：攻击者诱导用户访问恶意网站，利用用户已登录的身份（携带 Cookie）向目标网站发起非预期的请求（如修改密码、转账）。防御措施CSRF Token：后端生成随机 Token 嵌入表单或请求头，每次请求时校验。SameSite Cookie 属性：设置 SameSite=Lax 或 Strict，限制第三方请求携带 Cookie。textSet-Cookie: sessionId=xxx; SameSite=Lax; Secure验证 Referer 头：后端校验请求来源是否为可信域名（不完全可靠，但可增加一层防护）。前端代码示例（CSRF Token 自动携带）javascript// 使用 axios 全局拦截添加 Token
axios.interceptors.request.use(config =&gt; {
  const token = document.querySelector('meta[name="csrf-token"]').content;
  config.headers['X-CSRF-Token'] = token;
  return config;
});安全开发规范永远不要信任用户输入，在客户端和服务端双重校验使用现代框架（React/Vue）默认会转义文本内容，但绑定 v-html 或 dangerouslySetInnerHTML 时需格外小心定期使用安全扫描工具（如 ESLint 插件、OWASP 依赖检查）