Web 安全

XSS（跨站脚本攻击）

• 攻击者向网页注入恶意脚本，当用户浏览页面时，脚本在用户浏览器执行，窃取数据或发起攻击。
• 如何区分存储型/反射型/DOM 型 XSS？防御方案有哪些？
  • 类型：
    • 存储型：恶意脚本存储到服务器（如评论区内容），所有访问者均受影响。
    • 反射型：恶意脚本通过 URL 参数注入（如钓鱼链接），需用户主动触发。
    • DOM 型：前端直接操作 DOM 导致（如innerHTML），不经过服务端。
  • 防御：
    • 输入过滤 + 输出转义（将<、>转义为<、>）。
    • 避免使用innerHTML，优先用textContent或setAttribute。
    • 启用CSP 内容安全策略（限制脚本来源）。
    • Cookie 设置HttpOnly防止脚本窃取。

CSRF（跨站请求伪造）

• 攻击者诱导用户访问恶意页面，伪造用户在已登录的站点发起非预期操作（如转账）。
• CSRF 攻击流程是什么？如何防御？
  • 流程：用户登录 A 站 → 诱导访问 B 站 → B 站伪造 A 站请求（利用自动携带的 Cookie）。
  • 防御：
    • CSRF Token：服务端生成随机 Token，前端提交时携带并验证。
    • 校验请求头Origin/Referer（禁止跨域请求）。
    • Cookie 设置SameSite=Strict/Lax（限制跨域携带 Cookie）。

点击劫持（Clickjacking）

• 攻击者将目标网站嵌入透明 iframe，诱导用户点击伪装按钮（如虚假关闭弹窗）。
• 如何防止页面被嵌入到 iframe 中攻击？
  • 服务端防御：
    • 设置响应头：X-Frame-Options: DENY（禁止嵌入）或SAMEORIGIN（仅同源）。
    • 使用 CSP 的frame-ancestors指令（如frame-ancestors 'none'）。
  • 前端防御（辅助）：

    if (top !== window) top.location = window.location; // 非可靠，可被绕过

CSP（内容安全策略）

• 通过 HTTP 响应头Content-Security-Policy限制页面资源加载来源，防止 XSS 和数据注入。
• 如何配置 CSP 策略？实际项目中如何平衡安全性与便利性？
  • 配置示例：

    Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline';

  • 关键指令：
    • default-src：默认资源加载规则。
    • script-src/style-src：限制脚本/样式来源（避免'unsafe-inline'）。
    • report-uri：违规行为上报地址。
  • 平衡策略：
    • 开发阶段启用Content-Security-Policy-Report-Only监控问题。
    • 逐步替换内联脚本和样式，避免直接允许'unsafe-inline'。
• CSP 配置需结合业务：例如允许'unsafe-eval'可能降低安全性，需评估必要性。

SQL 注入攻击

• 攻击者通过输入恶意 SQL 代码，篡改数据库查询逻辑，窃取或破坏数据（如绕过登录、删库）。
• 如何防御 SQL 注入？前端能做哪些防护？
  • 防御方案：
    • 参数化查询（预编译语句）：避免拼接 SQL 字符串（如使用PreparedStatement）。
    • ORM 框架：使用 Sequelize、TypeORM 等，自动处理参数转义。
    • 最小权限原则：数据库账号限制为只读/必要操作权限。
  • 前端辅助：
    • 输入合法性校验（如长度、格式），但不可依赖前端（攻击者可直接绕过）。
• SQL 注入防御重点在后端，但前端需辅助校验减少无效请求。

HTTPS 与中间人攻击

HTTPS 如何保证数据安全？前端需要注意什么？

• 原理：SSL/TLS 加密传输 + 证书验证身份
• 前端注意：
  • 使用全站 HTTPS（避免混合内容）
  • 设置 HSTS 响应头：Strict-Transport-Security: max-age=31536000
  • 避免在 URL 中传递敏感参数（可能被日志记录）

CORS 配置风险

如何安全配置跨域资源共享（CORS）？

• 精确设置Access-Control-Allow-Origin（避免*）
• 限制Access-Control-Allow-Methods为必要方法
• 避免暴露敏感头：Access-Control-Expose-Headers
• 预检请求缓存：Access-Control-Max-Age

前端安全审计方案

如何系统化提升项目安全性？

• 流程控制：
  • 代码审核：ESLint 安全规则（如no-eval）
  • 依赖检查：npm audit/Snyk 扫描第三方包
  • CI/CD集成安全测试（如OWASP ZAP）
• 监控：
  • 实时日志分析异常请求
  • 错误监控捕获XSS/CSRF攻击
• 应急：制定漏洞响应机制（如 CSP 紧急更新）

第三方脚本安全管理

如何安全引入 Google Analytics 等第三方 JS？

• 使用Subresource Integrity（SRI 哈希校验）

  <script src="https://example.js" 
    integrity="sha384-xxxx"></script>

• 通过 CSP 限制script-src域名
• 异步加载 + 错误降级处理

JWT 安全存储方案

前端如何安全存储 JWT Token？

• 存储位置：
  • 避免 localStorage（易 XSS 窃取） → 优先存 Cookie+HttpOnly
  • 敏感操作使用短期 Token
• 传输安全：
  • 仅通过 HTTPS 传输
  • 避免 URL 参数传递

前端加密

在前端用 JS 加密密码是否有效？为什么？

• 无效：前端代码透明，加密密钥易泄露（中间人可替换 JS）
• 正确方案：
  • 使用 HTTPS 传输明文
  • 敏感数据加盐哈希（后端处理）

设计一个安全登录流程

1. 输入：限制密码错误次数（防暴力破解）
2. 传输：HTTPS + 验证码（防中间人/机器人）
3. 存储：后端加盐哈希（如 bcrypt）
4. 会话：短期 JWT Token + Refresh Token 轮换
5. 监控：异常登录检测（IP/设备变更）