关于前端安全XSS
XSS
XSS,即 Cross Site Script,中译是跨站脚本攻击；其原本缩写是CSS,但为了和层叠样式表(Cascading Style Sheet)有所区分,因而在安全领域叫做 XSS
攻击者通过恶意插入脚本，实现对用户访问网站内容的控制
其大致分为三种类型
1.反射型(Reflected XSS)
当服务器端脚本立即使用 web 客户端提供的数据(最常见的是 HTTP 查询参数(例如 HTML 表单提交))来解析并向用户显示结果页面时，这些漏洞就会显现出来
反射 XSS 是攻击者发现页面有这样的漏洞时发生的攻击，例如:
假如页面的HTML是如下
<body>
...
<div> showing results for keyword
<script>
document.write(
window.location.href.substr(window.location.href.indexOf('q=') + 2)
)
</script>
</div>
...
...JavaScript results...
...
</body>在此输入URL地址
期望的 URL: https://mywebpage.com/search?q=javascript如果恶意注入代码如下
恶意URL: https://mywebpage.com/search?q=<script>恶意代码</script>当攻击者诱使用户点击这种恶意的 URL ，用户敏感数据会被泄露
攻击的流程如下
2.存储型(Stored XSS)
攻击者提供的数据被服务器保存，然后在正常浏览过程中返回给其他用户的“正常”页面上永久显示，而没有适当的 HTML 转义。
其攻击流程如下
3.基于DOM型(DOM based XSS)
恶意代码通过 JavaScript 代码完全在客户端反映出来的
这种攻击和反射型是类似的，但不同的是，恶意的 URL 部分将不会被发送到服务器。 例如:
期望 URL: https://mywebpage.com/search?q=javascript基于DOM型
恶意 URL: https://mywebpage.com/search#q=<script>恶意代码</script>如果在页面中存在
var text = document.getElementById("text");
text.innerHTML = malicious URL就会破坏DOM结构，攻击者就可以通过脚本实现控制内容
如何防护
每一个可以由用户输入并在您的应用程序中使用的值(无论是在服务器端还是在客户端)都应该被视为不受信任的数据，因此应该在使用前进行处理！
输入检测
对用户输入的内容进行检测并转义
function escapeText(text) {
return text.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
}输出检查
在服务端数据渲染HTML的时候，使用编码或转义的方式避免
参考资料
XSS CSRF 例子
github book
<<白帽子讲 Web 安全>>
