前端安全中的XSS（跨站脚本攻击）

XSS 类型

1. 存储型 XSS

   • 特征：恶意脚本存储在服务器（如数据库），用户访问受感染页面时触发。
   • 场景：用户评论、论坛帖子等持久化内容。
   • 影响范围：所有访问该页面的用户。

2. 反射型 XSS

   • 特征：恶意脚本通过URL参数传递，服务器返回包含脚本的响应，用户点击恶意链接后触发。
   • 场景：搜索框、错误消息等动态返回用户输入的场景。
   • 传播方式：钓鱼链接、社交工程。

3. DOM 型 XSS

   • 特征：完全在客户端执行，通过修改DOM触发，无需与服务器交互。
   • 场景：前端从URL参数或本地存储读取数据并动态更新页面。
   • 检测难点：传统服务端防御无法捕获。

---

防御措施

---

示例代码

安全输出到HTML

// 不安全：直接插入未转义内容
element.innerHTML = userInput;

// 安全：使用textContent或转义函数
element.textContent = userInput;
// 或使用转义库（如Lodash的_.escape）
element.innerHTML = _.escape(userInput);

CSP配置

Content-Security-Policy: default-src 'self'; script-src 'self' https://apis.example.com; object-src 'none';

---

总结

XSS防御需多层面结合：

• 转义：根据输出位置选择合适方法。
• 验证：前后端双重检查输入合法性。
• 策略：通过CSP限制资源加载。
• 框架：利用现代框架的安全特性。
• 意识：避免高危API，遵循安全最佳实践。

通过综合应用这些措施，可显著降低XSS风险，保护用户数据和前端应用的安全性。