👽一、XSS

跨站脚本攻击（Cross-site scripting，aka XSS）是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等。本质是恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。

1、根据攻击的来源分类

类型 存储区(恶意代码存放的位置) 插入点
存储型 XSS 后端数据库 HTML
反射型 XSS URL HTML
DOM 型 XSS 后端数据库/前端存储/URL 前端 Javascript

  • 存储型（持久型）：用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器解析执行。常见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等

  • 反射型（非持久型）：用户被诱导打开带有恶意代码的URL时，网站服务端将恶意代码从URL中取出，拼接在 HTML 中返回给浏览器解析执行。常见于通过URL传递参数的功能，如网站搜索、跳转等

  • DOM 型：攻击者构造出特殊的URL，其中包含恶意代码。用户打开带有恶意代码的URL。用户浏览器接收到响应后解析执行，前端 JavaScript 取出URL中的恶意代码并执行。属于前端 JavaScript 自身的安全漏洞

2、如何防御

  • 输入过滤：对于明确的输入类型，如数字、URL、电话号码、邮件地址等等内容

    • 输入内容长度控制：对于不受信任的输入，限定一个合理的长度
    • 对 HTML 做充分转义：不同情况采用不同转义规则，采用成熟的的转义库
  • CSP(Content Security Policy)：内容安全策略本质上是建立白名单，规定浏览器只能够执行特定来源的代码
  • HTTP-only Cookie：禁止 JavaScript 读取某些敏感 Cookie，攻击者完成 XSS 注入后也无法窃取此 Cookie
  • 验证码：防止脚本冒充用户提交危险操作

💥二、CSRF

CSRF（Cross-site request forgery，aka CSRF or XSRF）跨站请求伪造，是一种冒充受信任用户，向服务器发送非预期请求的攻击方式。本质是利用用户的登录态发起恶意请求。

1、攻击类型

  • GET 类型的 CSRF：只需要一个 HTTP 请求
  • POST 类型的 CSRF：利用起来通常使用的是一个自动提交的表单。模拟用户完成了一次 POST 操作
  • 链接类型的 CSRF：需要用户点击链接才会触发。通常是在论坛中发布的图片中嵌入恶意链接，或者以广告的形式诱导用户

2、防护策略

  • A、同源检测：相对简单，能够防范绝大多数的 CSRF 攻击

    • Origin Header: 在部分与 CSRF 有关请求的 Header 中会携带 Origin 字段，若存在则使用 Origin 中的字段确认来源域名
    • Referer Header: 在 HTTP 头中 Referer 字段记录了该 HTTP 请求的来源地址，使用 Referer 中链接的 Origin 部分可得知请求的来源域名

  • B、Samesite Cookie：为 Set-Cookie 响应头新增 Samesite 属性，标明“同站 Cookie”，其只能作为第一方 Cookie，不能作为第三方 Cookie

    • Samesite=Strict: 严格模式，表明该 Cookie 在任何情况下都不可能作为第三方 Cookie，浏览器在任何跨域请求中都不会携带 Cookie
    • Samesite=Lax: 宽松模式，假如是 GET 请求，则该 Cookie 可作为第三方 Cookie，其他网站通过页面跳转过来时可使用 Cookie

  • C、CSRF Token：服务器下发一个随机 Token（算法不能复杂），每次发起请求时将 Token 携带上，服务器验证 Token 是否有效

    • 服务器给打开页面的用户生成一个 Token
    • 页面提交的请求携带这个 Token
    • 服务器验证 Token 是否正确

  • D、双重 Cookie 验证：利用 CSRF 攻击不能获取到用户 Cookie 的特点，要求 Ajax 和表单请求携带一个 Cookie 中的值

    • 用户访问网站页面时，向请求域名注入一个 Cookie，内容为随机字符串
    • 前端向后端发起请求时，取出 Cookie，并添加到 URL 的参数中
    • 后端接口验证 Cookie 中的字段与 URL 参数中的字段是否一致，不一致则拒绝

🚨 三、点击劫持

  • 定义：界面伪装攻击，攻击者一般通过透明的 iframe（目标网站），覆盖在攻击者的网页上，并诱导用户进行操作。一般会利用 XSS 或 CSRF 漏洞来进行攻击。

  • 应对：

    • 设置X-Frame-Options HTTP 响应头，防止网页被 iframe 加载

      • deny：拒绝当前页面加载任何 frame 页面
      • sameorigin：frame 页面的地址只能为同源域名下的页面
      • allow-from uri：允许 frame 加载的页面地址
    • 使用 CSP(Content Security Policy)内容安全策略

🔆四、HTTP 劫持

  • 定义：由于 http 明文传输，运营商可能会修改内存缓存池中 http 响应内容

  • 分类

    • 类似 DNS 劫持返回 302 让用户浏览器跳转到另外的地址
    • 在服务器返回的 HTML 数据中插入 js 或 dom 节点
  • 应对：全站 HTTPS，将 HTTP 加密，这使得运营商无法获取明文。注意一点，非全站 HTTPS 并不安全

🔯 五、中间人攻击

混合内容：：初始HTML内容通过安全的HTTPS连接加载，但其他资源（如图像、视频、样式表、脚本）则通过不安全的HTTP连接加载。混合内容会降低 HTTPS 的安全性
被动混合内容：不与页面其余部分进行交互的内容，从而使中间人攻击在拦截或更改该内容时能够执行的操作受限
主动混合内容：作为整体与页面进行交互，几乎允许攻击者对页面进行任何操作

  • 定义：中间人攻击(man-in-the-middle attack, aka MitM)，即在消息发出方和接收方之间拦截双方通讯，进行数据篡改和嗅探，而通信的双方毫不知情。问题的根源在于 A 无法确认收到的公钥是否由 B 方创建

前端安全 🔐 - 图1

  • 攻击方式

    • 有线局域网下ARP投毒+中间人伪造SSL证书攻击
    • 有线局域网下ARP投毒+中间人SSL卸载攻击
    • 基于中间人攻击的SSL BEAST攻击
    • 基于DNS劫持的SET社会工程钓鱼攻击
    • 基于中间人攻击的会话劫持攻击(Session Hajacking)
  • 应对：增加一个安全通道来传输信息。需要 “数字证书” 系统来验证公钥的所有者，一般数字证书认证机构（Certificate Authority）称之为 CA