前端安全中的XSS（跨站脚本攻击）
XSS 类型
-
存储型 XSS
- 特征：恶意脚本存储在服务器（如数据库），用户访问受感染页面时触发。
- 场景：用户评论、论坛帖子等持久化内容。
- 影响范围：所有访问该页面的用户。
-
反射型 XSS
- 特征：恶意脚本通过URL参数传递，服务器返回包含脚本的响应，用户点击恶意链接后触发。
- 场景：搜索框、错误消息等动态返回用户输入的场景。
- 传播方式：钓鱼链接、社交工程。
-
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风险，保护用户数据和前端应用的安全性。