Published on

https & 网络安全

Authors
  • avatar
    Name
    hpoenixf
    Twitter

前端安全问题与防御方法

XSS（跨站脚本攻击）

类型

  1. 存储型：
    • 攻击者上传恶意信息到服务器数据库，其他用户访问时恶意代码被执行。
  2. DOM 型：
    • 前端动态插入不可信内容到页面，导致代码执行。
  3. 反射型：
    • 恶意代码通过 URL 参数传递，前端取出并执行。

防御方法

  • 前端过滤展示：
    • 对用户输入进行 HTML 转义。
  • 后端过滤输入：
    • 对输入进行严格验证，移除危险标签或属性。

编辑器的 XSS 防御

方法

  1. 白名单机制：
    • 使用工具（如 cheerio）解析 HTML，仅允许安全的标签和属性。
  2. 黑名单机制：
    • 移除标签和危险属性（如 javascript:、onerror）。

XSS 防御总览

  • 转义：对特殊字符（如 <, > 等）进行转义。
  • Cookie 设置：使用 HttpOnly 防止 JS 读取敏感信息。
  • 输入限制：
    • 限制输入长度。
    • 限制输入内容（正则匹配允许的格式）。

CSRF（跨站请求伪造）

原理

  • 攻击者利用受害者的 Cookie 等身份凭证，诱使受害者向已登录网站发起恶意请求。

防御方法

  1. GET 方法不改数据：
    • 确保敏感操作只使用 POST、PUT 等方法。
  2. Token 验证：
    • 服务器生成唯一的 CSRF Token，验证请求合法性。
  3. 检测 Referer 或 Origin：
    • 验证请求来源是否为可信域。
  4. SameSite Cookie：
    • 限制第三方 Cookie 的使用，分为以下模式：
      • Strict：完全禁用第三方 Cookie。
      • Lax：允许链接跳转、GET 表单使用第三方 Cookie，但禁止 POST、iframe、AJAX。
      • None：允许所有第三方 Cookie，但需要启用 HTTPS。

CSP（内容安全策略）

原理

  • 限制页面可以加载的资源，防止加载恶意脚本。

设置方法

  1. 通过响应头：
    • Content-Security-Policy 指定规则。
  2. 通过 HTML 标签：
    • 在页面中嵌入 CSP 规则。

语法

  • 设置指令：
    • Key 是资源类型，Value 是允许的来源。
    • 示例：
      • none：不允许加载。
      • self：只允许加载自身域名资源。
      • eval：允许使用 eval。
      • url：允许指定域名资源。
      • inline：允许内联资源。

HTTPS（安全超文本传输协议）

特点

  1. 协议：HTTP + SSL/TLS。
  2. 安全性：
    • 数据加密传输。
    • 身份校验。
  3. 技术特性：
    • 默认使用 443 端口。
    • 需要 CA 证书。
    • 对称加密传输数据，非对称加密进行身份验证。

HTTPS 的加密方式

  1. 对称加密：用于传输数据，速度快。
  2. 非对称加密（RSA）：用于身份验证，传输密钥。

HTTPS 工作过程

  1. 客户端请求：
    • 客户端发送支持的协议版本、随机数 A 和加密算法。
  2. 服务器响应：
    • 服务器返回证书，附带支持的加密算法和随机数 B。
  3. 验证证书：
    • 客户端校验证书，生成随机数 C，并用公钥加密后返回。
  4. 服务器解密：
    • 服务器用私钥解密，验证随机数 C 是否正确。
  5. 生成对称密钥：
    • 客户端与服务器用 A、B、C 三个随机数生成对称密钥进行通信。

通过上述防御方法，可以有效预防 XSS、CSRF 和其他常见前端安全问题，保障用户数据和系统的安全性。

View on GitHub