前端安全（XSS、CSRF防御）
一、网络安全
OWASP：开放式Web应用程序安全项目（OWASP，Open Web Application Security Project）
OWASP是一个开源的、非盈利的全球性安全组织，致力于应用软件的安全研究。http://www.owasp.org.cn/
二、XSS攻击
1、总述
2、XSS攻击原理
XSS攻击（Cross-Site Scripting）跨站脚本攻击。 被OWASP评为十大安全漏洞中的第二威胁漏洞。
特点：能注入恶意的HTML/JavaScript代码到用户浏览的网页上，从而达到Cookie资料窃取、会话劫持、钓鱼欺骗等攻击。<攻击代码不一定（非要）在 <script></script> 中>
原因：a：Web浏览器本身的设计不安全。浏览器能解析和执行JS等代码，但是不会判断该数据和程序代码是否恶意。
b：输入和输出是Web应用程序最基本的交互，而且网站的交互功能越来越丰富。如果在这过程中没有做好安全防护，很容易会出现XSS漏洞。
c：程序员水平参差不齐，而且大都没有过正规的安全培训，没有相关的安全意识。
d：XSS攻击手段灵活多变。
3、防御XSS攻击
a：HttpOnly 浏览器禁止页面的JS访问带有HttpOnly属性的Cookie。
b：输入检查 XSS Filter 对输入内容做格式检查，类似“白名单”，可以让一些基于特殊字符的攻击失效。在客户端JS和服务器端代码中实现相同的输入检查（服务器端必须有）。
c：输出检查 在变量输出到html页面时，可以使用编码或转义的方式来防御XSS攻击 HtmlEncode：将字符转成HTMLEntities，对应的标准是ISO-8859-1。
& --> & < --> < > -->> " --> " ' --> ' / --> /
JS中可以使用JavascriptEncode。需要对“\”对特殊字符转义，输出的变量的必须在引号内部。
d：XSS的本质是“HTML注入”，用户的数据被当成了HTML代码一部分来执行，从而混淆了原本的语义，产生了新的语义。
在Html标签中输出：<div>$var</div> 在标签中输出的变量，如果未做任何处理，都能导致直接产生XSS：构造一个<script>标签，或者是任何能够产生脚本执行的方式：<div><script>alert(/XSS/)</script></div> 或者 <a href=# ><img src=# onerror=alert(1) /></a>
防御方法：对变量使用HtmlEncode。
在Html属性中输出：<div id="abc name="$var"></div> 攻击方法：<div id="abc" name=""><script>alert(/XSS/)</script><""></div>
防御方法：采用HtmlEncode。 在OWASP ESAPI中推荐了一种更严格的HtmlEncode：除了字母、数字外，所有的特殊字符都被编码成HTMLEntities。
在<script>标签中输出：<script>var x = "";alert(/XSS/);//";<script>
防御方法：使用JavascriptEncode。
在事件中输出：与在<script>标签中输出类似：<a href=# onclick="funcA('');alert(/XSS/);//')">test</a>
防御方法：使用JavascriptEncode。
在CSS中输出：方式多样
防御方法：尽可能禁止用户可控制的变量在"<style>标签"、"html标签的style属性"、"CSS文件"中输出。如果一定有此需求，则推荐使用 OWASP ESAPI 中的encodeForCSS()函数。除了字母、数字外的所有字符都被编码成十六进制形式“\uHH”。
在地址中输出：比较复杂。一般是在URL的path(路径)或者search(参数)中输出，使用URLEncode即可。
<a href="http://www.evil.com/?test=$var">test</a> --> <a href="http://www.evil.com/?test=" onclick=alert(1)"" >test</a>
整个URL都被用户完全控制时，URL的Protocal(http://) 和Host (www.evil.com)部分不能使用URLEncode，可能会构造伪协议实施攻击：
<a href="$var"></a> --> <a href="javascript:alert(1);"></a>
防御方法：先检查变量是否以”http“开头（如果不是则自动添加），以保证不会出现伪协议类的XSS攻击。在此之后，再对变量进行URLEncode。
e：处理富文本 网站允许用户提交一些自定义的HTML代码，称之为”富文本“。比如用户在论坛里发帖，帖子的内容有图片、视频、表格等，这些”富文本“的效果都需要通过HTML代码来实现。
防御方法：与输入检查的思路一致。使用"XSS Filter"：“事件”应该被严格禁止；一些危险的标签：<iframe>、<script>、<base>、<form>等也应严格禁止；在标签、属性、事件的选择上，应该使用白名单，避免使用黑名单。比如，只允许<a>、<img>、<div>等比较“安全”的标签存在。可使用一些开源项目：Anti-Samy 是OWASP上的一个开源项目，可使用于Java、.NET等。 HTMLPurify可使用于PHP中。
f：防御DOM Based XSS 如果是输出到事件或脚本，要做一次javascriptEncode；如果是输出到HTML内容或者属性，要做一次HtmlEncode。
处理XSS注入的时候，不仅仅要转义或删除特殊的 HTML 标记和符号，如尖括号<>，如script，如iframe等，还需要过滤 JavaScript 事件所涉及的大量属性，前端一般使用XSS Filter 设置“白名单”。过滤的事件大致如下：
| 属性 | 当以下情况发生时，出现此事件 |
| onabort | 图像加载被中断 |
| onblur | 元素失去焦点 |
| onchange | 用户改变域的内容 |
| onclick | 鼠标点击某个对象 |
| ondblclick | 鼠标双击某个对象 |
| onerror | 当加载文档或图像时发生某个错误 |
| onfocus | 元素获得焦点 |
| onkeydown | 某个键盘的键被按下 |
| onkeypress | 某个键盘的键被按下或按住 |
| onkeyup | 某个键盘的键被松开 |
| onload | 某个页面或图像被完成加载 |
| onmousedown | 某个鼠标按键被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseup | 某个鼠标按键被松开 |
| onreset | 重置按钮被点击 |
| onresize | 窗口或框架被调整尺寸 |
| onselect | 文本被选定 |
| onsubmit | 提交按钮被点击 |
| onunload | 用户退出页面 |
三、CSRF攻击
1、总述
2、攻击原理
CSRF攻击跨站请求伪造。 本质：重要操作的所有参数都是可以被攻击者猜测到的。攻击者预测出URL的所有参数与参数值，才能成功地构造一个伪造的请求。
3、防御CSRF攻击
防御方法： 验证码、 Referer Check 检查请求是否来自合法的源（可被伪造）。
通用方法：Token 使用Anti-CSRF Token 在URL中保持原参数不变，新增一个参数Token。Token的值是随机的（必须使用足够安全的随机数生成算法，或者采用真随机数生成器），其为用户与服务器所共同持有，可以放在用户的Session中，或者浏览器的Cookie中。 注意保密，尽量把Token放在表单中（构造一个隐藏的input元素），以POST提交，避免Token泄露。
注意：如果网站有XSS漏洞或者一些跨域漏洞，可能导致Token泄露。
在XSS攻击下，读取Token值，然后再构造出一个合法的请求，可以称为：XSRF。
四、HTML5安全
HTML5新增的一些标签和属性，使XSS攻击产生了新的变化，如果原来的XSS Filter是用的“黑名单”，就会导致攻击者用HTML5新增的标签来进行攻击，如果用的“白名单”，这方面的隐患就会少一些。
五、常见前端框架对XSS攻击的防范
React 默认会转义所有字符串。
AngularJS 使用AngularJS中的SCE来防御XSS攻击。
六、Web安全扫描器
商业软件：IBM Rational Appscan、WebInspect、Acunetix WVS
免费软件：W3AF、SkipFish
--------------------------------------------------------------------------------------------
参考资料：《白帽子讲Web安全》 吴瀚清
《Web前端黑客技术揭秘》 钟晨鸣 徐少培
《XSS跨站脚本攻击剖析与防御》 邱永华
《OWASP Top 10-2013》
