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

目录

打包器-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博客

思维导图

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

qt 格式化打印 日志 QMessagePattern 格式词法语法及设置

qt 格式化打印 日志 QMessagePattern 格式词法语法及设置

一、qt源码格式化日志 关键内部类 QMessagePattern qt为 格式化打印日志 提供了一个简易的 pattern(模式/格式) 词法解析的简易的内部类QMessagePattern，作用是获取和解析自定义的日志格式信息。 该类在qt的专门精心日志操作的源码文件Src\qtbase\src\corelib\global\qloggi…
阅读更多...
Seata源码流程图

Seata源码流程图

1.第一阶段分支事务的注册 流程图地址&#xff1a;https://www.processon.com/view/link/6108de4be401fd6714ba761d 2.第一阶段开启全局事务 流程图地址&#xff1a;https://www.processon.com/view/link/6108de13e0b34d3e35b8e4ef 3.第二阶段全局事务的提交 流程图地址…
阅读更多...
基于深度学习的图像去雨去雾

基于深度学习的图像去雨去雾

基于深度学习的图像去雨去雾 文末附有源码下载地址 b站视频地址&#xff1a; https://www.bilibili.com/video/BV1Jr421p7cT/ 基于深度学习的图像去雨去雾&#xff0c;使用的网络为unet&#xff0c; 网络代码&#xff1a; import torch import torch.nn as nn from torchsumm…
阅读更多...
电脑麦克风没声音怎么设置？一步步教你设置正确！

电脑麦克风没声音怎么设置？一步步教你设置正确！

电脑麦克风是进行语音通话、语音识别和录音等操作时必不可少的设备&#xff0c;然而有时候我们可能会遇到电脑麦克风没有声音的问题&#xff0c;导致无法正常进行语音交流或录音。在本文中&#xff0c;我们将介绍电脑麦克风没声音怎么设置的三种方法&#xff0c;以分步骤详细说…
阅读更多...
AHU 汇编 实验一

AHU 汇编 实验一

一、实验名称&#xff1a;实验1 实验1 用Debug命令查看寄存器和内存中的内容 实验目的:求掌握使用Debug命令查看寄存器和内存的方法。 通过第2章两个简单实例认识汇编语言程序&#xff0c;初步了解程序格式&#xff1b;段定义&#xff1b;标号&#xff1b;DOS系统功能&#xf…
阅读更多...
科技成果鉴定测试如何进行?第三方检测机构进行鉴定测试的好处

科技成果鉴定测试如何进行?第三方检测机构进行鉴定测试的好处

科技成果鉴定测试&#xff0c;作为科技领域中一项重要的质量检验手段&#xff0c;具有广泛的应用范围。旨在为科技成果的研发者和使用者提供客观、科学、权威的鉴定结果&#xff0c;从而评估科技成果的技术水平和市场竞争力。 　　科技成果鉴定测试是对科技成果进行系统、全面的…
阅读更多...
数据结构 day2

数据结构 day2

1:思维导图 2&#xff1a;计算结构体大小 3&#xff1a;大小端存储 &#xff08;1&#xff09;&#xff1a;数据溢出 1 #include <stdio.h>2 #include <string.h>3 #include <stdlib.h>4 int main(int argc, const char *argv[])5 {6 short a 0x1234;…
阅读更多...
自定义方法SQL注入器-DefaultSqlInjector

自定义方法SQL注入器-DefaultSqlInjector

/*** 自定义Sql注入* author zy*/ public class SqlInjector extends DefaultSqlInjector {Overridepublic List<AbstractMethod> getMethodList(Class<?> mapperClass, TableInfo tableInfo) {// 注意&#xff1a;此SQL注入器继承了DefaultSqlInjector(默认注入器…
阅读更多...
性价比高超声波清洗机推荐，热门性价比高超声波清洗机大揭秘!

性价比高超声波清洗机推荐，热门性价比高超声波清洗机大揭秘!

在日常生活中&#xff0c;眼镜不仅是视力矫正的工具&#xff0c;也是提升个人魅力的时尚配饰。然而&#xff0c;长期佩戴眼镜的我们都面临一个共同的难题——眼镜的清洁工作。尘埃、皮肤油脂、甚至是细菌和病毒&#xff0c;都可能附着在眼镜上&#xff0c;不仅影响视觉效果&…
阅读更多...
C++程序设计-第六/七/八章 运算符重载/包含与继承/虚函数和多态性【期末复习|考研复习】

C++程序设计-第六/七/八章 运算符重载/包含与继承/虚函数和多态性【期末复习|考研复习】

前言 总结整理不易&#xff0c;希望大家点赞收藏。 给大家整理了一下C程序设计中的重点概念&#xff0c;以供大家期末复习和考研复习的时候使用。 C程序设计系列文章传送门&#xff1a; 第一章 面向对象基础 第四/五章 函数和类和对象 第六/七/八章 运算符重载/包含与继承/虚函…
阅读更多...
搭建个人智能家居 3 -第一个设备“点灯”

搭建个人智能家居 3 -第一个设备“点灯”

搭建个人智能家居 3 -第一个外设“点灯” 前言ESPHome点灯 HomeAssistant 前言 前面我们已经完成了搭建这个智能家居所需要的环境HomeAssistant和ESPHome&#xff0c;今天我们开始在这个智能家居中添加我们的第一个设备&#xff08;一颗LED灯&#xff09;&#xff0c;如果环境…
阅读更多...
使用Java自带的VisualVM监控远程服务器部署在Docker容器中的Java项目并使用Mat在线工具排查服务器内存泄露或内存溢出的原因

使用Java自带的VisualVM监控远程服务器部署在Docker容器中的Java项目并使用Mat在线工具排查服务器内存泄露或内存溢出的原因

事情是这样的&#xff0c;我们项目最近应业主的要求迁移到了新的服务器&#xff0c;起初一切正常&#xff0c;部署、上线、测试都没有问题&#xff0c;项目大概运行了一周的工作日时间都没出现问题&#xff0c;直到周六那天&#xff0c;项目经理打电话过来说服务器崩了&#xf…
阅读更多...
【深度学习】YOLOv9继续训练——断点训练方法

【深度学习】YOLOv9继续训练——断点训练方法

YOLOv9继续训练主要分为两个情况&#xff1a; 其一、训练过程中意外中断&#xff0c;未完成训练预期的epoch数量&#xff1b; 其二、训练完了&#xff0c;但是未收敛&#xff0c;在这个基础上&#xff0c;还想用这个权重、学习率等参数继续训练多一些轮次 一、训练过程中意外…
阅读更多...
基于YOLOv8深度学习的野外火焰烟雾检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测

基于YOLOv8深度学习的野外火焰烟雾检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…
阅读更多...
【相关问题解答1】bert中文文本摘要代码：import时无法找到包时，几个潜在的原因和解决方法

【相关问题解答1】bert中文文本摘要代码：import时无法找到包时，几个潜在的原因和解决方法

【相关问题解答1】bert中文文本摘要代码 写在最前面问题1问题描述一些建议import时无法找到包时&#xff0c;几个潜在的原因和解决方法1. 模块或包的命名冲突解决方法&#xff1a; 2. 错误的导入路径解决方法&#xff1a; 3. 第三方库的使用错误解决方法&#xff1a; 4. 包未正…
阅读更多...
Text-to-SQL 工具Vanna进阶|数据库对话机器人的多轮对话

Text-to-SQL 工具Vanna进阶|数据库对话机器人的多轮对话

跟数据库对话机器人对话，我可不止一个问题。 可能基于第一句问话，还有第二句、第三句问话。。。第N句对话。所以本文测试了多轮对话功能。 单轮对话的环境搭建参考博客 Text-to-SQL 工具Vanna + MySQL本地部署 | 数据库对话机器人 我的数据是这样 1. 基础配置 import vann…
阅读更多...
Parade Series - WebRTC ( ＜ 300 ms Low Latency ) T.B.D

Parade Series - WebRTC ( ＜ 300 ms Low Latency ) T.B.D

Parade Series - FFMPEG (Stable X64) 延时测试秒表计时器 ini/config.ini [system] homeserver storestore\nvr.db versionV20240312001 verbosefalse [monitor] listrtsp00,rtsp01,rtsp02 timeout30000 [rtsp00] typelocal deviceSurface Camera Front schemartsp ip127…
阅读更多...
Heparin-PCL/PLGA/PLA Heparin肝素偶联聚己内酯/聚乳酸/聚乳酸羟基乙酸共聚物

Heparin-PCL/PLGA/PLA Heparin肝素偶联聚己内酯/聚乳酸/聚乳酸羟基乙酸共聚物

肝素的结构与性质&#xff1a;肝素是一种硫酸化多糖&#xff0c;具有高度负电荷。它由重复的二糖单元组成&#xff0c;这些单元含有硫酸基团&#xff0c;这些硫酸基团负责其负电荷。 纳米材料的电荷特性&#xff1a;纳米材料可以通过化学修饰来带正电荷或负电荷。例如&#xf…
阅读更多...
编曲学习：钢琴编写 人性化、逻辑预制 工程音频导出

编曲学习：钢琴编写 人性化、逻辑预制 工程音频导出

第8课 钢琴编写 人性化、逻辑预制 工程音频导出小鹅通-专注内容付费的技术服务商https://app8epdhy0u9502.pc.xiaoe-tech.com/live_pc/l_65e30339e4b064a8cfe56001?course_id=course_2XLKtQnQx9GrQHac7OPmHD9tqbv 音乐创作中，有思路时可以不套学习到的公式，没有思路时可以套…
阅读更多...
多维时序 | Matlab实现VMD-CNN-GRU变分模态分解结合卷积神经网络门控循环单元多变量时间序列预测

多维时序 | Matlab实现VMD-CNN-GRU变分模态分解结合卷积神经网络门控循环单元多变量时间序列预测

多维时序 | Matlab实现VMD-CNN-GRU变分模态分解结合卷积神经网络门控循环单元多变量时间序列预测 目录 多维时序 | Matlab实现VMD-CNN-GRU变分模态分解结合卷积神经网络门控循环单元多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现VMD-CN…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023