Web前端105天-day65-ToolChain

最新推荐文章于 2024-07-17 22:26:57 发布

smile陌辰

最新推荐文章于 2024-07-17 22:26:57 发布

阅读量555

点赞数

分类专栏： ToolChain 文章标签： webpack node.js 开发语言

本文链接：https://blog.csdn.net/qq_52810836/article/details/128445719

版权

ToolChain 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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