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

解决方案看上一篇文章（理论篇），这里主要演示一下攻击原理

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

github 地址：github.com/StyLanQP/we…

项目代码如下：

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

项目介绍

1.代码目录

2. 建立数据库

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

如图所示

一、XSS（Cross-Site Scripting） 跨站脚本攻击

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

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

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

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

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

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

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

二、CSRF 跨站点伪造

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

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

正常网站内容被更改

解决方案（生成 token， 接口带上 nonce 和 timesTamp）

三、点击劫持

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

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

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

参考文献

基于 timestamp 和 nonce 的防重放攻击

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

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

web 安全 csrf 防御和攻击

信息

作者：蓝蓝酱 链接：https://juejin.cn/post/6953059119561441287 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。