web安全随笔 -- 前端如何进行安全防护？
前端如何进行安全防护？
- 1. XSS 攻击
- 2. 前端废弃功能代码，注释类代码问题
- 3. csrf 跨站请求伪造攻击
- 4. 重要接口请求时禁止缓存
- 5. 浏览器存储 localStroage、sessionStroage
- 6. 用户名、密码前后台传输进行加密操作
- 7. 禁止将不可信的字符串当做代码执行
- 8. 代码的压缩、混淆、丑化
- 9. URL 白名单限制
- 10. DOS 攻击
- 11. 越权问题
- 12. 总结
web 安全问题是一门很大的学问，攻击与防御手段更像是一场场精彩的博弈，而很多人对此了解的却不多，安全攻击更多的是 服务端 数据库，把自己项目的服务端与数据库做的跟铁桶一样坚固非常关键，那么前端工程师需要做什么呢？
前端工程师需要考虑两个方面： 1. 与浏览器交互的安全性； 2. 前端代码自身存在的安全漏洞；
1. XSS 攻击
XSS全称是Cross Site Scripting即跨站脚本，当目标网站目标用户浏览器渲染HTML文档的过程中，出现了不被预期的脚本指令并执行时，XSS就发生了…
听不懂？？怎么办？
通过具体案例讲解，保证大家透彻了解什么是 XSS ！
项目中有一个表单提交功能，需要输入用户信息，输入完成之后点击提交，在列表处可以看到用户头像，鼠标放置到用户头像上，展示提示浮层，展示用户刚才输入的信息：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./reset.css">
<style>
.show-title {
width: 100px;
height: 100px;
background: #0094ff;
margin-top: 20px;
}
</style>
</head>
<body>
<label>
<span>用户信息: </span>
<input type="text" id="text-xss">
</label>
<div class="show-title">用户头像</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function () {
$('.show-title')[0].addEventListener('mouseenter', function () {
$(this).append($('#text-xss').val());
});
})
</script>
</html>
我们在页面的输入框中输入： ，然后将鼠标放到用户头像上，发现js代码执行了！
问题解析：
- 我们直接使用了 jQuery 的 append 方法，将不可信的用户输入直接添加到了我们的DOM元素中；
- 假设我们将表单提交至数据库，而数据库也没有对表单数据做校验，那么，所有能访问到受害者用户头像的用户都将成为新的受害者，引发严重的 存储型 XSS 攻击；
- 恶意攻击者通过 burpsuite工具（https://www.cnblogs.com/loopkep/p/11100506.html）, 进行远程拦截修改用户输入信息为恶意脚本，数据库没有做校验，存储，前台请求数据直接返回，仍然触发存储型 XSS 攻击。
防护手段：
- 要求后台开发人员必须对用户输入的不可信数据做校验，或者脱敏处理；
- 根据项目实际需求，要求前端开发人员对用户输入做输入限制，限制输入特殊字符，限制输入字符长度；
- 前后端数据传输时按要求对特殊字符进行转码处理（https://www.cnblogs.com/tugenhua0707/p/10909284.html）
2. 前端废弃功能代码，注释类代码问题
可能项目前期做了部分需求，后期对这部分需求进行了删减，但是项目代码中只是采用了注释的方式，或者通过 display: none; 的方式进行了简单隐藏，这个也是不安全的！需要对其完整的删除，避免恶意攻击者找到漏洞；
3. csrf 跨站请求伪造攻击
简单理解为：攻击者盗用了你的身份，以你的名义发送恶意请求，比如实现转账到 xxx 账户，你登录某一银行网站，进行了转账操作，你本地生成了对应的 cookie 值，恶意攻击者然后诱导你登录恶意网站，悄然利用你的 cookie 给银行网站进行发送转账到他的账户；
防护方法：
- 在 meta 标签添加 token 标识，由后台控制产生随机数；
- 在 ajax 发送请求头里面添加唯一，随机的token标识符，这样恶意用户使用前面用过的请求再次操作时 token 标识不对，攻击失败；
4. 重要接口请求时禁止缓存
实现逻辑为： 在接口 URL 请求时后面拼接随机产生的标识符，比如： URL + ‘?time=’ + new Date()，这样浏览器就不会进行接口请求缓存；
5. 浏览器存储 localStroage、sessionStroage
禁止在客户端存储敏感数据，尽量避免使用客户端存储功能，如果要使用，尽量使用sessionStroage，并且在使用结束后及时进行清除；
6. 用户名、密码前后台传输进行加密操作
通过 burpsuite工具可以拦截到接口传参，有机会拦截到用户名，密码，那么安全起见，有必要对用户输入的用户名，密码进行加解密操作，https://blog.csdn.net/frankcheng5143/article/details/52078764/
7. 禁止将不可信的字符串当做代码执行
禁止使用 eval 、 new Function 等将不可信的数据（用户输入）拼接后当做代码执行，使用也是需要进行校验和脱敏处理；
8. 代码的压缩、混淆、丑化
为了防止线上环境代码被恶意攻击者轻易阅读，企图寻找漏洞，所以最好将前端代码进行压缩、丑化操作（webpack 打包工具即可完成）；
9. URL 白名单限制
防止钓鱼攻击，即URL重定向，需要确定当前项目需要访问的固定URL，除此之外的URL都为非正常URL，强制跳转登录页，或者报错页面；
10. DOS 攻击
DoS攻击是指故意的攻击网络协议实现的缺陷或直接通过野蛮手段残忍地耗尽被攻击对象的资源，目的是让目标计算机或网络无法提供正常的服务或资源访问，使目标系统服务系统停止响应甚至崩溃，这些服务资源包括网络带宽，文件系统空间容量，开放的进程或者允许的连接。这种攻击会导致资源的匮乏，无论计算机的处理速度多快、内存容量多大、网络带宽的速度多快都无法避免这种攻击带来的后果…
常见的DOS攻击案例：
- 炸弹攻击：恶意攻击者将很大的文件进行反复压缩，直到压缩到项目允许上传的文件大小为止， 然后进行上传文件操作，后台采用递归方式进行文件解压缩，最后撑爆服务器。
- 输入框输入攻击： 对输入框输入很多字符，如果前台，后台没有对字符做长度限制，那么也会导致服务报错；
- 表格数据获取：一般表格数据都有分页功能，利用 burpsuite 工具修改传参，将数据大小修改为很大，这样一次性可以得到所有数据，导致资源全部泄露。
11. 越权问题
横向越权：横向越权指的是攻击者尝试访问与他拥有相同权限的用户的资源
纵向越权：纵向越权指的是一个低级别攻击者尝试访问高级别用户的资源
12. 总结
假如将计算机比作一个人，那么人也会偶尔生病，发现新的病种，甚至发现流行病，那么人就需要吃药，打疫苗等。一个道理，计算机安全攻击与防御会一直伴随项目的开发，没有人敢保证系统没有任何安全问题，但是，作为一个前端工程师，如果能考虑到以上所有安全问题，那么项目 web 端还是有一定的保证的，O(∩_∩)O哈哈~