二、web安全(xss/csrf)简单攻击原理和防御方案(实战篇)

58,835 阅读3分钟
介绍:最近在学习node,就顺便写了web安全攻击的示例以及解决方案。参考了一些资料,自己理了一下思路,代码不是很完善,node也是在摸索阶段,请见谅。希望对那些对于安全不是很了解,后台知识不清楚的同学有所帮助。

解决方案看上一篇文章(理论篇),这里主要演示一下攻击原理

代码:git@github.com:StyLanQP/web-Safe.git

github地址github.com/StyLanQP/we…

项目代码如下:

app: 正常的网站
hack:模拟黑客攻击的网站
使用技术: node+express+react+mysql

项目介绍

1.代码目录

WechatIMG3062.jpeg

2. 建立数据库

WechatIMG31.jpeg

node app/mysql.js 先执行这个文件创建表和数据

WechatIMG32.jpeg

如图所示

WechatIMG30.jpeg

一、XSS(Cross-Site Scripting) 跨站脚本攻击

原理:恶意攻击者往 Web 页面里插入恶意可执行网页脚本代码,当用户浏览该页之时,嵌入其中 Web 里面的脚本代码会被执行,从而可以达到攻击者盗取用户信息或其他侵犯用户安全隐私的目的。

1.这时候运行项目npm run start 打开home页面

WechatIMG33.jpeg

WechatIMG34.jpeg

WechatIMG36.jpeg

这个时候home页面是用react模板写的,React DOM 会在渲染的时候把内容(字符串)进行转义,所以字符串形式的标签是不会作为 HTML 标签进行处理的,所以输入script是不能执行的

所以加了一个利用ejs模板加载的页面xss.html(无论是从url上输入script标签例如http://localhost:4000/xss?text=还是直接获取数据库存储的代码都会被执行)

WechatIMG38.jpeg WechatIMG37.jpeg

WechatIMG39.jpeg

2.开始利用document.cookie攻击,按照刚才的方式把改成进行攻击

打开http://localhost:4000/xss会看到请求了http://localhost:5000/xss.html的接口 WechatIMG41.jpeg

在控制台可以看到5000端口的黑客网站已经打印出来了cookie,利用cookie我们完全可以在控制台设置cookie直接登录网站 WechatIMG42.jpeg

二、CSRF 跨站点伪造

原理: 诱导用户打开黑客的网站,在黑客的网站中,利用用户登录状态发起跨站点请求。

1.在登录状态下,打开localhost:5000/csrf.html页面,在控制台上我们看到了setDataList的请求,这个就是提交内容的接口,在4000的home页面可以看到内容改变了 image.png

正常网站内容被更改 WechatIMG44.png

image.png

解决方案(生成token, 接口带上nonce和timesTamp)

WechatIMG47.jpeg

WechatIMG46.jpeg

三、点击劫持

原理:用户在登陆 A 网站的系统后,被攻击者诱惑打开第三方网站,而第三方网站通过 iframe 引入了 A 网站的页面内容,用户在第三方网站中点击某个按钮(被装饰的按钮),实际上是点击了 A 网站的按钮。

  1. 打开http://localhost:5000/clickHijack.html点击按钮,实际上是点击了http://localhost:4000/home的关注按钮,因为iframe嵌入了4000的页面 30.jpeg

31.jpeg

WechatIMG50.jpeg

解决方案,对iframe嵌入做限制

一般现代浏览器支持Content-Security-Policy,可以替代老浏览器的X-Frame-Options image.png

参考文献

基于timestamp和nonce的防重放攻击

HTTP协议安全头部X-Content-Type-Options引入的问题

夏老师的web安全视频,朋友发的,放不上链接

web安全csrf防御和攻击