彻底理解前端安全面试题（1）—— XSS 攻击，3种XSS攻击详解，建议收藏（含源码）

news2024/12/26 20:54:59

前言

前端关于网络安全看似高深莫测，其实来来回回就那么点东西，我总结一下就是 3 + 1  = 4，3个用字母描述的【分别是 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 脚本干的一些坏事，主要的攻击方式如下：

  1. 利用脚本获取页面的数据，盗用 cookie、localStorage 等
  2. 破坏页面结构，操作 dom
  3. DOS 攻击，拒绝服务请求，恶意发送请求，占用服务器资源

反正 js 能干的事情都可以利用。

三、攻击类型

xss 的攻击类型分别是 存储型、反射型、DOM 型，下面开始做详细的讲解

3.1 存储型 XSS 攻击

恶意脚本由前端生成、发送并存在目标服务器上，属于服务器端漏洞，重点是：

  1. 这个脚本是前端某个用户写的，好好想想，肯定是这样的，服务端不会无缘无故的多出来数据；
  2. 服务器在接收到前端传的内容后，没有经过检查就存到数据库中
  3. 攻击发生在前端再一次访问存储的数据的时候

3.1.1 具体流程

  1. 一个用户修改一个公共【文件名】为一段脚本，如  
    <img src='invalid-image' onerror='alert("我是秦始皇，加v给我100万")'>
  2. 服务器对【文件名】没有过滤（对不合法的文件名没有进行转义等处理），就保存在服务端数据库了
  3. 当其他用户访问这个公共【文件名】的时候就会触发攻击
  4. 脚本中可以获取网站的 cookie，把 cookie 数据传到黑客服务器【或者是利用脚本破坏页面结构等】
  5. 拿到用户 cookie 信息后，就可以利用 cookie 信息在其他机器上登录改用户的账号，并利用用户账号进行一些恶意操作

3.1.2 代码模拟

我模拟的是【破坏页面结构】的 XSS 攻击，我们再在 XSS 文件夹下新建两个文件

  1. data.txt 用来存数据来模拟数据库
  2. index2.html 用来展示第二个页面，用于访问数据库中的数据

现在我们总共有四个文件了。

系统功能描述：

  1. 一个公开可访问的书籍列表，一个管理员用户 1 可以在页面 1 (index.html) 修改书籍的名称；
  2. 一个普通用户 2， 可以在页面 2（index2.html）访问书籍列表（也就是书籍名）
（1）index.html  的代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=`, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h1,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>
  </head>
  <body>
    <div class="box">
      <h1>【首页，用户1】</h1>
      <h1>设置一个公开的书籍的名称</h1>
      <div>这个书籍是所用用户都可以访问的</div>
      <div>修改书名：</div>
      <textarea class="book-name" id="name" ></textarea>
      <button class="button" onclick="saveName()">保存</button>
    </div>
    <script>
      function 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>
</html>
（2）index2.html 的代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=`, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h1,
      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>
  </head>
  <body>
    <div class="box">
      <h1>【另一个页面，用户2】</h1>
      <h1>书籍列表页面</h1>
      <div>访问公开的书籍</div>
      <div>书名</div>
      <div id="name"></div>
    </div>
    <script>
      // 初始化的时候就获取数据
      fetch('/getName')
        .then((res) => {
          return res.json();
        })
        .then((data) => {
          const name = data.name;
          const ele = document.getElementById('name');
          // 设置书名
          ele.innerHTML = name;
        });
    </script>
  </body>
</html>
（3）index.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.body
  fs.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 写服务端代码，有两个知识点

（1）post 请求需要使用 body-parser 解析 body 的 json 数据

（2）写入/读取 data.txt 是用node 的核心模块 fs，方法 fs.writeFileSync / s.readFileSync

（3）fs.readFileSync 的结果是 buffer 需要转成字符串 toString()

data.txt 里面不必输入任何内容，我们会通过代码进行写入。

（4）运行代码
npm run dev xss

访问 localhost:3000，输入一段恶意的代码作为书名，点击保存


 

点击保存之后，输入的内容会保存在 data.txt 中

 再打开 localhost:3000/index2.html，这样一个存储型的、对于 dom 结构的破环的 XSS 攻击就完成了。

这里面有一个知识点就是我们在 index.html 中保存的恶意脚本是 

<img src='invalid-image' onerror='alert("我是秦始皇，加v给我100万")'>

我们用了一个 img 标签，然后使用 onerror 事件里面写一些脚本，而没有这么写，为啥呢？

<script>alert(1)</script>

这是因为我们在 index2.html 里面使用 innerHTML 将数据渲染在页面上，使用 innerHTML 直接渲染 script 字符串，脚本是不会被执行的。 而事件处理器，如 img 的 onerror 事件却可以触发。

（5）提交代码

3.2 反射型 XSS 攻击

恶意脚本在前端访问的 URL 中，要用户主动点击 URL，服务器解析 URL， 并返回恶意脚本，属于服务端漏洞，重点是：

  1. 恶意脚本不是前端用户手动写的，和存储型有区别
  2. 恶意脚本在 URL 上，需要用户手动点击才能触发攻击
  3. 服务器收到访问 URL 的请求时，解析 URL 得到恶意脚本，然后返回给客户端
  4. 服务器不会存储恶意脚本，只会返回(反射)它

3.2.1 具体流程

  1. 黑客诱导用户访问有恶意代码的 URL ，如 https://danger.com?xss=<script>alert('attack)</script>
  2. 服务器接收到访问 URL 的请求
  3. 服务器解析 URL ，得到 XSS 的值，但是并没有对 XSS 的值做校验是否合法，对于不合法的没有进行转义
  4. 服务器将解析后的结果，反射给浏览器，如返回 { xss : <script>alert('attack)</script> }
  5. 浏览器的恶意代码的 URL 页面有渲染 XSS 值的逻辑
  6. 此时浏览器弹出警告框
  7. 一个反射型 XSS 攻击就完成了

黑客经常会通过 qq群或者邮件等渠道诱导用户去点击这些恶意链接。

看到没？没事别惦记乱七八糟的连接，谨防电信诈骗！

3.2.2 代码模拟

（1）新建 xss/ index3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>反射型 xss 攻击</div>
    <h1><a href="http://localhost:3000/reflect?xss=<script>alert('哈哈，你上当了')</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 来触发攻击，是前端漏洞，不牵扯到服务器。重点是：

  1. 整个过程服务器不参与
  2. 脚本的具体来源还是利用网页中用户交互的部分， URL 参数、表单输入、cookie 等
  3. 多发生在使用 innerHTML 的场景

3.3.1 具体流程

  1. 从 URL 中取出恶意代码/或者从用户输入的表单/ cookie 中
  2. 把恶意代码使用 innerHTML 插入页面，改变 dom 结构

尤其是在使用 innerHTML 的时候会出现这种问题，可以使用插件如 xss-filters 避免这一类问题，这个插件的原理是将某些字符进行转义，将 < 转成 &lt 等

3.3.2 代码模拟

（1）新增 index4.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <style>
        textarea {
            width: 400px;
            height: 50px;
        }
    </style>
</head>
<body>
    <h1>dom 型 xss 攻击</h1>
    <div>输入</div>
    <textarea id="input"></textarea>
    <button onclick="save()">保存</button>
    <hr>
    <div>输出</div>
    <div id="output"></div>
    <script>
        function save() {
            const text = document.getElementById('input').value
            if (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 攻击防御方法

  1. 不使用服务端渲染，前两种是服务端的安全漏洞，服务器不能信任前端输入的任何东西，服务端要对输入脚本进行过滤或者转码。<script> 标签被转换为 &lt;script&gt; ，注意，https 不能防止安全问题，只会增加攻击难度和成本；
  2. 对于 dom 型，对要插入的 html 做好充分的转义, npm 包：xss-filters；
  3. 使用内容安全策略，csp 建立白名单，告诉浏览器可以执行和加载哪些功能 Content-Security-Policy 服务端设置【设置 csp 有两种方式 http 头部、meta 标签】
  4. x-content-type-options\x-frame-options\x-xss-protentcion 等httip头部设置
  5. 敏感信息 cookie 设置 httpOnly

总结

xss 攻击的三种类型都用代码模拟了，我的仓库地址如下，欢迎查看

yangjihong2113/learn-express

内容较多，难免疏漏，如有问题，欢迎指正。

这是一系列的文章，关于网络安全的内容还有 CSRF、CORS 和中间人攻击的内容没有总结，持续更新中，欢迎关注。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1343634.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

mac安装k8s环境

mac安装k8s环境

安装kubectl brew install kubectl 确认一下安装的版本 kubectl version --client 如果想在本地运行kubernetes 需要安装minikube brew install minikube 需要注意安装minikube需要本地的docker服务是启动的 启动 默认连接的是google的仓库 minikube start 指定阿…
阅读更多...
（2023，3D NeRF，无图像变分分数蒸馏，单步扩散）SwiftBrush：具有变分分数蒸馏的一步文本到图像扩散模型

（2023，3D NeRF，无图像变分分数蒸馏，单步扩散）SwiftBrush：具有变分分数蒸馏的一步文本到图像扩散模型

SwiftBrush : One-Step Text-to-Image Diffusion Model with Variational Score Distillation 公众&#xff1a;EDPJ&#xff08;添加 VX&#xff1a;CV_EDPJ 或直接进 Q 交流群&#xff1a;922230617 获取资料&#xff09; 目录 0. 摘要 1. 方法 1.1 基础 1.2 SwiftBrus…
阅读更多...
elasticsearch 笔记三：查询建议介绍、Suggester、自动完成

elasticsearch 笔记三：查询建议介绍、Suggester、自动完成

一、查询建议介绍 1. 查询建议是什么&#xff1f; 查询建议&#xff0c;为用户提供良好的使用体验。主要包括&#xff1a; 拼写检查&#xff1b; 自动建议查询词&#xff08;自动补全&#xff09; 拼写检查如图&#xff1a; 自动建议查询词&#xff08;自动补全&#xff09;…
阅读更多...
Mybatis插件入门

Mybatis插件入门

专栏精选 引入Mybatis Mybatis的快速入门 Mybatis的增删改查扩展功能说明 mapper映射的参数和结果 Mybatis复杂类型的结果映射 Mybatis基于注解的结果映射 Mybatis枚举类型处理和类型处理器 再谈动态SQL Mybatis配置入门 Mybatis行为配置之Ⅰ—缓存 Mybatis行为配置…
阅读更多...
【经典算法】有趣的算法之---蚁群算法梳理

【经典算法】有趣的算法之---蚁群算法梳理

every blog every motto: You can do more than you think. 0. 前言 蚁群算法记录 1. 简介 蚁群算法（Ant Clony Optimization， ACO）是一种群智能算法，它是由一群无智能或有轻微智能的个体（Agent）通过相互协作而表现出智能行为，从而为求解复杂问题提供了一个新的可能性…
阅读更多...
JDK9及之后版本使用 jlink 生成定制化的 JRE

JDK9及之后版本使用 jlink 生成定制化的 JRE

许多java软件的运行需要依赖jre&#xff0c;在 jdk8 之后&#xff0c;不再提供默认的 jre&#xff0c;后续如果项目中还是想用 jre 的形式发布软件&#xff0c;那么可以使用 jlink 工具生成 jre。 一、jlink 命令详解 jlink 二、查看jdk中包含的所有模块 如果在 jdk 安装文件夹…
阅读更多...
css 用多个阴影做出光斑投影的效果 box-shadow

css 用多个阴影做出光斑投影的效果 box-shadow

css 用多个阴影做出光斑投影的效果 box-shadow 你首先需要知道的一点是 box-shadow 可以接收多个值&#xff0c;也就是可以设置多个阴影&#xff0c;这样就可以做一个类似光斑投影的效果。 一、效果 二、代码 里面用到了我一些 scss 工具方法&#xff0c;不过不影响&#xf…
阅读更多...
Android MVP 写法

Android MVP 写法

前言 Model&#xff1a;负责数据逻辑 View&#xff1a;负责视图逻辑 Presenter&#xff1a;负责业务逻辑 持有关系&#xff1a; 1、View 持有 Presenter 2、Model 持有 Presenter 3、Presenter 持有 View 4、Presenter 持有 Model 辅助工具&#xff1a;ViewBinding 执行…
阅读更多...
【华为机试】2023年真题B卷（python）-观看文艺汇演-计算演出场次

【华为机试】2023年真题B卷（python）-观看文艺汇演-计算演出场次

一、题目 题目描述&#xff1a; 一个人只能同时观看一场演出&#xff0c;且不能迟到早退&#xff0c;由于演出分布在不同的演出场地&#xff0c;所以连续观看的演出最少有15分钟的时间间隔&#xff0c;小明是一个狂热的文艺迷&#xff0c;想观看尽可能多的演出&#xff0c; 现给…
阅读更多...
【并发设计模式】聊聊线程本地存储模式如何实现的线程安全

【并发设计模式】聊聊线程本地存储模式如何实现的线程安全

前面两篇文章&#xff0c;通过两阶段终止的模式进行优雅关闭线程&#xff0c;利用数据不变性的方式保证数据安全&#xff0c;以及基于COW的模式&#xff0c;保证读数据的安全。本篇我们来简述下如果利用线程本地存储的方式保证线程安全。 首先一个大前提就是并发问题&#xff…
阅读更多...
八皇后问题（C语言）

八皇后问题（C语言）

了解题意 在一个8x8的棋盘上放置8个皇后&#xff0c;使得任何两个皇后都不能处于同一行、同一列或同一斜线上。问有多少种方法可以放置这8个皇后&#xff1f; 解决这个问题的目标是找到所有符合要求的皇后摆放方式&#xff0c;通常使用回溯算法来求解。回溯算法会尝试所有可能…
阅读更多...
[蓝桥杯2022省赛] X 图形

[蓝桥杯2022省赛] X 图形

X 图形 问题描述 给定一个字母矩阵。一个 X 图形由中心点和由中心点向四个 4545 度斜线方向引出的直线段组成&#xff0c;四条线段的长度相同&#xff0c;而且四条线段上的字母和中心点的字母相同。 一个 X 图形可以使用三个整数r,c,L 来描述&#xff0c;其中 r,c 表示中心点…
阅读更多...
PiflowX组件-ReadFromKafka

PiflowX组件-ReadFromKafka

ReadFromKafka组件 组件说明 从kafka中读取数据。 计算引擎 flink 有界性 Unbounded 组件分组 kafka 端口 Inport&#xff1a;默认端口 outport&#xff1a;默认端口 组件属性 名称展示名称默认值允许值是否必填描述例子kafka_hostKAFKA_HOST“”无是逗号分隔的Ka…
阅读更多...
腾讯云标准型S5服务器4核8G配置优惠价格表

腾讯云标准型S5服务器4核8G配置优惠价格表

腾讯云4核8G服务器S5和轻量应用服务器优惠价格表&#xff0c;轻量应用服务器和CVM云服务器均有活动&#xff0c;云服务器CVM标准型S5实例4核8G配置价格15个月1437.3元&#xff0c;5年6490.44元&#xff0c;轻量应用服务器4核8G12M带宽一年446元、529元15个月&#xff0c;腾讯云…
阅读更多...
malloc、calloc、realloc、free函数的使用及注意事项

malloc、calloc、realloc、free函数的使用及注意事项

malloc函数 malloc函数的返回值为void*类型 内存管理函数操作的内存是在堆区空间 malloc函数使用示例 free(p)相当于值传递&#xff0c;不能改变p本身。 free只是释放了空间&#xff0c;释放后p依然指向原地址&#xff0c;故需要手动置NULL。 calloc函数 calloc可以指定开辟n个…
阅读更多...
【Week-P3】CNN天气识别

【Week-P3】CNN天气识别

文章目录 一、环境配置二、准备数据三、搭建网络结构四、开始训练五、查看训练结果六、总结6.1 不改变学习率的前提下&#xff0c;将训练epoch分别增加到50、60、70、80、90&#xff08;1&#xff09;epoch 50 的训练情况如下&#xff1a;&#xff08;2&#xff09;epoch 60 …
阅读更多...
UE4运用C++和框架开发坦克大战教程笔记（十二）（第37~39集）

UE4运用C++和框架开发坦克大战教程笔记（十二）（第37~39集）

UE4运用C和框架开发坦克大战教程笔记&#xff08;十二&#xff09;&#xff08;第37~39集&#xff09; 37. 延时事件系统38. 协程逻辑优化更新39. 普通按键绑定 37. 延时事件系统 由于梁迪老师是写 Unity 游戏出身的&#xff0c;所以即便 UE4 有自带的 TimeManager 这样的延时…
阅读更多...
直方图与均衡化

直方图与均衡化

直方图 统计图像中相同像素点的数量。 使用cv2.calcHist(images, channels, mask, histSize, ranges)函数 images&#xff1a;原图像图像格式为uint8或float32&#xff0c;当传入函数时应用[]括起来&#xff0c;例如[img]。 channels&#xff1a;同样用中括号括起来&#xff…
阅读更多...
pytest pytest-html优化样式

pytest pytest-html优化样式

conftest.py import pytest from pytest_metadata.plugin import metadata_keydef pytest_html_report_title(report):report.title"接口测试报告"def pytest_configure(config):# 获取命令行参数中的测试环境、测试版本、开始时间、测试人员config.stash[metadata_…
阅读更多...
鸿蒙Harmony（七）ArkUI--循环foreachList组件自定义组件

鸿蒙Harmony（七）ArkUI--循环foreachList组件自定义组件

循环foreach import Prompt from system.promptclass Item {icon: Resourcename: stringprice: numberconstructor(icon: Resource, name: string, price: number) {this.icon iconthis.name namethis.price price} }Entry Component struct Index {State message: string …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023