xss防御方法base64_给 XSS 加点 S

TOC：

约定本文中出现由花括号包裹的内容为服务端进行 html 字符串拼接的动态内容：{userData}，在其他文章中经常表现为 。

本文中所使用的关键词：“用户数据”，与 “非受信数据” 同义。

XSS 简介

XSS 是一种代码注入***，在受害者浏览器上注入恶意代码并执行，本质是前后端渲染不受信任的用户数据导致的安全问题。

不受信任的用户数据指的是由用户提供的数据，例如：用户在表单中输入的值，用户在 URL 中拼接的字符串等等。通常表现为恶意的 JavaScript 脚本或 CSS 脚本。

XSS 种类

通常我们把 XSS 分为三大类：存储型、反射型 以及 DOM 型。

存储型和反射型是服务单渲染 (***) 所导致的安全问题。

而 DOM 型则是客户端渲染 (CSR) 所导致的安全问题。

存储型【Stored XSS (AKA Persistent or Type I)】

1、顾名思义，***者提交的恶意数据被存储在目标站点的服务器 (如数据库中)

2、受害者访问目标站点，服务端没有安全的处理用于拼接 HTML 的数据，并将有问题的 HTML 发送给浏览器

3、恶意代码在受害者浏览器中执行，受到***

反射型【Reflected XSS (AKA Non-Persistent or Type II)】

1、反射型与存储的区别在于，反射型是非持久性的，大多是同构 URL 的参数进行恶意代码的注入

2、受害者点击由***者预先设计好的恶意 URL，跳转到目标站点

3、目标站点从 URL 中取出恶意数据并拼接 HTML，再发送给浏览器

4、恶意代码在受害者浏览器中执行，受到***

DOM 型【DOM Based XSS (AKA Type-0)】

第一个提出 DOM 型 XSS ***的是 Amit Klein，DOM 型不需要服务端参与，是纯前端安全问题。从恶意数据源 到 接受并处理恶意数据的接收器都在浏览器中。

其中恶意数据源包括不限于：URL(如：document.loaction.href)，HTML 元素等。

处理恶意数据的接收器如 document.write()、innerHTML、setTimeout/setInterval、eval 等等。

小结

1、如果你的项目是服务端渲染，又因为服务端渲染的内容几乎不会是纯静态的，因此我们需要注意存储型、反射型以及 DOM 型***，这些都有可能发生。

2、如果你的项目时客户端渲染，那么只需要注意 DOM 型***即可。

XSS 的危害

用户提供的数据，我们应该始终作为不受信任的数据处理，一旦把不受信任的数据在浏览器中执行，例如一段 JavaScript 脚本，那么该脚本将拥有完全的控制能力，它可以盗取用户私密信息，例如 cookie 等，可以改变站点的样式从而诱导 “点击劫持”，这段恶意脚本可以代表用户执行任何操作。

存储型和反射型 XSS 的防御

防御 XSS ***没有想象的容易，但也没有想象的那么难，存储型和反射型需要服务端参与，我们接下来就讨论一下如何防御这类***，并给出 Vue *** 的情况下是否会有某些问题，当然接下来介绍的某些***手段不仅仅会存在于 *** 中，在 CSR 中也是有问题的，我们都会提及。

首先我们要明确一件事儿，任何安全问题都是在错误的信任用户提供的数据所导致的，因此，任何用户提供的数据都应该被特殊对待，在必要的情况下做正确的处理并展示。

1、插入到 html 标签内的用户数据

案例：

{ userData }

复制代码

如果 userData 的内容是 。那么最终拼接而成的字符串将是：

复制代码

很显然，浏览器会弹出窗口，并展示 cookie。

防御方式：

在将 userData 展示给用户之前，要对其进行 html 转义 (escape)，既将如下字符转移成对应的 html 实体：& → &

< → <