Skip to main content

前端安全要点

一、核心安全漏洞与防御（必考点）​

1. XSS（跨站脚本攻击）​

考点1：XSS的三种类型及原理​
  • 反射型XSS：恶意代码嵌入URL或表单，服务器直接返回给用户（如搜索框攻击）。
  • 存储型XSS：恶意代码存入数据库，长期危害（如评论区注入）。
  • DOM型XSS：通过修改DOM结构执行恶意脚本（如location.hash未过滤）。
考点2：防御措施（重点）​
  • 输入转义：使用框架自带转义（如React的JSX自动转义、Vue的{{ }}），或手动用DOMPurify库清理HTML。
  • CSP（内容安全策略）：通过HTTP头或meta标签限制可执行脚本来源，例如： 
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://cdn.example.com">
  • HTTPOnly Cookie：禁止JS访问Cookie，防止XSS窃取会话信息。
  • 避免使用危险API：如eval()、document.write()、innerHTML（必须用时需严格过滤）。

2. CSRF（跨站请求伪造）​

考点1：攻击原理​

利用用户已登录的会话，伪造请求（如自动提交表单），让服务器执行非预期操作（转账、修改密码等）。

考点2：防御措施​
  • 同源检查：通过Origin或Referer头验证请求来源（需后端配合）。
  • CSRF Token：前端从Session或响应头获取Token，随请求发送（如React中用axios拦截器自动携带）。
  • SameSite Cookie：设置Cookie: SameSite=Strict/Lax，禁止跨站请求携带Cookie。

3. 点击劫持（UI覆盖攻击）​

考点：防御措施​
  • X-Frame-Options头：禁止页面被嵌入iframe，例如： 
    X-Frame-Options: DENY/SAMEORIGIN
  • CSP的frame-ancestors：更灵活的iframe嵌入控制（替代X-Frame-Options）。

二、HTTP安全头与安全策略（进阶考点）​

1. CSP（内容安全策略）​

  • 核心指令：
    • script-src：限制脚本来源（如'self'仅允许同源）。
    • style-src：限制样式表来源（防止恶意CSS注入）。
    • img-src：限制图片来源（防御恶意图片加载）。
  • 实战配置：结合nonce或hash实现动态脚本信任（避免unsafe-eval）。

2. 其他关键HTTP头​

  • X-XSS-Protection：启用浏览器XSS过滤（如1; mode=block阻止恶意页面渲染）。
  • Strict-Transport-Security（HSTS）：强制使用HTTPS，防止HTTP劫持。
  • Content-Type-Options：防止MIME类型混淆（X-Content-Type-Options: nosniff）。

三、跨域安全与数据泄露（高频考点）​

1. 跨域资源泄露风险​

  • JSONP的安全隐患：仅支持GET请求，且回调函数易被劫持（建议用CORS替代）。
  • CORS配置不当：如Access-Control-Allow-Origin: *未配合Allow-Credentials: false，可能导致Cookie泄露。

2. 防御措施​

  • CORS严格配置：限定允许的域名、方法、头字段（后端需配合）。
  • Samesite Cookie + HTTPS：防止跨域请求携带敏感Cookie。

四、前端框架安全特性（框架相关考点）​

1. React安全机制​

  • JSX自动转义：默认转义HTML特殊字符，防止XSS（如<script>会被转成&lt;script&gt;）。
  • 严格模式（StrictMode）：检测不安全的生命周期方法或废弃API。
  • dangerouslySetInnerHTML：需显式声明，避免滥用（仅在信任内容时使用）。

2. Vue安全机制​

  • 模板引擎转义：{{ }}默认转义，v-html需谨慎使用（仅用于可信HTML）。
  • Vue Router的安全参数：避免在URL中暴露敏感信息（如用params替代query）。

3. 通用框架安全实践​

  • 避免动态创建DOM：如document.createElement('script')易被注入。
  • 第三方库安全：定期检查依赖（如用npm audit或Snyk扫描漏洞）。

五、其他前端安全要点（拓展考点）​

1. 敏感信息保护​

  • 禁止前端存储敏感数据：如密码、token等（可用localStorage存加密后的数据，但需配合后端解密）。
  • HTTPS强制加密：避免明文传输（通过HSTS或Nginx配置）。

2. 安全测试与工具​

  • 自动化检测：用ESLint插件（如eslint-plugin-security）检测代码隐患。
  • 渗透测试：使用Burp Suite模拟XSS、CSRF攻击，验证防御有效性。

3. 密码安全​

  • 前端密码强度校验：正则匹配大小写、数字、特殊字符（但最终需后端验证）。
  • 避免明文传输：前端可先用SHA-256加盐哈希（但不能替代HTTPS）。

六、面试高频问题示例​

  1. “XSS和CSRF的区别是什么？如何防御？”
    答：XSS是代码注入攻击，CSRF是请求伪造；防御上XSS需转义+CSP，CSRF需Token+SameSite Cookie。

  2. “CSP如何配置？为什么推荐用nonce而非unsafe-eval？”
    答：通过script-src 'nonce-xxx'为合法脚本添加随机数，unsafe-eval允许动态执行脚本，存在安全隐患。

  3. “React/Vue中如何防止XSS？”
    答：React用JSX转义，避免dangerouslySetInnerHTML；Vue避免滥用v-html，对用户输入用v-model双向绑定（默认转义）。

  4. “前端如何配合后端做好CSRF防护？”
    答：从响应头获取Token（如X-CSRF-Token），通过请求头X-XSRF-TOKEN携带，或在表单中隐藏域存储。

七、实战建议与最佳实践​

  • 多层防御理念：前端转义+后端验证+HTTP头防护结合，避免单一依赖。
  • 关注安全漏洞公告：如NPM包漏洞（定期用npm outdated更新依赖）。
  • 代码审查规范：禁止使用eval()、动态创建脚本标签，严格限制innerHTML的使用场景。

通过以上要点，既能覆盖面试中的基础问题，也能展现对前端安全的深度理解。建议结合具体项目经验（如“曾在项目中通过CSP禁止加载非授信脚本，降低XSS风险”），让回答更具说服力。