网络异常，图片无法展示
|
前言
最近重新整理了下自己的前端相关知识，在前端安全这个领域由于最近两年做的事内部项目，对此没有太多的实际应用，借此机会重新去了解下，俗话说温故而知新，从故有的知识中总结获取新的知识才是我们进步的基础。
前端安全
跨站点请求伪造（CSRF）
在国内互联网刚发展阶段，网站的CSRF漏洞还是比较多的。假设我们是攻击者，那当被攻击网站满足以下几个条件是，我们就可以顺利的进行CSRF攻击：
- 用户登录被攻击网站，并且保存的cookie信息
- 用户打开另一个tab访问我们的恶意网站
- 被攻击网站未做任何CSRF防护
攻击流程
当你的网站满足上面三个条件了，那当前登录用户的信息对于恶意网站而言就是完全透明的了，下面说说攻击流程：
网络异常，图片无法展示
|
- 用户打开A网站
- 登录A（XSRF漏洞）
- 生成登录cookie
- 同个浏览器B（伪造攻击网站）
- B网站通过脚本获取A的cookie并发送给攻击者后台
- 攻击者拿到cookie 通过cookie获取用户信息
如何防范
通过分析可以发现XSRF攻击方式是通过钓鱼网站拿到cookie，然后攻击者进行非法操作，解决方式就是让攻击者拿不到cookie或者验证方式不仅仅只是cookie。
- 尽量使用POST，限制GET，这样可以增加攻击难度，攻击者必须伪造form表单才能请求。
- 将cookie属性设置为httponly，这样攻击者就获取不到cookie了。
//nodejs express为例 res.cookie('userinfo','*******',{maxAge:60000,path:'/news',httpOnly:true})
- 服务端增加token验证，每次登录时服务端生成token，每次的请求对token进行校验
- 通过Referer识别，服务端通过header中的refer获取来源地址，如果是非法的则拒绝操作。
String referer = req.headers.referer
跨站脚本攻击（XSS）
反射型
- 用户通过攻击者的提供的链接登录被攻击的A网站
- A网站对链接未做任何字符串校验
存储型
- A网站是博客，论坛类的网址，并可以输入内容
- A网站对输入的内容未做任何字符串校验
- 用户浏览攻击者发布的内容
DOM型
- 用户通过攻击者提供的wifi或其他网络打开A网站
- 用户点击到攻击者插入A网站的DOM
攻击流程
网络异常，图片无法展示
|
- 攻击者伪造A网站链接
- 用户打开A网站
- 插入攻击者的攻击js
- 获取用户信息进行不法操作
存储型
- 攻击者A网站输入攻击脚本代码或sql语句存入数据库（如博客 论坛网站）
- 用户打开A网站
- 用户浏览到攻击者的页面
- 获取用户信息进行不法操作 DOM型（可以说是基于存储型的）
- 攻击者提供的数据源（cdn劫持，数据库存储的非法字符）
- 数据通过一个不可信赖的数据源进入 Web 应用程序
- 用户浏览加载不可信赖的数据源攻击脚本
- 获取用户信息进行不法操作
如何防范
通用防御手段：
- 在输出html时，加上Content Security Policy的Http Header （作用：可以防止页面被XSS攻击时，嵌入第三方的脚本文件等） （缺陷：IE或低版本的浏览器可能不支持）
- 在设置Cookie时，加上HttpOnly参数 （作用：可以防止页面被XSS攻击时，Cookie信息被盗取，可兼容至IE6） （缺陷：网站本身的JS代码也无法操作Cookie，而且作用有限，只能保证Cookie的安全）
- 在开发API时，检验请求的Referer参数 （作用：可以在一定程度上防止CSRF攻击） （缺陷：IE或低版本的浏览器中，Referer参数可以被伪造）
反射型：
后台渲染html时候需要以下函数过滤：
- htmlspecialchars函数（php）
- htmlentities函数
- HTMLPurifier.auto.php插件（php）
- RemoveXss函数
前端通过后台api渲染页面时候：
- 尽量使用innerText(IE)和textContent(Firefox),也就是jQuery的text()来输出文本内容
- 必须要用innerHTML等等函数，则需要做类似php的htmlspecialchars的过滤
持久型：
- 服务端处理存储的数据，将可能执行的脚本字符转成字符串，如下：
function htmlspecialchars(str){ \ str = str.replace(/&/g, '&'); \ str = str.replace(/</g, '<'); \ str = str.replace(/>/g, '>'); \ str = str.replace(/"/g, '"'); \ str = str.replace(/'/g, '''); \ return str; \ }
DOM型： DOM型XSS主要是由客户端的脚本通过DOM动态地输出数据到页面而不是依赖于将数据提交给服务器端，而从客户端获得DOM中的数据在本地执行，因而仅从服务器端是无法防御的。其防御在于：
- 避免客户端文档重写、重定向或其他敏感操作，同时避免使用客户端数据，这些操作尽量在服务器端使用动态页面来实现；
- 分析和强化客户端JS代码，特别是受到用户影响的DOM对象，注意能直接修改DOM和创建HTML文件的相关函数或方法，并在输出变量到页面时先进行编码转义，如输出到HTML则进行HTML编码、输出到
点击劫持
是什么
一些恶意网站使用iframe把一些网站嵌入自己的网站中，然后把 iframe 设置透明，用定位的手段的把一些引诱用户在恶意网页上点击。这样用户不知不觉中就进行了某些不安全的操作。
攻击流程
- 攻击者伪造使用iframe伪造网站
- 用户在伪造的网站上进行不安全的操作
- 攻击者通过不安全操作获取想要的信息
如何防范
- js防范：判断上层路由地址是否和原网站的地址保持一致
if (top.location.hostname !== self.location.hostname) { alert("非法访问！"); top.location.href = self.location.href; }
- 通过header配置防止：
//nginx add_header X-Frame-Options SAMEORIGIN; //nodejs res.setHeader('X-Frame-Options','DENY');
总结
互联网发展迅速，前端开发的需求量也与日俱增。如何开发一个安全易用的应用是我们每个前端开发者必修的课题，因此掌握常见的网站攻击手段，是我们防御攻击的最有效方法之一。在前端安全的问题上，没有任何一名开发者能保证自己开发的应用毫无漏洞，我们能做的就是杜绝已知的漏洞，了解可能会有的漏洞，路漫漫其修远兮，各位一起努力营造一个安全健康的互联网环境吧。
