常见前端安全问题及解决方案

一、跨站脚本攻击（XSS）

问题描述‌
XSS攻击通过向网页注入恶意脚本（如 JavaScript），在用户浏览器中执行，窃取Cookie、会话Token 或其他敏感信息‌。
持久型XSS‌：恶意代码被存储到服务器数据库（如评论区），长期影响用户‌。
非持久型XSS‌：通过URL 参数或表单输入直接触发，攻击范围有限‌。
解决方案‌
对用户输入内容进行转义和过滤，禁止 <script> 等危险标签的解析‌。
使用 HttpOnly 属性限制 JavaScript 读取 Cookie，防止会话劫持‌。
部署内容安全策略（CSP）‌，限制外部脚本加载来源，仅允许可信域名资源‌。

二、跨站请求伪造（CSRF）

问题描述‌
攻击者诱导用户访问恶意页面，伪造用户身份向目标网站发送请求（如转账、修改密码）‌。
解决方案‌
服务端生成并验证 ‌Token‌，确保请求来源合法性‌。
敏感操作使用 POST 请求而非 GET，降低 URL 参数泄露风险‌。
校验 Referer 头字段，拦截跨域非法请求‌。

三、点击劫持（Clickjacking）

问题描述‌
通过透明 iframe 覆盖页面按钮，诱导用户点击触发非预期操作（如关注、转账）‌。
解决方案‌
设置 HTTP 响应头 X-Frame-Options 为 DENY 或 SAMEORIGIN，禁止页面被嵌套‌。
使用 JavaScript 检测页面是否被嵌入 iframe，强制跳转至主页面‌。

四、中间人攻击（MITM）

问题描述‌
攻击者劫持用户与服务端通信，窃取或篡改传输数据（如登录凭证、支付信息）‌。
解决方案‌
强制使用 HTTPS 加密通信，避免明文传输敏感数据‌。
客户端严格校验服务器证书合法性（如域名、有效期、颁发机构）‌。
公共 Wi-Fi 环境下使用 ‌VPN‌ 建立加密隧道，隔离不安全网络‌。

五、本地存储数据泄露

问题描述‌
localStorage、sessionStorage 或 Cookie 中存储的敏感信息可能被恶意脚本窃取‌。
解决方案‌
避免在客户端存储密码、密钥等高敏感数据‌。
定期清理过期数据，限制存储生命周期‌。

六、其他安全隐患

CSP 配置不足‌
未限制外部资源加载可能导致恶意脚本注入，需通过 Content-Security-Policy 头定义白名单‌。
第三方库漏洞‌
依赖的第三方库（如 jQuery 插件）若存在漏洞，可能成为攻击入口，需定期更新至安全版本‌。

总结

前端安全需关注输入输出过滤‌、‌通信加密‌、‌权限控制‌ 三大核心，结合技术手段（如 CSP、Token 验证）与规范管理（如依赖更新、漏洞监测），形成纵深防御体系‌。