xss防范小知识
一、背景
在Web安全中，xss攻击绝对算是一种非常常见的攻击方式了，它能够窃取用户的隐私信息，比如cookie，也能够做一些非用户意图的操作来达到攻击目的。
二、原理
xss攻击是一种非法脚本的插入与执行攻击，全称为 cross site script ,即跨站脚本攻击。
通常我们访问一个安全的网站时，浏览器会认为从该站点来的所有内容都是安全的，并按照html或者js等脚本的内容去如实执行。但是当某个网站存在安全漏洞时，它便有可能被hacker利用起来，类似于SQL注入一般注入js脚本，这时候，浏览器访问该站点时，得到的内容便存在着安全隐患，执行的脚本便会出现问题。
因此，本质上，xss攻击就是一种js脚本注入攻击，以达到非法操作的目的。
三、分类
1、反射型攻击
它是指浏览器在访问某个地址时，通过参数的方式，在请求中添加了非法脚本内容，服务端在接受到参数并处理完之后，将这些非法的用户输入响应到前端作为html一部分，前端最终执行了非法的脚本。
2、存储型攻击
这种类型的攻击，常见于存在用户输入的展示，比如说留言，评论，如果在这些内容中加入了非法脚本，那么浏览器在访问这些内容时，便会执行非法脚本。
3、DOM型攻击
同样,通过在url中构建非法的脚本作为参数，前端直接获取这些参数并进行展示时，便会不自觉地执行了非法的脚本。
四、举例子
1、前端直接取url中的参数，并拼接到页面进行展示
<input type="text" value="<%= getParameter("keyword") %>">
<button>搜索</button>
<div>
您搜索的关键词是：<%= getParameter("keyword") %>
</div>假设我们访问的页面是：baidu.com?keyword=<script>alert(‘xss‘)</script>
那么上述的页面内容便成为了：
<input type="text" value="<%= getParameter("keyword") %>">
<button>搜索</button>
<div>
您搜索的关键词是：<script>alert(‘xss‘)</script>
</div>这时候，浏览器便会弹框‘xss’，也就不自觉地执行了我们注入的脚本。
2、用户点击触发脚本
通常，对于第一种例子，我们会想到对用户的输入进行特殊字符的转义，然后再展示，但是这种方式并不能完全阻止脚本的注入与执行.
例如对于a标签，如果它的href地址为：
<a href="<%= escapeHTML(getParameter("redirect_to")) %>">跳转...</a>那么当我们访问的地址为：
baidu.com?redirect_to=javascript:alert(‘XSS‘)
哪怕进行了特殊字符的转义，这时候html中的实际内容为：
<a href="javascript:alert('XSS')">跳转...</a>
我们在点击该标签时，还是会触发脚本。
因此，对于转义，并不能够完全的杜绝脚本的注入，我们对于不同的场景，要对用户的输入内容进行不同程度的转义操作。
五、防范
一个总的原则是需要对用户的输入进行过滤，认为用户输入的内容总是不可靠的。
1、对于后端
如果后端响应的数据需要拼接到html中，那么我们需要对响应的数据进行转义，通常是对 & < > / " ‘ 等几个字符进行转义。
2、对于前端
使用纯前端渲染、将页面代码和数据进行分离。
1、前段先加载静态页面
2、前端通过ajax获取数据
3、通过DOM api将数据插入到页面
在使用 .innerHTML、.outerHTML、document.write() 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用 .textContent、.setAttribute() 等。
如果用 Vue/React 技术栈，并且不使用 v-html/dangerouslySetInnerHTML 功能，就在前端 render 阶段避免 innerHTML、outerHTML 的 XSS 隐患。
DOM 中的内联事件监听器，如 location、onclick、onerror、onload、onmouseover 等，<a> 标签的 href 属性，JavaScript 的 eval()、setTimeout()、setInterval() 等，都能把字符串作为代码运行。如果不可信的数据拼接到字符串中传递给这些 API，很容易产生安全隐患，请务必避免。
参考：
美团前端安全系列：https://tech.meituan.com/2018/09/27/fe-security.html