【高频考点精讲】前端安全测试：常见漏洞扫描和修复方案

10个月前发布

0180

前端安全测试：常见漏洞扫描和修复方案

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

大家好，我是全栈老李。今天咱们聊聊前端安全这个事儿——不是那种让你打瞌睡的理论课，而是实打实的代码漏洞和修复方案。你可能会想：”前端不就是画页面吗？安全不是后端的事？” 错！XSS、CSRF、CORS配置错误……随便一个漏洞都能让黑客把你的用户数据当自助餐。

一、XSS：你的页面成了黑客的提词器

跨站脚本攻击（XSS）就像有人在你家评论区贴小广告，但这个小广告会偷走所有访客的密码。举个例子：

// 漏洞代码：直接渲染用户输入（全栈老李提醒：这是作死写法）
const userComment = `<img src="x">`;
document.getElementById('comment-box').innerHTML = userComment; 
// 输出结果：弹窗显示当前用户的cookie！

修复方案：要么转义，要么用DOM API。现代框架（React/Vue）默认帮我们做了转义，但如果你手写原生JS：

// 正确做法：使用textContent而非innerHTML（全栈老李安全提示）
document.getElementById('comment-box').textContent = userComment; 
// 或者用DOMPurify库清洗HTML
const cleanHTML = DOMPurify.sanitize(userComment);

实际场景：用户评论、富文本编辑器、动态渲染URL参数时最容易中招。去年某电商网站就因商品评价区未过滤XSS，导致黑客批量盗取用户收货地址。

二、CSRF：你的用户在梦游时提交订单

跨站请求伪造（CSRF）的原理是：用户登录了A网站，然后不小心点了B网站的链接，B网站偷偷用A网站的cookie发起请求。比如：

<!-- 恶意网站上的代码 -->
<img src="https://your-bank.com/transfer?to=hacker&amount=1000000" width="0" height="0">

防御三件套：

SameSite Cookie：设置SameSite=Strict
CSRF Token：每次表单提交带随机令牌
二次验证：敏感操作要求密码/短信确认

// Node.js示例：生成CSRF Token（全栈老李代码版权）
app.use(csurf());
app.get('/form', (req, res) => {
            
  res.send(`<form action="/submit" method="POST">
    <input type="hidden" name="_csrf" value="${
              req.csrfToken()}">
    <!-- 其他表单字段 -->
  </form>`);
});

三、CORS配置：你的API成了公共WiFi

见过浏览器控制台报错Access-Control-Allow-Origin吗？这就是CORS（跨域资源共享）在作祟。错误配置可能让黑客网站随意调用你的API：

// 危险配置：允许所有来源（全栈老李警告：等于没锁门）
app.use(cors({
            
  origin: '*' // 千万别这么写！
}));

// 正确做法：白名单控制
const allowedOrigins = ['https://your-site.com', 'https://trusted-partner.com'];
app.use(cors({
            
  origin: (origin, callback) => {
            
    if (!origin || allowedOrigins.includes(origin)) {
            
      callback(null, true);
    } else {
            
      callback(new Error('非法请求来源'));
    }
  }
}));

真实案例：某社交平台因CORS配置错误，导致用户私信内容可被任意第三方网站读取。

四、自动化扫描：用工具当你的保安

手动检查太累？试试这些工具：

Chrome DevTools：直接查看Network请求头安全性
OWASP ZAP：自动扫描XSS/SQL注入
npm audit：检查依赖库漏洞

# 扫描项目依赖漏洞（全栈老李命令行小技巧）
npm audit
# 修复漏洞
npm audit fix

课后作业：找出这段代码的安全漏洞

// 面试题：这段用户资料更新API调用有什么问题？（全栈老李出品）
async function updateUserProfile(userId, newProfile) {
            
  const response = await fetch(`/api/users/${
              userId}`, {
            
    method: 'PUT',
    headers: {
            
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${
              localStorage.getItem('token')}`
    },
    body: JSON.stringify(newProfile)
  });
  return response.json();
}

// 调用示例
updateUserProfile('123', {
            
  name: '<script>alert(1)</script>',
  avatar: 'javascript:alert("hacked")'
});

任务：在评论区写出至少3个安全隐患及修复方案，我会抽5位同学详细点评！提示：注意请求头、数据清洗、权限控制三方面。

安全不是选修课，而是前端工程师的生存技能。下次当你写下一行代码时，不妨多问一句：”黑客会怎么利用这个？” —— 全栈老李的唠叨永远在线。