前端安全是 Web 开发中至关重要的一环，以下是常见的前端安全问题及对应的防御措施：
1. XSS（跨站脚本攻击）
攻击原理
攻击者向页面注入恶意脚本（如 JavaScript），在用户浏览器中执行，窃取 Cookie、会话信息或篡改页面内容。
类型：
-
存储型 XSS：恶意脚本存储在服务器（如评论区）。
-
反射型 XSS：通过 URL 参数注入脚本。
-
DOM 型 XSS：直接操作 DOM 触发漏洞。
防御措施：
-
输入转义：对用户输入的内容进行转义（如
<→<）。 -
Content Security Policy (CSP)：通过 HTTP 头限制脚本来源，禁止内联脚本和未授权域。
Content-Security-Policy: default-src 'self'; script-src 'self' trusted.com -
使用安全的框架：如 React/Vue 自动转义 HTML，避免直接操作
innerHTML。 -
设置 HttpOnly Cookie：防止 JavaScript 读取敏感 Cookie。
2. CSRF（跨站请求伪造）
攻击原理
诱导用户访问恶意页面，利用已登录的 Cookie 伪造用户身份发起请求（如转账）。
防御措施：
-
CSRF Token：服务端生成随机 Token 并验证（如隐藏表单字段）。
-
SameSite Cookie 属性：设置 Cookie 的
SameSite=Strict或Lax，限制跨域携带。 -
验证 Referer/Origin：检查请求来源是否为合法域名。
-
关键操作二次验证：如短信验证码、密码确认。
3. 点击劫持（Clickjacking）
攻击原理
通过透明 iframe 覆盖在正常页面上，诱导用户点击隐藏按钮（如授权操作）。
防御措施：
-
X-Frame-Options：通过 HTTP 头禁止页面被嵌入 iframe。
X-Frame-Options: DENY -
CSP 的 frame-ancestors 指令：限制页面嵌入的父级来源。
Content-Security-Policy: frame-ancestors 'self'
4. 不安全的第三方依赖
风险
第三方库/插件可能包含漏洞或被篡改（如通过 CDN 加载恶意脚本）。
防御措施：
-
使用可信来源：从官方渠道获取依赖。
-
子资源完整性（SRI）：校验 CDN 资源哈希值。
<script src="https://cdn.example.com/lib.js" integrity="sha384-xxxxx"> </script> -
定期更新依赖：使用
npm audit或工具（如 Snyk）扫描漏洞。
5. 不安全的本地存储
风险
敏感数据（如 Token）存储在 localStorage 或 sessionStorage 中，易被 XSS 窃取。
防御措施：
-
避免存储敏感数据：优先使用
HttpOnly Cookie。 -
加密存储数据：如需本地存储，使用加密算法（如 AES）保护。
6. CORS 配置错误
风险
不当的跨域资源共享（CORS）配置导致数据泄露。
防御措施：
-
严格限制 Origin：仅允许可信域名访问 API。
Access-Control-Allow-Origin: https://your-domain.com -
避免通配符
*：除非必要，否则不开放全部域。
7. 输入验证不足
风险
未对用户输入进行验证，导致 SQL 注入、命令注入等。
防御措施：
-
前后端双重验证：前端做基础校验（如格式、长度），后端做严格校验。
-
使用参数化查询：防止 SQL 注入（后端责任，但需前后端协作）。
防御核心原则
-
最小权限原则：仅授予必要权限（如 API 访问、Cookie 范围）。
-
纵深防御：多层级防护（前端 + 后端 + 基础设施）。
-
保持更新：定期更新依赖和工具链。
-
安全审计：使用自动化工具（如 OWASP ZAP）扫描漏洞。
通过以上措施，可以显著降低前端安全风险。始终记住：前端安全需要与后端、运维协同防护，单一层面的防御不足以应对复杂攻击。
