前端安全问题之XSS
XSS(Cross-site scripting)跨站脚本攻击是恶意用户在网站中注入的脚本，当正常用户打开网站时受到影响并可能获取用户cookie等信息一种安全攻击行为。常见的例子是用户进入某个网站的时候一直弹出alert框等。其核心是浏览器将恶意脚本当做正常程序执行。
XSS分类
常见的 XSS 方式分为两类：持久性和非持久性，也有机构将其分为传统型(由服务器端代码缺陷引起)和基于 DOM 型（由客户端引起）。下面介绍三种类型：
反射型 反射型跨站脚本攻击最常见的方式是客户端输入查询信息，服务器端将其返回并且显示在页面上造成攻击。如直出页面，后面根据参数查询返回对应的查询信息和结果。或者用户在input输入框中进行查询等,值得注意的是，使用 innerHTML 插入 <script>alert(document.cooke)</script 并不会执行 script 中的代码，需要构造对应事件触发。如： <img src="xxx.jpg" width="0" height="0" border="0" onload="javascript:alert(document.cookie);">
存储型 存储型与反射型 XSS 攻击的区别在于是否存储在数据库中，如用户写博客和评论等，这种方式的影响是持久的。
基于 DOM 恶意用户构造的脚本并不会经过服务器端，完全发生在客服端，如通过链接（?userName=<img onload="javascript:alert(document.cookie)"/>）的查询参数来显示用户名等。
演示
根据上面的分类，我们来模拟一下基于DOM 型XSS攻击过程。
- 用户通过其他渠道点击点击带有恶意代码注入的链接：比如xxx?userName=<svg%20onload%3dalert(1)>
- 页面读取链接信息展示到页面；
- 浏览器执行恶意代码，输入alert(1);
//https://xxx?userName=<svg%20onload%3dalert(1)>
<body>
<body>
<div>userName: <span id="userName"></span></div>
<script>
document.querySelector('#userName').innerHTML = decodeURIComponent(location.search.slice(1).split('=')[1])
</script>
</body>
</body>
上面只是恶作剧的弹出提示框，一般会利用XSS漏洞获取cookie 等用户信息。
预防
针对 XSS 攻击，经常有以下两个方式来进行防御：
设置重要的cookie信息为 httpOnly 对于重要的 cookie字段，如：可以通过 cookie 某个字段和某个接口获取好友关系的，需要将其设置为 httpOnly,使得恶意用户无法获取。
对输入进行检测和转义 对用户输入的或者从链接获取参数需要展示到页面中需要校验合法性和使用转义函数进行转义，如常见的函数如下：
function escHTML(str) {
if (!str) return '';
return str.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/x27/g, ''')
.replace(/x22/g,'&quto;');
}