专栏首页front-end technology作为前端,你应该知道的安全知识之xss攻击!

作为前端,你应该知道的安全知识之xss攻击!

环境

  1. npm install
  2. 本人使用的编辑器是 VSCode(自行安装 Code Runner 插件,用于运行 server.js)

XSS 攻击

反射型XSS攻击

  1. 进入 XSS 目录,运行 server.js (启动本地服务器)
  2. 在浏览器中访问 localhost:3000/login.html
  3. 使用错误的用户名/密码进行登录(例如: 123 / 123),会跳向:http://localhost:3000/error?type=<script>alert('恶意内容')</script>
  4. 使用正确的用户名: yvette / yvette 登录,会跳向: http://localhost:3000/welcome?type=<script>alert('恶意内容')</script> ;虽然url仍然包含恶意脚本,但是我们已经进行了转义,不会再被攻击

DOM 型XSS攻击

  1. 浏览器中访问 localhost:3000/after.html
  2. 输入评论内容: 2222<script>alert(1)</script> 当然啦,如果是登录状态,还可以拿cookie等信息~ 还可以悄悄引入其它的js文件过来,可怕~
  3. 我们可以对输入的内容进行转义,这样就不会被攻击啦~

存储型 XSS 攻击

  1. 浏览器中访问 localhost:3000/comments.html
  2. 评论需要先登录,如未登录会自动跳去登录页
  3. 输入评论内容: 2222<script>alert(1)</script>
  4. 恶意脚本未经转换,存储到了后台。任何用户访问此页面,都会执行恶意脚本。
  5. 防范存储型XSS攻击,需要我们增加字符串的过滤:前端输入时过滤/服务端增加过滤/前端输出时过滤——一句话:谁都别信!
  6. 浏览器中访问 localhost:3000/comments2.html,输入评论: 2222<script>alert(1)</script>,不会有弹框,因为做了过滤。

CSRF 攻击

偷走你的钱:

  1. 进入 CSRF 目录,运行 server.js,端口号是3001 (runcode就行)
  2. 在控制台: node server2.js,端口号3002
  3. 浏览器中访问 http://localhost:3001/,没有登录的情况下自动跳转登录页
  4. 使用 loki/loki 登录,可以看到 loki 的账号有 10W 的余额
  5. loki 已经登录了,cookie已经有了,这个时候,有人给你发了个钓鱼网站的链接: http://localhost:3002/fish.html,你点过去了,你的钱就被偷偷偷走了~~~
  6. loki 的钱在不知不觉中就被转到了 yvette 的账户
  7. 可怕不~
  8. 不过银行网站的安全都是做的很好的,别慌~

防御

说明:safe1.html,safe2.html,safe3.html;fish1.html/fish2.html/fish3.html 的区别仅在于请求接口不用。

  1. 使用验证码【用户体验不佳】 利用svg-captcha(已安装依赖) 接口: api/transfer1
  • 浏览器访问 http://localhost:3001/safe1.html,登录之后发现转账需要验证码了~
  • 现在登录之后,再诱惑你点钓鱼网站 http://localhost:3002/fish1.html,你的钱不能被转走,因为服务端需要验证你的验证码,发现验证码错误,不会转账。
  1. 判断来源(referer) 【referer并不安全,应该referer是可以被修改的】 接口: api/transfer2
  • 浏览器访问 http://localhost:3001/safe2.html,登录(loki/loki)~
  • 现在登录之后,再诱惑你点钓鱼网站 http://localhost:3002/fish2.html,你的钱不能被转走,因为服务端会判断请求来源,发现请求来源是 localhost:3002,不会转账。
  1. Token【用户无感知】 接口: api/transfer3
  • 浏览器访问 http://localhost:3001/safe3.html,登录(loki/loki)~
  • 现在登录之后,再诱惑你点钓鱼网站 http://localhost:3002/fish3.html,你的钱不能被转走,因为服务端会判断请求来源,发现请求来源是 localhost:3002,不会转账。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • canvas的api的学习(一)

    Canvas是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作

    前端老鸟
  • canvas的api的学习(一)

    Canvas是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作

    前端老鸟
  • 如何面试前端工程师:GitHub很重要

    我在阿里巴巴的一部分工作内容是面试前端工程师。其实关于面试你可能很有自己的一套,这里我想跟你们分享一下我常用的方法。

    前端老鸟
  • 基于 xorm 的服务端框架 XGoServer

    开源地址:https://github.com/af913337456/XGoServer

    林冠宏-指尖下的幽灵
  • 基于 xorm 的服务端框架 XGoServer

    作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:htt...

    林冠宏-指尖下的幽灵
  • 谈谈一些有趣的CSS题目(十七)-- 不可思议的颜色混合模式 mix-blend-mode

    Sb_Coco
  • 爬虫 (九) 学习 python 基础知识点的正确姿势 (二)

    我会以比较学习的方式,主要拿Python和我之前学习的javascript进行比较,拿学习javascript的学习经历来迁移到学习Python,如果你在此之前...

    公众号---志学Python
  • 绘制人口热点地图的N种方法 | 数友讨论

    前天发了一个数友的求助 想做一个区域的特征人口热点地图。什么软件或者平台,可以自行导入数据,做一个类似人口热点的地图。 由于留言过48小时不能再回复,猜测应该类...

    数说君
  • VMwareWorkstation 操作指南

    程序手艺人

扫码关注云+社区

领取腾讯云代金券