前端安全知识

@sakila1012 2018-04-02 03:10:46发表于 sakila1012/blog

写在前面

之前面试中,工作都会遇到 web 安全方面的内容,但从未深入了解,也没有总结,仅仅停留在概念认知层面上。

XSS

xss:跨站脚本攻击(Cross Site Scripting)是最常见和最基本的攻击 WEB 网站方法,攻击者通过注入非法的 HTML 或 JavaScript 代码,从而当用户浏览该网页时,控制用户浏览器。

xss 主要分为三类:

  • DOM xss:

    Dom即文本对象模型,DOM通常代表在HTML、XHTML 和 xml 中的对象,使用 DOM 可以允许程序和
    脚本动态的访问和更新文档的内容、结构和样式。它不需要服务器解析响应的直接参与,触发 XSS 靠的
    是浏览器端的 DOM 解析,可以认为完全是客户端的事情。

  • 反射型 xss:

    反射型 xss也被称为非持久性 XSS,是现在最容易出现的一种 XSS 漏洞。发出请求时,XSS 代码出现在
    URL 中,最后输入提交到服务器,服务器解析后在响应内容中出现这段 XSS 代码,最后浏览器解析执
    行。

  • 存储型 xss:

    存储型 XSS 又被称为持久性 XSS,它是最危险的一种跨站脚本,相比反射型 XSS 和 DOM 型 XSS 具有
    更高的隐蔽性,所以危害更大,因为它不需要用户手动触发。允许用户存储数据的 web 程序都可能存
    在存储型 XSS 漏洞,当攻击者提交一段 XSS 代码后,被服务器接收并存储,当所有浏览器访问某个页
    面时都会被 XSS,其中最典型的例子就是留言板。

跨站脚本攻击可能造成以下影响:

  • 利用虚假输入表单骗取用户个人信息。
  • 利用脚本窃取用户的 Cookie 值,被害者在不知情的情况下,帮助攻击者发送恶意请求。
  • 显示伪造的文章或图片。

防御

按理说,只要有输入数据的地方,就可能存在 XSS 危险。

  • httpOnly:在 cookie 中设置 HttpOnly 属性后, js脚本将无法读取到 cookie 信息。
ctx.cookies.set(name, value, {
  httpOnly: true //默认为 true
})
  • 过滤
    输入检查,一般是用于对输入格式的检查,例如:邮箱,电话号码,用户名,密码。。。等,按照规定
    的格式输入。

    不仅仅是前端负责,后端也要做相同的过滤检查。

    因为攻击者完全可以绕过正常的输入流程,直接利用相关接口向服务器发送设置。

  • HtmlEncode

    某些情况下,不能对用户数据进行严格过滤,需要对标签进行转换

image

  • JavaScriptEncode
    对下列字符加上反斜杠

image

关于 更多 HtmlEncode 和 JavaScriptEncode,请参考HtmlEncode和JavaScriptEncode(预防XSS)

CSRF

csrf:跨站点请求伪造(Cross-Site Request Forgeries),也被称为 one-click attack 或者 session riding。冒充用户发起请求(在用户不知情的情况下),完成一些违背用户意愿的事情(如修改用户信息,删除评论)。

可能会造成以下影响:

  • 利用已通过认证的用户权限更新设定信息等;
  • 利用已通过认证的用户的用户权限购买商品;
  • 利用已通过的用户权限在留言板上发表言论。

一张图了解原理:

image

简而言之:网站过分相信用户。

与 xss 区别

  • 通常来说 CSRF 是由 XSS 实现的,CSRF 时常也被称为 XSRF(CSRF 实现的方式还可以是直接通过命令行发起请求等)。

  • 本质上讲,XSS 是代码注入问题,CSRF 是 HTTP 问题。XSS 是内容没有过滤导致浏览器将攻击者的输入代码执行。CSRF 则是因为浏览器在发送 HTTP 请求时候自动带上 cookie,而一般网站的 session 都存在 cookie 里面。

防御

  • 验证码:强制用户必须与应用进行交互,才能完成最终请求。此种方式能很好的遏制 csrf,但是用户体验比较差。

  • 尽量使用 post,限制 get 使用;上一个例子可见,get 太容易被拿来做 csrf 攻击,但是 post 也并不是万无一失,攻击者只需要构造一个 form 就可以。

  • Referer check;请求来源限制,此种方法成本最低,但是并不能保证 100% 有效,因为服务器并不是什么时候都能取到 Referer,而且低版本的浏览器的浏览器存在伪造 Referer 的风险。

  • token:token 验证的 CSRF 防御机制是公认最合适的方案。

整体思路如下:

  • 第一步:后端随机产生一个 token,把这个 token 保存到 session 状态中;同时后端把这个 token 交给前端页面;

  • 第二步:前端页面提交请求时,把 token 加入到请求数据或者头信息中,一起传给后端;

  • 后端验证前端传来的 token 与 session 能否一致,一致则合法,否则是非法请求。

若网站同时存在 XSS 漏洞的时候,这个方法也是空谈。

Clickjacking

Clickjacking:点击劫持,是利用透明的按钮或链接做成陷阱,覆盖在 Web 页面之上。然后诱使用户在不知情的情况下,点击那个链接访问内容的一种攻击手段。这种行为又称为界面伪装(UI Redressing).

大概有两种方式