右耳听风
0%

web安全之前端安全

发表于

web安全之前端安全

概述

随着互联网的高速发展，信息安全问题已经成为企业最为关注的焦点之一，而前端又是引发企业安全问题的高危据点。 在移动互联网时代，前端人员除了传统的 XSS、CSRF 等安全问题之外，又时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。当然，浏览器自身也在不断在进化和发展，不断引入 CSP、Same-Site Cookies 等新技术来增强安全性，但是仍存在很多潜在的威胁，这需要前端技术人员不断进行“查漏补缺”。

常见的攻击方式

XSS（跨站脚本攻击 Cross-Site Scripting）

  • 反射型
    • 漏洞原理
      • 应用程序或API包括未经验证和未转义的用户输入，直接作为HTML输出的一部分。
      • 一个成功的攻击可以让攻击者在受害者额的浏览器中执行任意的HTML和javascript
    • 特点
      • 非持久化，必须用户点击带有特定参数的链接才能引起
      • 影响范围是仅执行脚本的用户
    • 攻击步骤
      • 攻击者构造出特殊的 URL，其中包含恶意代码。
      • 用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。
      • 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
      • 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。
    • 防御措施
      • 危害相对较小，多为一次性点击触发，对于用户端来说陌生的链接不要打开

反射型 XSS 漏洞常见于通过 URL 传递参数的功能，如网站搜索、跳转等。由于需要用户主动打开恶意的 URL 才能生效，攻击者往往会结合多种手段诱导用户点击。

POST 的内容也可以触发反射型 XSS，只不过其触发条件比较苛刻（需要构造表单提交页面，并引导用户点击），所以非常少见。

  • 存储型

    • 漏洞原理

      • 程序通过web请求获取不可信赖的数据，在未检校是否存在XSS代码的情况下，便将其存入数据库
      • 当下次从数据库中获取该数据时程序未为对其进行过滤，页面再次执行XSS代码
      • 可以持续攻击用户

    • 攻击步骤：

      • 攻击者将恶意代码提交到目标网站的数据库中。
      • 用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器。
      • 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
      • 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

    • 防御措施

      • 这种攻击常见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等
      • 针对用户的输入合理验证，对特殊字符（< 、>、’、”等）以及script javascript等进行过滤
      • 对数据输出HTML上下文中不同位置进行恰当的输出编码
      • 设置httponly 属性 避免攻击者利用跨站脚本漏洞进行cookie劫持
  • DOM型

    • 漏洞原理

      • 基于DOM，文档对象模型的一种漏洞，也是一种特殊的反射型XSS
      • 通过JS操作DOM树，动态的输出数据到页面，而不依赖将数据提交给服务端

    • 攻击步骤：

      • 攻击者构造出特殊的 URL，其中包含恶意代码。
      • 用户打开带有恶意代码的 URL。
      • 用户浏览器接收到响应后解析执行，前端 JavaScript 取出 URL 中的恶意代码并执行。
      • 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

    • 案例

    • 防御措施

      • 在使用 .innerHTML、.outerHTML、document.write() 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用 .textContent、.setAttribute() 等。
      • 如果用 Vue/React 技术栈，并且不使用 v-html/dangerouslySetInnerHTML 功能，就在前端 render 阶段避免 innerHTML、outerHTML 的 XSS 隐患。
      • DOM 中的内联事件监听器，如 location、onclick、onerror、onload、onmouseover 等，<a> 标签的 href 属性，JavaScript 的 eval()、setTimeout()、setInterval() 等，都能把字符串作为代码运行。如果不可信的数据拼接到字符串中传递给这些 API，很容易产生安全隐患，请务必避免。

三种类型的比较

  • 反射型 跟存储型 的区别是：存储型 的恶意代码存在数据库里，反射型 的恶意代码存在 URL 里。
  • DOM型和反射型相同点：都是没有控制好输入，并且把JavaScript脚本输入作为输入 插入到HTML页面
  • DOM型和反射型不同点：反射型是通过后端后，页面引用后端输出后生效。DOM 是经过JS对DOM树直接操作后插入到页面

小游戏

CSRF（跨站请求伪造 cross-site request forgery）

  • 漏洞原理

    • 数据包中的cookie的值是浏览器从本地存储中取出的，并自动填充到数据包中
    • 如果攻击者控制了受害者的浏览器并窃取了cookie
    • 浏览器会自动完成cookie的填充，目标网站会误认为该数据包就是管理员发送的，会以受害者的权限进行操作

  • 案例 & 攻击步骤

    • 受害者登录a.com，并保留了登录凭证（Cookie）。
    • 攻击者引诱受害者访问了b.com。
    • b.com 向 a.com 发送了一个请求：a.com/act=xx。浏览器会默认携带a.com的Cookie。
    • a.com接收到请求后，对请求进行验证，并确认是受害者的凭证，误以为是受害者自己发送的请求。
    • a.com以受害者的名义执行了act=xx。
    • 攻击完成，攻击者在受害者不知情的情况下，冒充受害者，让a.com执行了自己定义的操作。

  • 防御措施

    • Token

      • Token - 是由web应用程序添加到数据包中

  • HTTP Referer

    • 站点可以对一些敏感操作限制其Referer字段的值