前端安全 常见的攻击类型及防御措施

1. 跨站脚本攻击（XSS）

• 描述：跨站脚本（XSS：Cross-Site Scripting）是一种安全漏洞，允许攻击者向网站注入恶意客户端代码。该代码由受害者执行从而让攻击者绕过访问控制并冒充用户。
• XSS攻击可以分为三类：存储（持久）、反射（非持久）或基于DOM。
  • 存储型XSS攻击
    • 注入的恶意脚本永久存储在目标服务器上。当用户访问时，代码被加载并执行。
    • 举例：比如在留言板中添加恶意代码，如果服务器没有防范，将会永久保存恶意代码，当有人浏览到这段留言时，就会被执行。
  • 反射型XSS攻击
    • 当用户被诱骗点击恶意链接、提交特制表单或浏览恶意网站时，服务器未经过滤，会将恶意脚本反射回用户浏览器执行。
    • 举例：比如某些网站的搜索功能，会附带一些参数，而如果服务器未经过滤直接返回恶意链接，那么浏览器也会在读取参数时执行恶意代码。
  • 基于DOM的XSS攻击
    • DOM型XSS攻击发生在客户端，攻击者操纵页面中JavaScript的运行逻辑，动态修改DOM结构。
    • 举例：比如网站代码中有读取url的hash的功能，而恶意URL通过设置hash部分来注入恶意代码。
• 防范措施：
  • 输入校验：对用户输入内容进行严格校验，拒绝危险字符。
  • 输出编码：对动态生成的HTML内容进行转义，防止插入恶意代码（如特殊字符）。
  • 内容安全策略（CSP）：通过设置Content-Security-Policy响应头，限制允许加载的脚本来源。
  • 避免使用innerHTML：尽量使用安全的DOM操作办法（如textContent或appendChild）。

2. 跨站请求伪造（CSRF）

• 描述：攻击者让用户的浏览器在用户不知情的境况下向网站的后端发送请求。比如利用已登录的身份发送恶意请求（转账或修改密码）。
• 防范措施：
  • CSRF Token：在表单或请求中加入随机生成的Token，后端验证Token的有效性。
  • 验证来源：通过Referer或Origin头验证请求来源。
  • 使用SameSite Cookie：将Cookie设置成SameSite=Strict或SameSite=lax，限制跨站发送。

3. 点击劫持

• 描述： 攻击者利用透明的iframe覆盖真实页面，引诱用户点击，执行恶意操作。
• 防范措施：
  • X-Frame-Options：通过设置响应头X-Frame-Options:DENY或SAMEORIGIN，禁止页面被嵌入iframe。
  • CSP帧祖先限制：使用CSP的frame-ancestors指令限制允许嵌套页面的来源。

4. 中间人（MitM）

• 描述：(Man-in-the-Middle)第三方拦截了Web服务器和客户端之间的流量，并冒充Web服务器以捕获数据。流量被传递，可能会进行修改。公共Wi-Fi网络是执行此类攻击的典型手段。
• 防范措施：
  • HTTPS：启用HTTPS，确保传输加密。
  • HSTS：通过HTTP响应头启用Strict-Transport-Security，强制使用HTTPS。

5. 敏感信息泄漏

• 描述：前端代码中直接暴露API密钥、用户信息等敏感数据。
• 防范措施：
  • 环境变量保护：避免将敏感信息直接写入前端代码，通过后端获取。
  • 代码混淆：对前端代码进行混淆处理，增加破解难度。
  • 严格权限控制：对API请求进行身份验证和权限校验。

6. 不安全的依赖包

• 描述：使用了第三方库或框架存在漏洞，可能被攻击者利用。
• 防范措施：
  • 定期更新依赖：修补已知漏洞。
  • 依赖检测工具：使用工具检查依赖库的安全性。
  • 尽量减少依赖：仅引入必要的依赖，降低攻击面。