前端安全面试题

XSS 攻击

什么是 XSS 攻击？

XSS (Cross-Site Scripting) 跨站脚本攻击，攻击者通过在网页中注入恶意脚本，在用户浏览网页时执行。

类型：

  1. 存储型 XSS：恶意脚本存储在服务器
  2. 反射型 XSS：恶意脚本在 URL 参数中
  3. DOM 型 XSS：恶意脚本在客户端执行

如何防护 XSS 攻击？

防护措施：

  1. 输入验证和过滤：过滤危险字符
  2. 输出编码：HTML 编码、属性编码
  3. 使用安全的 API：textContent 而非 innerHTML
  4. Content Security Policy (CSP)：限制脚本执行
  5. HttpOnly Cookie：防止 Cookie 被窃取

CSP 是什么？如何配置？

CSP (Content Security Policy) 内容安全策略，限制页面可以加载的资源。

配置：

Content-Security-Policy: default-src 'self'; script-src 'self'

指令：

  • default-src：默认策略
  • script-src：脚本来源
  • style-src：样式来源
  • img-src：图片来源

CSRF 攻击

什么是 CSRF 攻击？

CSRF (Cross-Site Request Forgery) 跨站请求伪造，攻击者诱导用户访问恶意网站，在用户不知情的情况下执行操作。

攻击流程：

  1. 用户登录正常网站
  2. 网站设置 Cookie
  3. 用户访问恶意网站
  4. 恶意网站发起对正常网站的请求
  5. 浏览器自动携带 Cookie
  6. 正常网站认为请求来自用户

如何防护 CSRF 攻击？

防护措施：

  1. CSRF Token：服务器生成随机 Token，请求时验证
  2. SameSite Cookie：禁止跨站携带 Cookie
  3. 验证 Referer/Origin：检查请求来源
  4. 自定义请求头：利用同源策略限制

CSRF Token 的工作原理？

流程：

  1. 服务器生成随机 Token
  2. 存储在 Session 或 Cookie
  3. 返回给客户端（表单或 Meta 标签）
  4. 客户端请求时携带 Token
  5. 服务器验证 Token 是否匹配

双重 Cookie：

  • Cookie 中存储 Token
  • 请求头中发送 Token
  • 服务端比较两者是否一致

其他安全问题

什么是点击劫持？

点击劫持 (Clickjacking)：攻击者通过 iframe 覆盖页面，诱导用户点击。

防护：

X-Frame-Options: DENY
# 或
X-Frame-Options: SAMEORIGIN

什么是 SQL 注入？

SQL 注入：攻击者通过输入恶意 SQL 代码，执行数据库操作。

防护：

  • 使用参数化查询
  • 输入验证
  • 最小权限原则

前端如何防止敏感信息泄露？

措施：

  1. 不在前端存储敏感信息
  2. 使用 HTTPS
  3. 设置 HttpOnly Cookie
  4. 避免在 URL 中传递敏感信息
  5. 使用环境变量存储配置

如何安全地处理用户输入？

方法：

  1. 输入验证：检查格式、长度
  2. 输入过滤：移除危险字符
  3. 输出编码：HTML 编码、URL 编码
  4. 使用安全库：DOMPurify、xss
// ✅ 安全：使用 textContent
element.textContent = userInput;

// ❌ 危险：使用 innerHTML
element.innerHTML = userInput;

前端加密的作用和限制？

作用：

  • 保护传输数据
  • 防止中间人攻击

限制：

  • 前端加密可被破解
  • 密钥暴露在前端
  • 主要用于传输加密，非存储加密

最佳实践：

  • 使用 HTTPS
  • 敏感操作服务端加密
  • 不在前端存储密钥

安全最佳实践

前端安全开发规范？

规范：

  1. 所有用户输入必须验证
  2. 输出必须编码
  3. 使用 HTTPS
  4. 设置安全响应头
  5. 定期更新依赖
  6. 代码安全审查

常见的安全响应头有哪些？

响应头：

Content-Security-Policy: default-src 'self'
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Strict-Transport-Security: max-age=31536000
X-XSS-Protection: 1; mode=block

如何检测安全漏洞？

方法：

  1. 代码审查：检查安全编码
  2. 安全测试：XSS、CSRF 测试
  3. 漏洞扫描：使用工具扫描
  4. 渗透测试：专业安全测试

工具：

  • OWASP ZAP
  • Burp Suite
  • ESLint 安全插件
最近更新：:
Contributors: liyulai