当前位置： 首页 > news >正文

Day31：安全开发-JS应用WebPack打包器第三方库JQuery安装使用安全检测

news 2025/5/29 5:06:29

目录

打包器-WebPack-使用&安全

第三方库-JQuery-使用&安全

思维导图

JS知识点：

功能：登录验证，文件操作，SQL操作，云应用接入，框架开发，打包器使用等

技术：原生开发，DOM，常见库使用，框架开发（Vue，NodeJS），打包器(Webpack)等

安全：原生开发安全，NodeJS安全，Vue安全，打包器Webpack安全，三方库安全问题等

打包器-WebPack-使用&安全

参考：https://mp.weixin.qq.com/s/J3bpy-SsCnQ1lBov1L98WA

Webpack是一个模块打包器。在Webpack中会将前端的所有资源文件都作为模块处理。它将根据模块的依赖关系进行分析，生成对应的资源。

五个核心概念:

1. 【入口(entry)】：指示webpack应该使用哪个模块，来作为构建内部依赖图开始。

2. 【输出(output)】：在哪里输出文件，以及如何命名这些文件。

3. 【Loader】：处理那些非JavaScript文件（webpack 自身只能解析 JavaScript和json）。webpack 本身只能处理JS、JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader。

4. 【插件(plugins)】：执行范围更广的任务，从打包到优化都可以实现。

5. 【模式(mode)】：有生产模式production和开发模式development。

使用：

1、创建需打包文件

2、安装webpack库

3、创建webpack配置文件

4、运行webpack打包命令

安全：

1、WebPack源码泄漏-模式选择

2、模糊提取安全检查-PacketFuzzer

https://github.com/rtcatc/Packer-Fuzzer

原生态JS：前端语言直接浏览器显示源代码

NodeJS：服务段语言浏览器不显示源代码

WebPack：打包模式选择开发者模式后会造成源码泄漏（nodejs vue）

为什么要使用Webpack？

创建WebPack，并创建目录src在目录下创建1.js 2.js

// 1。js
function test(){console.log('test');
}

test();

在创建index.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>Document</title>
</head>
<body>**<script src="src/2.js"></script><script src="src/1.js"></script>**
</body>
</html>

由于js相互依赖的顺序不同，造成无法执行；

使用Webpack的主要原因

  • 模块化支持：Webpack 支持将应用程序拆分为模块，使开发人员能够使用模块化的方式组织和管理代码。模块化能够提高代码的可维护性、重用性和可测试性。
  • 资源打包：Webpack 可以将项目中的各种资源（例如 JavaScript、CSS、图像等）视为模块，并将它们打包成一个或多个最终的静态资源文件。这样可以减少网络请求的次数，提高应用程序的加载性能。
  • 代码分割：Webpack 支持将应用程序的代码分割成多个块（chunks），并在需要时按需加载。这种代码分割的技术可以提高应用程序的初始加载速度，并减小用户需要下载的初始文件大小。
  • 资源优化：Webpack 提供了丰富的插件和工具生态系统，可以进行各种资源优化和转换，例如压缩代码、处理样式预处理器、优化图像等。这些优化可以减小资源文件的大小，提高应用程序的性能。
  • 开发环境支持：Webpack 提供了强大的开发环境支持，包括开发服务器、热模块替换（Hot Module Replacement）、源代码映射等功能。这些功能可以提升开发效率，加快开发周期。

webpack使用

创建需打包文件
创建WebPack，并创建目录src在目录下创建js目录在js目录下创建sum.js count.js

sum.js

export default function sum(x,y){return x+y;
}

count.js

export default function count(x,y){return x-y;
}

main.js

import count from "./js/count";
import sum from "./js/sum";console.log(count(2,1));
console.log(sum(2,1));

在创建src同级文件index.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>Document</title>
</head>
<body><script src="main.js"></script></body>
</html>

报错Cannot use import statement outside a module，尝试在不支持模块的环境中使用 ES6 的 import 打包语句造成无法执行

安装webpack库：npm i webpack webpack-cli -g (安装到全局目录)

创建webpack配置文件
创建src同级文件webpack.config.js不能改名称

// 引入path模块，用于处理文件路径
const path = require('path');// Webpack配置对象
module.exports = {// 指定入口文件，即Webpack从这个文件开始构建依赖图entry: './src/main.js',// 指定输出配置output: {// 输出的文件路径，使用path.resolve确保路径的正确性path: path.resolve(__dirname, 'dist'),// 输出的文件名filename: 'bundle.js',// 在每次构建前清理输出目录clean: true,},// 指定打包模式，可以是 'development' 或 'production'mode: "development", // 或者 "production"//mode:"production",
};
  • entry: 指定入口文件，即Webpack从哪个文件开始构建依赖关系图。
  • output: 指定输出的目录和文件名，以及是否在每次构建前清理输出目录。
  • mode: 指定打包的模式，可以是 ‘development’ 或 ‘production’。
    • development 模式下会启用一些开发工具，容易造成源码泄露
    • production 模式下会进行代码优化，代码极简化。

运行webpack打包命令 npx webpack

打包成功后，在index.html中将引用的代码切换为打包好的./dist/bundle.

<body><script src="./dist/bundle.js"></script>
</body>

运行成功，并回显定义的两个函数计算结果

webpack安全

WebPack源码泄漏-模式选择

  • development 模式下会启用一些开发工具，容易造成源码泄露
  • production 模式下会进行代码优化，代码极简化。

模糊提取安全检查-PacketFuzzer
https://github.com/rtcatc/Packer-Fuzzer

原生态JS：前端语言直接浏览器显示源代码
NodeJS：服务段语言浏览器不显示源代码
WebPack：打包模式选择开发者模式后会造成源码泄漏（nodejs vue）

这类打包器会将整站的API和API参数打包在一起供Web集中调用，这也便于我们快速发现网站的功能和API清单，但往往这些打包器所生成的JS文件数量异常之多并且总JS代码量异常庞大（多达上万行），这给我们的手工测试带来了极大的不便，Packer Fuzzer软件应运而生。

本工具支持自动模糊提取对应目标站点的API以及API对应的参数内容，并支持对：未授权访问、敏感信息泄露、CORS、SQL注入、水平越权、弱口令、任意文件上传七大漏洞进行模糊高效的快速检测。在扫描结束之后，本工具还支持自动生成扫描报告，您可以选择便于分析的HTML版本以及较为正规的doc、pdf、txt版本。

  1. WebPack 源码泄漏 - 模式选择
    • 开发者模式下文件很全，所有文件在浏览器中都可以看到 (在开发者工具的 Sources 中，可以看到 webpack)，
      所以开发时若模式选择不当，选择了开发者模式，则会造成源码泄露。
    • 生产模式时封装很安全，看不到引用的 js。
  2. 模糊提取安全检查工具 - PacketFuzzer：https://github.com/rtcatc/Packer-Fuzzer
  3. 泄露源码可能会泄露敏感信息，如数据库连接配置文件，调用某些 api 接口等

原生态 JS：前端语言直接浏览器显示源代码
NodeJS：服务端语言浏览器不显示源代码
WebPack：打包模式选择开发者模式后会造成源码泄漏（eg：nodejs vue）

第三方库-JQuery-使用&安全

jQuery是一个快速、简洁的JavaScript框架,是一个丰富的JavaScript代码库。设计目的是为了写更少的代码，做更多的事情。它封装JavaScript常用功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

1、使用：

引用路径：https://www.jq22.com/jquery-info122

2、安全：

检测：http://research.insecurelabs.org/jquery/test/

测试：CVE-2020-11022/CVE-2020-11023

参考：https://blog.csdn.net/weixin_44309905/article/details/120902867

JQuery使用

引用路径：https://www.jq22.com/jquery-info122

没细讲，目前只要了解开发中引用了不安全有漏洞的库也会造成漏洞

1、使用：
jquery 引用路径：jquery下载所有版本（实时更新）
2、安全：
检测：http://research.insecurelabs.org/jquery/test/
测试：CVE-2020-11022/CVE-2020-11023
Javascript 框架库漏洞验证：Javascript框架库漏洞验证-CSDN博客

jQuery 框架漏洞全总结及开发建议：Javascript框架库漏洞验证-CSDN博客

思维导图

相关文章：

Day31：安全开发-JS应用WebPack打包器第三方库JQuery安装使用安全检测

目录 打包器-WebPack-使用&安全 第三方库-JQuery-使用&安全 思维导图 JS知识点&#xff1a; 功能&#xff1a;登录验证&#xff0c;文件操作&#xff0c;SQL操作&#xff0c;云应用接入&#xff0c;框架开发&#xff0c;打包器使用等 技术&#xff1a;原生开发&…...

编程日记 2024/3/14 13:11:28

Go Zero微服务个人探究之路（十六）回顾api服务和rpc服务的本质

目录 前言 正文 API&#xff08;Application Programming Interface&#xff09; RPC&#xff08;Remote Procedure Call&#xff09; API 与 RPC 的关系 分布式部署 API 和 RPC 结语 前言 go-zero 是一个基于 Go 语言的微服务框架&#xff0c;它提供了一套简洁的编程模…...

编程日记 2024/3/14 13:10:27

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的夜间车辆检测系统（深度学习代码+UI界面+训练数据集）

摘要&#xff1a;开发夜间车辆检测系统对于自动驾驶技术具有关键作用。本篇博客详细介绍了如何运用深度学习构建一个夜间车辆检测系统&#xff0c;并提供了完整的实现代码。该系统基于强大的YOLOv8算法&#xff0c;并对比了YOLOv7、YOLOv6、YOLOv5&#xff0c;展示了不同模型间…...

编程日记 2024/3/14 13:09:26

Spring体系架构

目录 核心容器（Core Container） 数据访问/集成（Data Access/Integration） Web开发（Web）...

编程日记 2024/3/14 13:08:25

【PLC】现场总线和工业以太网汇总

1、 现场总线 1.1 什么是现场总线 1&#xff09;非专业描述&#xff1a; 如下图&#xff1a;“人机界面”一般通过以太网连接“控制器(PLC)”&#xff0c;“控制器(PLC)”通过 “现场总线”和现场设备连接。 2&#xff09;专业描述&#xff08;维基百科&#xff09; 现场总线…...

编程日记 2024/3/14 13:06:22

【吊打面试官系列】Java虚拟机JVM篇 - 关于JVM分析

大家好&#xff0c;我是锋哥。今天分享关于JVM分析的JVM面试题&#xff0c;希望对大家有帮助&#xff1b; 查看JVM进程号的命令是什么? 可以使用 ps ‐ef 和 jps ‐v 等等。 怎么查看剩余内存? 比如&#xff1a; free ‐m, free ‐h, top 命令等等。 1000道 互联网大厂Jav…...

编程日记 2024/3/14 13:05:21

Mysql锁与MVCC

文章目录 Mysql锁的类型锁使用MVCC快照读和当前读读视图【Read View】串行化的解决 exlpain字段解析ACID的原理日志引擎整合SpringBoot博客记录 Mysql锁的类型 MySQL中有哪些锁&#xff1a; 乐观锁&#xff08;Optimistic Locking&#xff09;&#xff1a;假设并发操作时不会发…...

编程日记 2024/3/14 13:00:16

rancher是什么

Rancher Labs是制作Rancher的公司。Rancher Labs成立于2014年&#xff0c;是一家专注于企业级容器管理软件的公司。它的产品设计旨在简化在分布式环境中部署和管理容器的过程&#xff0c;帮助企业轻松地采用容器技术和Kubernetes。Rancher Labs提供的Rancher平台支持Docker容器…...

编程日记 2024/3/14 12:58:14

阿里云服务器安全狗免费使用多引擎智能查杀引擎

云服务器具有按量付费、降低综合成本等诸多优势&#xff0c;受到很多企业的欢迎。 因此&#xff0c;目前使用的云服务器越来越多。 阿里云是目前云服务器中最具影响力的品牌&#xff0c;因此选择阿里云服务器的用户数量也是最多的。 那么阿里云服务器需要安装杀毒软件吗&#x…...

编程日记 2024/3/14 12:53:09

使用rust实现九九乘法表

rust目前拥有接近c/c的运行速度以及更快的编码支持&#xff0c;所以是很值得学习得一门语言。rust的语法及设计理念与其他的语言也有许多的不同之处。比如其特有的所有权属性。可以让开发者快速的开发出高效的运行程序。对于内存的管理也有极好的管理方案。 在这里使用rust语言…...

编程日记 2024/3/14 12:50:06

突破编程_C++_设计模式（简单工厂模式）

1 简单工厂模式的概念 简单工厂模式&#xff08;Simple Factory Pattern&#xff09;是设计模式中的一种创建型模式。它的主要目的是将对象的实例化与使用解耦&#xff0c;使得客户端无需关心对象的创建细节&#xff0c;只需通过工厂类来获取所需的对象。 在简单工厂模式中&a…...

编程日记 2024/3/14 12:48:05

C语言——快速排序

C语言——快速排序 一、 含义二、算法思想三、实现步骤代码实现 一、 含义 快速排序算法是在几种排序算法中效率最高的一个排序算法了&#xff0c;故称为快速排序&#xff0c;它的时间复杂度为&#xff1a;O(nlog2n)&#xff0c;相比冒泡排序算法的O(n2)有很大的提升。 二、算…...

编程日记 2024/3/14 12:40:59

FP独立站获客秘籍大揭秘：简单高效，一看就会！

跨境电商的大潮中&#xff0c;越来越多的卖家选择跳出第三方平台的框架&#xff0c;拥抱独立站的自由与机遇。但独立站获客难、成本高的问题&#xff0c;也让不少卖家头疼不已。别担心&#xff0c;今天就来给大家揭秘FP独立站获客的简单高效方法&#xff01; 首先&#xff0c;…...

编程日记 2024/3/14 12:39:58

英伟达tx2光驱烧录功能支持

今天得到一个任务&#xff0c;是在当前nvidia tx2平台上使能usb cdrom并且调试烧录功能。首先测试给到的信息是不能在平台上使用&#xff08;废话嘛&#xff0c;能用还用我干嘛&#xff09; 拿到本地ubuntu机器上看了下&#xff0c;使用brasero等软件可以顺利烧录。 此时捕获了…...

编程日记 2024/3/14 12:37:57

关于stm32(CubeMX+HAL库)的掉电检测以及flash读写

1.掉电检测 CubeMX配置 只需使能PVD中断即可 但是使能了PVD中断后还需要自行配置一些PWR寄存器中的参数&#xff0c;我也通过HAL库进行编写 void PVD_config(void) {//配置PWRPWR_PVDTypeDef sConfigPVD; sConfigPVD.PVDLevel PWR_PVDLEVEL_7; …...

编程日记 2024/3/14 12:33:53

Elastic script_score的使用

script_score介绍 在Elasticsearch中&#xff0c;script_score是在function_score查询中的一种功能强大的方式&#xff0c;允许用户使用内置Painless脚本语言或者其他支持的语言来动态计算每个文档的评分 script_score语法 GET /<索引名>/_search {"query":…...

编程日记 2024/3/14 12:31:51

【Spring Boot 3】获取已注入的Bean

【Spring Boot 3】获取已注入的Bean 背景介绍开发环境开发步骤及源码工程目录结构总结 背景 软件开发是一门实践性科学&#xff0c;对大多数人来说&#xff0c;学习一种新技术不是一开始就去深究其原理&#xff0c;而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历…...

编程日记 2024/3/14 12:28:49

C# 对于点位置的判断

1.判断点是否在一群点内部 要判断一个点是否在一个由多个点围成的多边形内部&#xff08;例如一圈点&#xff09;&#xff0c;可以使用射线法&#xff08;Ray Casting Algorithm&#xff09;来实现。以下是一个简单的 C# 实现示例 using System;public class Point {public d…...

编程日记 2024/3/14 12:27:48

最新CLion + STM32 + CubeMX 开发环境搭建

网上有不少相关教程&#xff0c;但都是基于老版本Clion&#xff0c;新版有一些改变&#xff0c;但整体是简单了。 PS&#xff1a;本教程基于CLion 2023.3.4 安装所需工具参考&#xff1a;Clion搭建stm32开发环境&#xff08;STM32F103C8T6&#xff09;&#xff0c;有这一篇就够…...

编程日记 2024/3/14 12:26:47

【Python3】观察者模式

观察者模式&#xff08;Observer Pattern&#xff09;是一种常见的设计模式&#xff0c;用于定义对象之间的一对多依赖关系&#xff0c;使得一个对象的状态改变能够通知所有依赖于它的对象并自动更新。 在观察者模式中&#xff0c;有两个核心角色&#xff1a; Subject&#xf…...

编程日记 2024/3/14 12:20:42

HTML5 Web Worker之性能优化

描述 由于 JavaScript 是单线程的&#xff0c;当执行比较耗时的任务时&#xff0c;就会阻塞主线程并导致页面无法响应&#xff0c;这就是 Web Workers 发挥作用的地方。它允许在一个单独的线程&#xff08;称为工作线程&#xff09;中执行耗时的任务。这使得 JavaScript 代码可…...

编程日记 2024/3/14 12:19:39

应对恶意IP攻击的有效方法

在当今数字化时代&#xff0c;网络攻击已经成为了互联网安全的重大挑战之一。恶意IP攻击是网络安全领域中的一种常见威胁&#xff0c;它可能导致数据泄露、服务中断、系统瘫痪等严重后果。因此&#xff0c;有效地应对恶意IP攻击至关重要。IP数据云将深入探讨如何应对恶意IP攻击…...

编程日记 2024/3/14 12:16:36

如何使用“Docker registry创建本地仓库，在服务器之间进行文件push和pull”？

1.1、在服务器1&#xff0c;运行registry docker run -d -p 5000:5000 -v ${PWD}/registry:/var/lib/registry --restart always --name registry registry:2.7.11.2、编辑/etc/docker/daemon.json 文件&#xff0c; 192.168.xxx.xxx 换成你自己 registry 服务的地址 sudo na…...

编程日记 2024/3/14 12:13:31

Rocky Linux - Primavera P6 EPPM 安装及分享

引言 继上一期发布的Redhat Linux版环境发布之后&#xff0c;近日我又制作了基于Rocky Enterprise Linux 的P6虚拟机环境&#xff0c;同样里面包含了全套P6 最新版应用服务 此虚拟机仅用于演示、培训和测试目的。如您在生产环境中使用此虚拟机&#xff0c;请先与Oracle Primav…...

编程日记 2024/3/14 12:12:30

API 管理调研

当前大部分团队内 API 管理都是依赖 Postman&#xff0c;postman最大的问题是共享问题&#xff0c;如果我要使用另外一个人已经调试好的 API 非常麻烦。因此&#xff0c;能实现协作的 API 管理将极大提升效率。 Yapi https://github.com/YMFE/yapi https://hellosean1025.gi…...

编程日记 2024/3/14 12:09:26

在centOS服务器安装docker，并使用docker配置nacos

遇到安装慢的情况可以优先选择阿里镜像 安装docker 更新yum版本 yum update安装所需软件包 yum install -y yum-utils device-mapper-persistent-data lvm2添加Docker仓库 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.rep…...

编程日记 2024/3/14 12:08:25

JVM运行时数据区概述以及分别存放的内容

JVM的运行时数据区是JVM在执行Java程序时用于存储数据和状态信息的内存区域。它分为多个部分&#xff0c;每个部分都有其特定的作用和存放的内容。 1. 方法区&#xff08;Method Area&#xff09; 作用&#xff1a;方法区是所有线程共享的内存区域&#xff0c;用于存放已被虚…...

编程日记 2024/3/14 12:05:23

数据体系规范化

基础是标准化、规范化 建立数据仓库，面向主题的、集成的、相对稳定的、反映历史变化的数据集合，以支持管理决策decision making 大数据：大量volumn、多样variety、快速velocity、价值密度低value、准确性veracity、可视化visualization、合法性validity 多源数据、多样数…...

编程日记 2024/3/14 12:03:21

从政府工作报告探计算机行业发展

从政府工作报告中&#xff0c;我们可以深入洞察计算机行业在未来一年的发展趋势和政策导向。报告中明确提出了数字经济创新发展的重要性&#xff0c;以及制造业数字化转型、服务业数字化、智慧城市和数字乡村建设等关键任务&#xff0c;这些都为计算机行业提供了广阔的发展空间…...

编程日记 2024/3/14 11:56:15

【软件工具】网络性能测试工具 Iperf

Iperf 是一款专业的开源网络性能测试工具&#xff0c;它被广泛用于测量网络带宽、延迟、抖动和数据包丢失等网络性能指标&#xff0c;支持 TCP 和 UDP 等&#xff0c;可用于点对点或客户端-服务器等模式的网络测试。 软件获取 官方下载地址&#xff1a;https://iperf.fr/iper…...

编程日记 2024/3/14 11:55:14