浅析Web前端安全：xss跨站脚本攻击、CSRF跨站请求伪造、点击劫持Clickjacking通俗讲解如何产生以及如何预防

一、XSS（跨站脚本攻击）

1、是什么？

　　攻击者把恶意脚本"注入"到你的网页，让别的用户执行。

　　类比：你开了一家留言板餐厅，有人在留言本上写了一段"暗语"，每个来看留言的客人都会被这段暗语控制，把自己的钱包交给攻击者。

2、攻击场景

用户输入: <script>document.cookie // 发给黑客服务器</script>
网页直接渲染 → 其他用户访问时脚本执行 → Cookie 被盗

3、三种类型

类型	特点
存储型	脚本存入数据库，每次访问都触发（最危险）
反射型	脚本藏在 URL 参数里，诱导用户点击
DOM 型	通过修改 DOM 结构执行，不经过服务器

4、如何预防

// ❌ 危险：直接插入 HTML
element.innerHTML = userInput

// ✅ 安全：使用文本节点
element.textContent = userInput
// ✅ 转义特殊字符
function escapeHtml(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
}

# 设置 CSP 响应头，限制脚本来源
Content-Security-Policy: default-src 'self'; script-src 'self'

# Cookie 防盗
Set-Cookie: token=xxx; HttpOnly; Secure; SameSite=Strict

二、CSRF（跨站请求伪造）

1、是什么？

　　攻击者借用你已登录的身份，在你不知情的情况下发起请求。

　　类比：你已经登录了银行网站，攻击者发给你一个钓鱼链接，你一点击，背后偷偷发了一个"转账"请求——银行认为是你本人操作的。

2、攻击场景

<!-- 攻击者的恶意网页 -->
<img src="https://bank.com/transfer?to=hacker&amount=10000" />
<!-- 你一打开这页面，图片加载 = 发了转账请求 = 完了 -->

　　浏览器会自动带上你的 Cookie，银行以为是你操作的。

3、如何预防

// ✅ 方案1：CSRF Token（最主流）
// 服务器生成随机 token，每次请求必须携带
axios.defaults.headers.common['X-CSRF-Token'] = getCsrfToken()

// ✅ 方案2：检查 Referer/Origin 头
// 服务端验证请求来源是否是自己的域名

// ✅ 方案3：SameSite Cookie
Set-Cookie: session=xxx; SameSite=Strict
// Strict = 跨站请求完全不带 Cookie
// Lax   = 只有 GET 导航请求才带（推荐默认值）

4、CSRF vs XSS 区别：

• XSS = 攻击者在你的网站里执行代码

• CSRF = 攻击者借你的身份发请求

三、点击劫持（Clickjacking）

1、是什么？

　　把目标网站用透明 iframe 覆盖在诱人按钮上，让你以为在点 A 实际点了 B。类比：游戏页面上有个"领取奖励"按钮，但上面叠了一个看不见的 iframe，实际点击的是银行的"确认转账"按钮。

2、攻击场景

<!-- 攻击者页面 -->
<style>
  iframe {
    opacity: 0;          /* 透明！你看不见 */
    position: absolute;
    top: 0; left: 0;
    z-index: 999;
  }
</style>
<button>点我领奖励！</button>
<iframe src="https://bank.com/confirm-transfer"></iframe>

3、如何预防

# ✅ 最有效：设置响应头，禁止被 iframe 嵌套
X-Frame-Options: DENY          # 完全禁止嵌套
X-Frame-Options: SAMEORIGIN    # 只允许同域嵌套

# 现代方式（CSP）
Content-Security-Policy: frame-ancestors 'none'

// ✅ JS 兜底方案（老浏览器）
if (window.top !== window.self) {
  window.top.location = window.self.location
}

四、总结对比

攻击类型	本质	核心防御手段
XSS	注入恶意脚本执行	转义输出 + CSP + HttpOnly Cookie 防盗
CSRF	借用已登录身份发请求	CSRF Token + SameSite Cookie
点击劫持	透明 iframe 诱导误点	X-Frame-Options / CSP frame-ancestors