前端某些需要注意的安全问题

XSS（Cross Site Scripting，跨站脚本）

出现场景：

通常出现在某些允许用户输入内容而后发送到服务端存储后，在用户请求时返回在页面中，执行了一些恶意的 JavaScript 脚本。例如在留言板功能中，用户在输入恶意 JavaScript 脚本留言后，如果被直接存储到服务端中时，其他用户在进入留言板页面从服务端获取页面并渲染时便会执行该恶意脚本，如在脚本中获取用户的 cookie，引导用户去往恶意网站，携带木马等。

解决方法：

1. 对输入的内容进行过滤，排除是可执行的脚本内容；
2. 对获取到页面的内容尽可能不执行 html，如使用 v-html 或执行使用字符串拼接并添加到 dom 中，如必要执行 html，则进行 html 筛选，编码，对特殊字符进行 html 编码等。

CSRF（Cross Site Request Forgery，跨站请求伪造）

出现场景：

用户在登录 a 网站后，在浏览器中保留了登录凭证 cookie，并且该 cookie 还未过期；而后又访问了 b 网站，这个 b 网站是个恶意网站，在访问时，b 网站向 a 网站发起恶意请求，由于浏览器会默认携带 a 网站中的 cookie，所以在 b 网站发起的恶意请求便会通过 a 网站的鉴权认证，从而进行一些恶意操作。

解决方法：

由于发起请求是由第三方攻击网站发起的，所以被攻击网站是无法防止攻击发生的，所以大部分的防御便只能从服务端下手。

1. http
   Referer 字段，服务端接收该字段，判断是从哪个页面链接过来的，不是本站的不予处理。
2. 使用 token 鉴权，a 网站中在发起请求时都会携带 token 进行鉴权，而 b 攻击网站只是通过 cookie 发送便没有该 token，便无法鉴权成功。
3. 添加自定义请求 head 字段

点击劫持

出现场景：

用户访问恶意网站，该网站把别的网站放入到 iframe 中，通过 css 设置 z-index 将 iframe 放在样式顶层，并添加透明度为 0，这样在我们看到的内容是而已网站正常的内容，但是当点击某些按钮时则是点击的 iframe 里的网站。通过这种方式便能进行一些恶意操作。

解决方法：

1. 配置 http
   head 字段 X-FRAME-OPTIONS：DENY，限制网站页面再 iframe 中加载
2. js 判断网站是否被嵌入到 iframe 中加载

if (top.location != self.location) {
	//被嵌入iframe中，执行跳出操作
}

未完待续。。。。