ToolChain02
目录
前言
ToolChain02学习开始
一、复习
webpack工具解决什么问题?
- 问题: 传统web开发的痛点
- 外部JS文件的使用: 需要利用 脚本方式进行引入
- 痛点1: 使用时没有代码提示
- 痛点2: 脚本之前的依赖关系不明确
- 解决方式: 引入 node.js 的模块化语法
- 丰富的代码提示, 依赖关系明确
- 问题: 浏览器不支持 模块化语法
- webpack的出场
- 把模块化语法, 编译成 浏览器能够识别的脚本
loader
: 加载器
- webpack 默认把引入的文件都识别为 JS 文件进行解析处理
- 非js类型的文件需要利用 专业的
loader
加载器进行操作- 搭配自定义的配置文件
webpack.config.js
使用开发服务器
- webpack-dev-server : 自带热更新操作 并且 能够识别文件内容的变更 重新编译代码
二、XSS:跨站脚本攻击
- 不要直接使用 网络脚本, 有被攻击的风险
- 创建服务器
- 新建目录:
xss-server
- 初始化:
npm init -y
- 添加模块:
npm i express cors
- 远程脚本攻击
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>xss 16:17</title> </head> <body> <ul> <li>泡泡</li> <li>亮亮</li> <li>铭铭</li> </ul> <!-- XSS: 跨 站 脚本 攻击 --> <!-- Cross Site Script Attact --> <!-- 理论上, 缩写是 CSS , 由于和 层叠样式表的缩写重名, 所以改为 XSS --> <!-- 当使用其他网站提供的脚本文件时, 对方可以在文件中植入非法的JS代码, 来获取用户在网站上的私人信息 --> <!-- 解决办法: 不要相信远程的脚本, 要下载本地使用 --> <!-- <script src="https://api.xin88.top/js/jquery-3.6.1.min.js"></script> --> <script src="./jquery-3.6.1.min.js"></script> <script> // 需求: li 被点击后, 变蓝色 $('li').click(function () { $(this).css('color', 'blue') }) </script> </body> </html>
- 服务器代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>首页</title> </head> <body> <h1>欢迎使用Express!</h1> <!-- XSS跨站脚本攻击 --> <!-- 如果我们的网站中, 提供了允许用户发表信息 给其他用户查看的情况 --> <!-- 例如 评论区, 微博 --> <!-- 如果用户发送一些脚本, 则会被解析 攻击查看网站的其他用户 --> <div id="review"> <h3>评论区</h3> <textarea id="box" cols="30" rows="10"></textarea> <br> <button>发表评论</button> </div> <!-- 显示评论消息 --> <ul></ul> <script src="./jquery-3.6.1.min.js"></script> <script> $.get('http://localhost:3000/all_msg', data => { console.log(data) $('ul').html( data.map(value => `<li>${value}</li>`) ) }) $('#review>button').click(function () { var kw = $('#box').val() $.get('http://localhost:3000/review?kw=' + kw, data => { console.log(data) }) }) </script> </body> </html>
三、SXSRF:跨站请求伪造攻击
例子: 例如头像更新接口, 只需要传递 用户的id 和 要更新的头像地址, 就能完成更改
- 类似于: 任何人到银行说: 我要把 亮亮的钱取出来, 取10w -- 银行柜员就会给你
安全机制:
- session机制
- token机制
思想: 当用户登录账号密码之后, 服务器要生成一个 唯一标识 (
类似银行卡号+密码
), 发送给用户存储 并且 有过期时间
- 用户每次访问网站时, 都必须携带 这个唯一标识给服务器 -- 服务器解密后, 发现是合法的用户, 再提供服务
- 具体案例: 在第四阶段会有
用户登录网站后, 会得到一个唯一标识, 每次访问都会自动携带这个标识 -- 这是浏览器的 cookie 设定
例如: 访问银行 www.bank.com 网站, 完成了登录之后, 银行会发送给你一个唯一标识存储在浏览器里
每次提交表达时, 都会写到 银行发送的唯一标识
- 此时: 用户刚登录完银行之后, 例如登录了其他的网站 -- 带有风险的
- 存在这样一段代码
<img src="http://www.bank.com?action=转账&money=1000"
- 恰好是访问银行的
- 浏览器就会自动携带你的身份认证 发送给银行; 银行认为你是合法的, 就会实现转账流程
不能存粹依赖用户的自觉 -- 访问敏感网站时, 先清理记录
- 解决方案:
- 要求每次提交表单的时候, 额外再提交一个实时生成的加密的唯一标识. CSRF_TOKEN
总结
ToolChain02学习结束