目录
- XSS攻击
- 反射型
- 存储型
- DOM型
- 总结
- CSRF攻击
- 点击劫持
- CDN带来的风险
- 文件上传漏洞
- 本地存储信息泄露
XSS攻击
XSS(Cross-Site Scripting,跨站脚本)，是比较常见的安全漏洞问题，其主要的攻击方式是通过表单或者页面url参数来注入一些可执行的代码，页面中用到这些字段的地方，如果没有经过处理，就会把他们当做代码来执行，从而造成安全事故。
危害：
- 盗取token
- 盗取账户信息
- 恶意软件下载
- 键盘下载
- 广告引流
根据攻击的影响范围，我们可以分为三类：DOM型、反射型、存储型，下面分别介绍这三种攻击方式。
反射型
程序没有验证用户输入的内容，或者没有过滤url参数，直接作为HTML的一部分进行展示，如果内容带有可执行的恶意代码，就构成了反射型xss攻击。
特点：
不会存入数据库，一般都是由用户点击带特定参数的地址才会受到攻击，只能影响到执行脚本的用户。
防范：
- 从程序员的角度来说，我们需要对一切有赋值页面内容的地方进行参数过滤；
- 从用户的角度上来说，对于陌生的链接，千万不要随意点开，维护网络安全，光靠程序员是没有用的！
存储型
程序通过web请求获取了带有攻击性的内容，在没有检测和过滤的情况下将其存入了数据库，在下一次获取这些数据时候，也没有进行过滤，就展示给了用户。
特点：
因为恶意代码被保存到数据库，所以会持久性攻击用户，只要点开页面的用户都会受到影响
出现位置：
- 留言板
- 评论区
- 用户资料
- 文章博客
防范：
对于用户的输入进行合理的验证和过滤，如对特殊字符（javascript、
| 字符 | 转义后的字符 |
|---|---|
| & | & |
| < | < |
| > | > |
| " | " |
| ’ | ' |
| / | / |
DOM型
DOM型攻击指的是在前端页面中，通过url解析参数或者js脚本直接插入到DOM树中。
特点：
不经过后台渲染，可以跳过后台过滤，在只有前端的情况下也可以攻击。
总结
服务端防范
引包解决
前端防范
- 输入检查： 攻击者可能输入XSS的地方
1.页面中所有的input框
2.window.location（href、hash等）
3.window.name
4.document.referrer
5.document.cookie
6.localstorage
7.XMLHttpRequest返回的数据
- 输出检查: 触发XSS的地方
1.document.write
2.xxx.innerHTML=
3.xxx.outerHTML=
4.innerHTML.replace
5.document.attachEvent
6.window.attachEvent
7.document.location.replace
8.document.location.assign
- 针对Vue项目，可以使用
vue-xss对文本进行过滤
npm install vue-xss
// mani.js
var options = {// 默认白名单参考 xss.whiteListwhiteList: {a: ['href', 'style'],img: ['src', 'alt'],...},stripIgnoreTag: true, // 去掉不在白名单上的标签 true：去掉不在白名单上的标签stripIgnoreTagBody: ['script', 'style'] // 去掉不在白名单上的标签及标签体// ['tag1', 'tag2']：仅去掉指定的不在白名单上的标签onTagAttr: function () {// todo},...
}import VueXss from 'vue-xss'
Vue.use(VueXss, options)
<!-- *.vue -->
<div v-html="$xss(content)"></div>
/** *.vue中的js */
this.$xss(content)
CSRF攻击
CSRF（Cross Site Request Forgery, 跨站域请求伪造），通过盗用用户的身份（cookie），发送恶意请求。
危害：
以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账等
攻击流程：
防范：
-
服务端接受数据包能够获取到发送请求的Referer（来源地址），可以通过对Referer值的控制用来加强防御，比如对一些敏感接口，需要判断来源请求必须是某一个指定域才可以；
-
使用token，放弃cookie。因为CSRF成功的原因在于站点对于用户身份的辨别依赖于cookie，因此攻击者可以再不知道用户口令的情况下直接使用用户的cookie来通过验证。如果我们通过登录的方式来让后台随机生成一个token，每次发送请求的时候都携带这个token，后台进行校验，如果token不存在或者token验证失败，就拒绝访问。
但是token同样会有泄露的风险，所以通常情况下，我们会采用方法1+方法2结合的方法来进行防御，或者通过token中存入当前用户的ip和代理来防御。
点击劫持
点击劫持 (Clickjacking) 技术又称为界面伪装攻击 (UI redress attack )，是一种视觉上的欺骗手段。攻击者使用一个或多个透明的 iframe 覆盖在一个正常的网页上，然后诱使用户在该网页上进行操作，当用户在不知情的情况下点击透明的 iframe 页面时，用户的操作已经被劫持到攻击者事先设计好的恶意按钮或链接上。攻击者既可以通过点击劫持设计一个独立的恶意网站，执行钓鱼攻击等；也可以与 XSS攻击相结合，突破传统的防御措施，提升漏洞的危害程度。
防范：
- 服务端设置X-FRAME-OPTIONS 机制，该机制有两个选项：DENY 和 SAMEORIGIN。DENY表示任何网页都不能使用 iframe 载入该网页，SAMEORIGIN表示符合同源策略的网页可以使用 iframe载入该网页。如果浏览器使用了这个安全机制，在网站发现可疑行为时，会提示用户正在浏览 网页存在安全隐患，并建议用户在新窗口中打开。这样攻击者就无法通过 iframe 隐藏目标的网页。
- 对于重要的接口，多设计验证码，这样能够防止点击一下就进行操作的风险。
扩展
对于iframe，除了点击劫持的风险外，还有可能出现这样的情况：我们的页面中引入iframe加载第三方网站，因为iframe里的东西不受我们控制，如果这个网站已经被人黑了，很有可能就会对我们造成影响。
为了避免这类操作，我们尽量少用iframe加载内容，如果确定有必要，请控制好iframe的权限：给iframe添加sandbox属性，配置我们需要的最小权限
- allow-forms：允许iframe中提交form表单
- allow-popups：允许iframe中弹出新的窗口或者标签页（例如，window.open()，showModalDialog()，target=”_blank”等等）
- allow-scripts：允许iframe中执行JavaScript
- allow-same-origin：允许iframe中的网页开启同源策略4
CDN带来的风险
项目中使用cdn加载静态资源虽然能够提升加载性能，但是这些静态资源也有可能被污染，从而我们加载并执行了攻击者想让我们执行的内容。
防范：
为了避免这些，我们尽量不使用cdn，或者是在使用前对资源的安全性进行验证
文件上传漏洞
文件上传漏洞是指攻击者跳过文件校验，上传了一个可执行的文件到服务器并执行。这里上传的文件可以是木马，病毒，恶意脚本或者WebShell等。
防范：
- 前后端都要严格控制上传文件的类型；
- 在上传时按照一定规则对文件重命名；
- 在服务器上对放置文件的目录设置为不可执行
本地存储信息泄露
平常写代码的时候，我们经常会往localStorage或sessionStorage中存一些内容，如果未经考虑，将前端加密公钥、用户密码等关键信息保存到这里，就很有可能导致信息泄露，给攻击者营造机会。
防范：
敏感信息不要保存到localStorage、sessionStorage中，如果涉及到一些必须保存的内容，请一定要加密处理。
