这是我参与「第四届青训营」笔记创作活动的第3天。
随着互联网的发达，各种WEB应用也变得越来越复杂，满足了用户的各种需求，但是随之而来的就是各种网络安全的问题。一旦遇到了黑客袭击，我们的个人隐私就会被窃取。因此，作为一名前端开发工程师，我们要懂得如何正确有效的维护网络的安全，争做一名合格的网络骑士，守护在Web开发中的安全。
1.XSS防御
XSS防御的基本原则为：在客户端中永远不要信任用户提交的任何内容，在使用者的数据库中，不要将用户提交的内容直接转换成DOM，而是转换成string的形式。防御XSS的工具：
前端:- 主流框架默认防御XSS
- google-closure-library
- DOMPurify
防御XSS的措施：
对输入内容的特定字符进行编码，前端后端都可以对传入的内容进行过滤，去掉带javascript等字段的输入，如下例。//自定义跳转链接
<a href="javascript:alert('xss')"</a>
//动态生成script
const blob = new Blob(
[script],
{ type:"text/javascript"},
);
根据CSP(Content Security Policy)，首先判断哪些源（域名）被认为是安全的，来自安全源的脚本可以执行，否则直接报错。
//服务器的相应头部
Content-Security-Policy: script-src'self' 同源
Content-Security-Policy: script-src'self' https://domain.com
//浏览器meta
<meta http-equiv="Content-Security-Policy" content="script-src self">
2.CSRF防御
Token验证
服务器发送给客户端一个Token。如果这个Token审核不通过，那么服务器拒绝这个请求；如果Token审核通过，那么服务器接收这个请求并执行。if(请求不合法）
then(服务器拒绝页面请求)
if(请求来自合法页面)
then(服务器接收过页面请求)
then(服务器可标识)
双重Cookie验证
将Cookie中的参数取出来，加入到请求参数中，服务端进行校验，如果未发现附加额外的Cookie中的参数，即审核不通过，拒绝请求执行。同时可以利用Cookie中的一个属性SameSite用来限制第三方Cookie，若需依赖Cokkie的第三方服务（如识别用户登录态发布弹幕），样例如下。
Set-Cookie:SameSite=None; Secure;
Referer头验证
一旦在HTTP头中的Referer字段属性检测到请求来源地址的不安全性，Referer即可改变从而拒绝请求。3.SQL防御
找到项目中查询SQL的地方，使用prepared statement,组织SQL注入。PREPARE q FROM'SELECT user FROM usersWHERE gender=?';
SET @gender ='female';
EXECUTE q USING @gender;
DEALLOCATE PREPARE q;
- 最小权限原则
- 建立允许名单+过滤
- 对URL类型参数进行协议、域名、ip等限制
My Personal Summary
Web开发安全无小事，使用的依赖（npm package，甚至是NodeJS）都有可能成为最薄弱的一环。因此，我们一定要重视网络安全，成为一名优秀的网络骑士，书写网络安全的华章。山海自有归期，风雨自有相逢，意难平终将和解，万事终将顺意。我用1024行代码书写浪漫，致敬每一个在梦想的路上奔跑的少年~
