开年遇到的第一个问题就是解决XSS攻击>_<,可见要时刻保证网站的安全性至关重要。做好网站安全，不仅维护网站的稳定性，更保证用户数据的一致性。对此，总结一下笔者在工作中遇到的安全问题以及防御方法。

前端中常见的两种网站应用安全漏洞攻击的方式是 XSS 与 CSRF,本文详细介绍两种攻击方式的概念、原理以及防御方式。

XSS

XSS(Cross-site scripting)跨站脚本攻击是恶意用户在网站中注入的脚本，当正常用户打开网站时受到影响并可能获取用户cookie等信息一种安全攻击行为。常见的例子是用户进入某个网站的时候一直弹出alert框等。
常见的 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)"/>）的查询参数来显示用户名等。

针对 XSS 攻击，经常有以下两个方式来进行防御：

• 设置重要的cookie信息为 httpOnly 对于重要的 cookie字段，如：可以通过 cookie 某个字段和某个接口获取好友关系的，需要将其设置为 httpOnly,使得恶意用户无法获取。
• 对输入进行检测和转义 对用户输入的或者从链接获取参数需要展示到页面中需要校验合法性和使用转义函数进行转义，如常见的函数如下：

function escHTML(str) {if (!str) return '';return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/x27/g, ''').replace(/x22/g,'&quto;');
}

CSRF

CSRF(Cross-site request forgery)是一种攻击，迫使用户在受信任网站上执行不需要的一些操作。具体过程如下：

1. 用户向信任站点如example.com发送请求
2. 用户验证通过、获得信任站点的身份信息，并放入cookie中，用户此时可以在站内进行其他请求;
3. 用户未退出登录example.com,然后访问hack.com网站，该网站返回攻击性代码并且在页面中存在访问example.com的请求;
4. 浏览器在用户可能不知情的情况下向example.com发送请求;
5. 由于同域名可以带上cookie信息，因此信息认证通过，请求伪造成。

针对 CSRF 攻击，常用的防御方式如下：

• 检测请求来源 在请求头中有一个refree字段，refree记录了发送请求的域名，比如：hack.com向example.com中发送请求，那么refree就为hack.com，只要在处理请求中做相应的校验就可以中断请求。
• 加入token校验 crsf之所以能够伪造请求成功，其原因之一在于所有的用户信息放于cookie中；因此可以在每次请求中加入token，然后后台进行校验，如果校验通过则进行处理。生成token方式之一如下：

function getToken (token) {var str = token || '';var hash = 5381;for (var i = 0, len = str.length; i < len; ++i) {hash += (hash << 5) + str.charCodeAt(i);}return hash & 0x7fffffff;
}

具体攻击示例点击查看