前端安全知识

[sakila1012]

写在前面

之前面试中，工作都会遇到 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

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

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

关于 更多 HtmlEncode 和 JavaScriptEncode，请参考HtmlEncode和JavaScriptEncode（预防XSS）

CSRF

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

可能会造成以下影响：

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

一张图了解原理：

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

与 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）.

大概有两种方式

[littleprinceofnight]

你好 我最近几天一直在看你的哪个php项目 但是遇到了一些问题 学生注册的功能一直没能实现 你方便的话能沟通以下吗 我的qq：872920820 微信;wei27855017

[sakila1012]

@littleprinceofnight 我没有PHP项目，只有一个登录的demo，你说的是不是这个？
你可以在这个项目下说下具体的问题
https://github.com/sakila1012/vue-login-manage-system/issues