网站正在建设中敬请,网站开发类书籍,装修全包报价明细表2023,资源搜索网站是怎么做的前言
前端关于网络安全看似高深莫测#xff0c;其实来来回回就那么点东西#xff0c;我总结一下就是 3 1 4#xff0c;3个用字母描述的【分别是 XSS、CSRF、CORS】 一个中间人攻击。当然 CORS 同源策略是为了防止攻击的安全策略#xff0c;其他的都是网络攻击。除了这…前言
前端关于网络安全看似高深莫测其实来来回回就那么点东西我总结一下就是 3 1 43个用字母描述的【分别是 XSS、CSRF、CORS】 一个中间人攻击。当然 CORS 同源策略是为了防止攻击的安全策略其他的都是网络攻击。除了这 4 个前端相关的面试题其他的都是一些不常用的小喽啰。
我将会在我的《面试题一网打尽》专栏中先逐一详细介绍然后再来一篇文章总结预计一共5篇文章欢迎大家关注
本篇文章是前端网络安全相关的第一篇文章内容就是 XSS 攻击。
一、准备工作
跨站脚本攻击cross-site scripting为了和 css 区分所有才叫 XSS【也叫作代码注入攻击】重点在【脚本】两个字所以同样都是利用 script 标签XSS 和后面说的 CSRF 还是有区别的。通过在网站注入恶意脚本使脚本在用户的浏览器上运行从而盗取用户的信息或者破环页面的结构。
1.1 拉取仓库
很多知识都需要结合实际的代码来学习所以本篇文章的基础是需要一个服务端的项目可以跟着我的这篇文章搭建自己的服务端项目。或者直接克隆我的仓库代码在这个提交上拉一个新分支本篇文章所有的代码都是在这个提交基础上进行的。 1.2 新增 xss 文件夹
在项目的根目录增加一个 xss 文件夹并且在 xss 下面新建 index.html 和 index.js __dirname 是 Node.js 中的一个特殊变量表示当前执行脚本所在的目录的绝对路径。它是全局对象 global 的属性之一可在任何地方使用。具体可以看这个 至于运行的时候为什么加上目录参数请看这篇文章 。
1.3 提交代码
二、攻击方式
顾名思义xss 的攻击方式重点是脚本就是利用 js 脚本干的一些坏事主要的攻击方式如下 利用脚本获取页面的数据盗用 cookie、localStorage 等破坏页面结构操作 domDOS 攻击拒绝服务请求恶意发送请求占用服务器资源 反正 js 能干的事情都可以利用。 三、攻击类型
xss 的攻击类型分别是 存储型、反射型、DOM 型下面开始做详细的讲解
3.1 存储型 XSS 攻击
恶意脚本由前端生成、发送并存在目标服务器上属于服务器端漏洞重点是
这个脚本是前端某个用户写的好好想想肯定是这样的服务端不会无缘无故的多出来数据服务器在接收到前端传的内容后没有经过检查就存到数据库中攻击发生在前端再一次访问存储的数据的时候
3.1.1 具体流程
一个用户修改一个公共【文件名】为一段脚本如 img srcinvalid-image onerroralert(我是秦始皇加v给我100万) 服务器对【文件名】没有过滤对不合法的文件名没有进行转义等处理就保存在服务端数据库了当其他用户访问这个公共【文件名】的时候就会触发攻击脚本中可以获取网站的 cookie把 cookie 数据传到黑客服务器【或者是利用脚本破坏页面结构等】拿到用户 cookie 信息后就可以利用 cookie 信息在其他机器上登录改用户的账号并利用用户账号进行一些恶意操作
3.1.2 代码模拟
我模拟的是【破坏页面结构】的 XSS 攻击我们再在 XSS 文件夹下新建两个文件
data.txt 用来存数据来模拟数据库index2.html 用来展示第二个页面用于访问数据库中的数据
现在我们总共有四个文件了。 系统功能描述
一个公开可访问的书籍列表一个管理员用户 1 可以在页面 1 (index.html) 修改书籍的名称一个普通用户 2 可以在页面 2index2.html访问书籍列表也就是书籍名
1index.html 的代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidth, initial-scale1.0 /titleDocument/titlestyleh1,h2 {margin: 0;}.box {display: inline-flex;flex-direction: column;}.book-name {margin: 10px 0;width: 400px;height:100px}.button {width: 100px;height: 38px;}/style/headbodydiv classboxh1【首页用户1】/h1h1设置一个公开的书籍的名称/h1div这个书籍是所用用户都可以访问的/divdiv修改书名/divtextarea classbook-name idname /textareabutton classbutton onclicksaveName()保存/button/divscriptfunction saveName() {const name document.getElementById(name).value;if (name) {fetch(saveName, {method: post,headers: {content-type: application/json},body: JSON.stringify({name: name}),}).then(() {console.log(保存成功 姓名, name)})}}/script/body
/html2index2.html 的代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidth, initial-scale1.0 /titleDocument/titlestyleh1,h2 {margin: 0;}.box {display: inline-flex;flex-direction: column;}.book-name {margin: 10px 0;width: 400px;height: 100px;}.button {width: 100px;height: 38px;}/style/headbodydiv classboxh1【另一个页面用户2】/h1h1书籍列表页面/h1div访问公开的书籍/divdiv书名/divdiv idname/div/divscript// 初始化的时候就获取数据fetch(/getName).then((res) {return res.json();}).then((data) {const name data.name;const ele document.getElementById(name);// 设置书名ele.innerHTML name;});/script/body
/html3index.js 的代码
const express require(express);
const path require(path);
const bodyParser require(body-parser)
const fs require(fs)const app express();app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());// 首页 - 用户1 保存数据
app.get(/, function (req, res) {res.sendFile(path.join(__dirname, /index.html));
});// 首页 - 保存书名
app.post(/saveName, function (req, res) {const { name } req.bodyfs.writeFileSync(path.resolve(__dirname, data.txt), name)res.send(保存成功);
});// 新建另一个页面
app.get(/index2, function (req, res) {res.sendFile(path.join(__dirname, /index2.html));
});
// 另一个页面 - 用户2 获取数据
app.get(/getName, function (req, res) {// 从 data.txt 中取出存储的书名const name fs.readFileSync(path.resolve(__dirname, data.txt)).toString()console.log(name)res.send(JSON.stringify({name: name,}));
});app.listen(3000);注意 xss/index.js 中关于使用 express 写服务端代码有两个知识点 1post 请求需要使用 body-parser 解析 body 的 json 数据 2写入/读取 data.txt 是用node 的核心模块 fs方法 fs.writeFileSync / s.readFileSync 3fs.readFileSync 的结果是 buffer 需要转成字符串 toString() data.txt 里面不必输入任何内容我们会通过代码进行写入。
4运行代码
npm run dev xss
访问 localhost:3000输入一段恶意的代码作为书名点击保存 点击保存之后输入的内容会保存在 data.txt 中 再打开 localhost:3000/index2.html这样一个存储型的、对于 dom 结构的破环的 XSS 攻击就完成了。 这里面有一个知识点就是我们在 index.html 中保存的恶意脚本是 img srcinvalid-image onerroralert(我是秦始皇加v给我100万) 我们用了一个 img 标签然后使用 onerror 事件里面写一些脚本而没有这么写为啥呢 scriptalert(1)/script 这是因为我们在 index2.html 里面使用 innerHTML 将数据渲染在页面上使用 innerHTML 直接渲染 script 字符串脚本是不会被执行的。 而事件处理器如 img 的 onerror 事件却可以触发。 5提交代码
3.2 反射型 XSS 攻击
恶意脚本在前端访问的 URL 中要用户主动点击 URL服务器解析 URL 并返回恶意脚本属于服务端漏洞重点是
恶意脚本不是前端用户手动写的和存储型有区别恶意脚本在 URL 上需要用户手动点击才能触发攻击服务器收到访问 URL 的请求时解析 URL 得到恶意脚本然后返回给客户端服务器不会存储恶意脚本只会返回(反射)它
3.2.1 具体流程
黑客诱导用户访问有恶意代码的 URL 如 https://danger.com?xssscriptalert(attack)/script服务器接收到访问 URL 的请求服务器解析 URL 得到 XSS 的值但是并没有对 XSS 的值做校验是否合法对于不合法的没有进行转义服务器将解析后的结果反射给浏览器如返回 { xss : scriptalert(attack)/script }浏览器的恶意代码的 URL 页面有渲染 XSS 值的逻辑此时浏览器弹出警告框一个反射型 XSS 攻击就完成了
黑客经常会通过 qq群或者邮件等渠道诱导用户去点击这些恶意链接。 看到没没事别惦记乱七八糟的连接谨防电信诈骗 3.2.2 代码模拟
1新建 xss/ index3.html !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv反射型 xss 攻击/divh1a hrefhttp://localhost:3000/reflect?xssscriptalert(哈哈你上当了)/script 点击收款100万 /a/h1/body
/html
2修改 index.js 注意看这个服务端代码关于 reflect 方法的 get 请求他就是简单的把参数上的获取并返回浏览器就能运行这段代码。 3运行代码
npm run dev xss
访问 localhost:3000/index3 跳转之后发生了攻击
4提交代码
3.3 DOM 型 XSS 攻击
攻击者通过操纵 DOM 来触发攻击是前端漏洞不牵扯到服务器。重点是
整个过程服务器不参与脚本的具体来源还是利用网页中用户交互的部分 URL 参数、表单输入、cookie 等多发生在使用 innerHTML 的场景
3.3.1 具体流程
从 URL 中取出恶意代码/或者从用户输入的表单/ cookie 中把恶意代码使用 innerHTML 插入页面改变 dom 结构
尤其是在使用 innerHTML 的时候会出现这种问题可以使用插件如 xss-filters 避免这一类问题这个插件的原理是将某些字符进行转义将 转成 lt 等
3.3.2 代码模拟
1新增 index4.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletextarea {width: 400px;height: 50px;}/style
/head
bodyh1dom 型 xss 攻击/h1div输入/divtextarea idinput/textareabutton onclicksave()保存/buttonhrdiv输出/divdiv idoutput/divscriptfunction save() {const text document.getElementById(input).valueif (text) {const output document.getElementById(output)output.innerHTML text}}/script
/body
/html
2修改 xss/index.js 3运行代码
npm run dev xss点击保存按钮之后就出现攻击了。 注意这全程没有服务端的参与但是我们还是修改 index.js 。但是其实 index.js 里面的代码就是为了起一个服务运行 index4.html 而已 应该很好理解吧。 4提交代码
好了至此三种类型的 XSS 攻击我们都用代码的形式实现。一点都不难吧光说不练假把式如果只看理论知识肯定云里雾里你跟着一起写一遍代码就理解了不用背诵就记下来了。 3.4 XSS 攻击防御方法
不使用服务端渲染前两种是服务端的安全漏洞服务器不能信任前端输入的任何东西服务端要对输入脚本进行过滤或者转码。script 标签被转换为 lt;scriptgt; 注意https 不能防止安全问题只会增加攻击难度和成本对于 dom 型对要插入的 html 做好充分的转义, npm 包xss-filters使用内容安全策略csp 建立白名单告诉浏览器可以执行和加载哪些功能 Content-Security-Policy 服务端设置【设置 csp 有两种方式 http 头部、meta 标签】x-content-type-options\x-frame-options\x-xss-protentcion 等httip头部设置敏感信息 cookie 设置 httpOnly
总结
xss 攻击的三种类型都用代码模拟了我的仓库地址如下欢迎查看
yangjihong2113/learn-express
内容较多难免疏漏如有问题欢迎指正。
这是一系列的文章关于网络安全的内容还有 CSRF、CORS 和中间人攻击的内容没有总结持续更新中欢迎关注。
