Web开发是一个永远不会退出历史舞台的行业。事实上，随着新技术的到来，它将会随着时间不断地发展和更新，Web安全也是我们不可忽视的问题。
设想下面一个场景，一些公开的qq群里突然传出了，一些吸引你的邮件内容（手动🐶），然后你经不住诱惑，你打看开了发现自己的账号被盗了。然后在你的好友，群聊里发一堆奇奇怪怪的东西，对吧。想想都生气。
我就大概谈一下xss,csrf,sql注入，这些常见问题吧。本次先以xss入手讲解。
xss
首先，什么是xss,这是夸站点脚本攻击。主要是由于网站开发人员对于，表单提交过于信任，导致一些黑客可以把一些js脚本注入进html中从而出现的问题。一般这些攻击用于修改网页显示，盗取cookie等。
举例
这里我用egg框架举一个例子：
async get() { const { ctx } = this; const {content} = ctx.request.body //接受提交过来的信息，没有做任何验证就存到了数据库。 const result = await this.app.mysql.insert('posts', { content,id:12 }); } async render() { //从数据库里面得到的信息也不过滤，直接渲染。 const post = await this.app.mysql.get('posts', { id: 12 }); this.ctx = '<div>${post}</div>' } 我们设想，万一 传过来的content是一些恶意脚步 ‘’. 那其他人在访问的时候可想而知是吧。 在比如，我这里的恶意脚步，可以用于获取你的cookie，等等，是吧。
相信这个例子过后，大家有一定的了解。 那么介绍一下xss攻击的分类，可以分为三种存储型、反射型和 DOM 型
分类
存储型
一般是攻击人通过一些手段，先把恶意的代码放到数据库中。如上述的render()的函数，没有特殊处理，这样在加载页面时候，浏览器无分辨的去执行。 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。
这种攻击常见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等。
反射型
用户将一段含有的请求提交给 Web 服务器，Web 服务器接收到请求时，又将恶意代码返回给了浏览器端， 在现实生活中，一般会给出一些链接，诱发你去发起请求。所以对于一些链接我们一定要慎之又慎。
比如
async render() { //从url里面获取传参信息。 const param = this.ctx.query.param; this.ctx.body = '<div>${param}</div>' } 访问 http://xxx/path?keyword="><script>alert('哈哈，又上钩了');</script> 结果明显。
Web 服务器数据库不会存储反射型 XSS 攻击的恶意脚本，这是和存储型 XSS 攻击不同的地方。
DOM型
基于 DOM 的 XSS 攻击是不牵涉到页面 Web 服务器的。它的特点是在 Web 资源传输过程或者在用户使用页面的过程中修改 Web 页面的数据。
比如前端的代码中存在，取url的内容然后用于渲染页面的代码，就很有可能会出现dom型攻击。 如下。
http://xxx/path?keyword="><script>alert('哈哈，又上钩了');</script> function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] == variable){return pair[1];} } return(false); } //获取参数的函数 const content = getQueryVariable(keyword) const div =document.createElement('div'), div.innerHTML = content; document.body.append(div); 相比前两种攻击，DOM 型 XSS 攻击，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，
这时候可以利用一些工具(如Burpsuite)扫描目标网站所有的网页并自动测试写好的注入脚本等。
那么如何避免呢？
既然是过滤问题，对于明确的输入类型，例如数字、URL、电话号码、邮件地址等等内容，进行输入过滤还是必要的。 甚至的话我们可以从源头上解决问题，不在html中直接插入，采用纯前端渲染，不拼接html。
还有一些其他办法
1. 利用httponly
可以将cookie等敏感信息设置为httponly，禁止Javascript通过document.cookie获得。这样其实不是防止了xss攻击，是防范了攻击后造成的窃取问题。
2. 利用CSP
它是内容安全策略是http协议中协议头的一个字段，可以通过html的meta标签进行控制。只要在返回的http头中定 义：'Content-type':'text/html','Content-Security-Policy':'default-src http: https:' 那么返回的html文件就只能通过http和https外链加载js脚本的方式来执行js代码，而不能执行内联的js代码。这样就防止了恶意内联js代码的执行。
完结撒花‼️
原文链接：https://blog.csdn.net/qq_60845079/article/details/124789673
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/17962
