前端安全.png

XSS

定义

XSS是跨站脚本攻击(Cross-Site Scripting)的简称。攻击者通过注入非法的 html 标签或者 javascript 代码,从而当用户浏览该网页时,控制用户浏览器。

本质在于,浏览器错误的将攻击者提供的用户输入数据当做JavaScript脚本给执行了。

类型

  • 存储型 XSS
    • 定义
      • 攻击代码在服务器,访问具体网页时触发。
  • 注入方式
    • 在用户能输入内容的地方注入攻击脚本,如:个人信息页,评论等。
  • 反射型 XSS
    • 定义
      • 黑客诱导用户访问恶意脚本的 URL,当用户访问这个带有恶意脚本的 URL 时,网站又把恶意 JavaScript 脚本返回给用户执行。
  • 注入方式
    • 构造攻击的 URL。如搜索页的搜索条件等。
  • 基于 DOM 的 XSS
    • 定义
      • 黑客诱导用户访问恶意脚本的 URL,当用户访问这个带有恶意脚本的 URL 时,网页中出现黑客期望的有害的DOM。
        • 恶意链接
        • 恶意图片:get 类型的 CSRF 请求。
  • 注入方式
    • 构造攻击的 URL

防御策略

  • 处理用户的输入
    • 根据场景选择
      • 过滤特定字符
      • 对特定字符进行编码
        • < 转为 <
        • 转为 >

  • 从 URL 上获取参数展示时
    • 过滤掉特定字符
  • 以 HTML 方式,输出用户输入的内容时
    • 对特定字符进行编码
  • 对重要的 Cookie 设置 httpOnly
    • JavaScript 没法读取到 httpOnly 的 cookie
  • 开启 Web 安全头
    • 配置 CSP
    • X-Download-Options: noopen
    • X-Content-Type-Options: nosniff

CSRF

定义

CSRF(Cross-site request forgery)跨站请求伪造。

CSRF的攻击流程:
1、受害者登录目标网站A。
2、受害者以某种方式接触到恶意网站B的链接。诱导用户点击。
3、受害者点击链接访问网站B, 网站B中的js代码执行, 偷偷向目标网站A发送某个请求。
4、由于受害者登录过网站A, 因此请求携带了网站A的相关cookie凭证,最后请求成功执行。

黑客关键是获取到用户的登录信息:一般是 cookie。

攻击方式

  • GET 请求的 CSRF
    • 在网页中包含 前端安全概览 - 图2
  • POST 请求的 CSRF
    • 在网页中能注入 form 表单,表单提交地址为 CSRF 地址。用 js 执行表单提交操作。

防御策略

  • cookie 设置 SameSite 设置为 Strict 或 Lax
    通常 CSRF 攻击都是从第三方站点发起的,冒用受害者在被攻击网站的登录凭证,所以我们可以做以下防护:
    如果是从第三方站点发起的请求,浏览器禁止发送某些关键 Cookie 数据到服务器
    如果是同一个站点发起的请求,那么就需要保证 Cookie 数据正常发送。
  • 同源检测
    • 忽略不信任的域名发的请求。判断请求中的 Referer 和 Origin
  • SCRF Token
    • 第三方网站发起请求时,无法拿到这个SCRF Token
  • 二次确认

    静态资源被劫持

    定义

    如果攻击者劫持了CDN,或者对CDN中的资源进行了污染,那么我们的前端应用拿到的就是有问题的JS脚本或者Stylesheet文件,使得攻击者可以肆意篡改我们的前端页面,对用户实施攻击。

    防御策略

  • 静态资源完整性校验。script 标签和 link 标签加 integrity 设置文件摘要值。

不安全的第三方包

防御策略

  • 代码扫描: NPM Audit等

    点击劫持

    定义

    攻击步骤:
    1.攻击者精心构造一个诱导用户点击的内容,比如Web页面小游戏
    2. 将我们的页面放入到iframe当中
    3. 利用z-index等CSS样式将这个iframe叠加到小游戏的垂直方向的正上方
    4. 把iframe设置为100%透明度。受害者访问到这个页面后,肉眼看到的是一个小游戏,如果受到诱导进行了点击的话,实际上点击到的却是iframe中的我们的页面。

防御策略

  • 在被放在 iframe 中时,不显示内容。
    • X-Frame-Options:DENY
    • 用 js 也能判断,不允许不信任域的嵌入。

更多

  • 嵌入的 iframe 做妖。
  • js 浏览器推断文件类型。将 js 文件 伪装成 图片的 MIME type

推荐阅读