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.mzph.cn/news/743541.shtml

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

相关文章

使用Nginx进行负载均衡

使用Nginx进行负载均衡

什么是负载均衡 Nginx是一个高性能的开源反向代理服务器&#xff0c;也可以用作负载均衡器。通过Nginx的负载均衡功能&#xff0c;可以将流量分发到多台后端服务器上&#xff0c;实现负载均衡&#xff0c;提高系统的性能、可用性和稳定性。 如下图所示&#xff1a; Nginx负…
阅读更多...
如何注册Devin-首个全自主AI软件工程师

如何注册Devin-首个全自主AI软件工程师

最近devin大火&#xff0c;具体的就不说了&#xff0c;大家应该都知道&#xff0c;写代码非常nb&#xff0c;这里说一下devin的注册方式&#xff0c;目前devin的内测已经开启。 官网https://www.cognition-labs.com/blog注册网址Your reliable AI software engineerhttps://pr…
阅读更多...
一文扫荡，12个可视化图表js库，收藏备用。

一文扫荡，12个可视化图表js库，收藏备用。

一、什么是可视化图表 可视化图表是通过图形化的方式将数据可视化展示出来的一种方式。它能够将复杂的数据以直观、易懂的形式呈现给用户&#xff0c;帮助用户更好地理解和分析数据。 可视化图表可以包括各种类型的图表&#xff0c;如线形图、柱状图、饼图、散点图、雷达图等。…
阅读更多...
查看docker安装MySQL版本

查看docker安装MySQL版本

要查看Docker中安装的MySQL版本&#xff0c;您可以按照以下步骤操作&#xff1a; 首先确保您有一个正在运行的MySQL Docker容器。如果尚未启动MySQL容器&#xff0c;请使用类似下面的命令启动它&#xff08;假设已经从Docker Hub拉取了镜像&#xff09;&#xff1a; docker run…
阅读更多...
L2-034: 口罩发放(Python)

L2-034: 口罩发放(Python)

为了抗击来势汹汹的 COVID19 新型冠状病毒&#xff0c;全国各地均启动了各项措施控制疫情发展&#xff0c;其中一个重要的环节是口罩的发放。 某市出于给市民发放口罩的需要&#xff0c;推出了一款小程序让市民填写信息&#xff0c;方便工作的开展。小程序收集了各种信息&…
阅读更多...
centos命令history设置记录10000行

centos命令history设置记录10000行

今天在操作服务器的时候&#xff0c;用history查看操作记录的时候&#xff0c;发现只能查看10条&#xff0c;这样不行啊&#xff0c;我想查看所有人对服务器操作的命令。 [rootbogon ~]# history解决办法&#xff1a; #1、找到/etc/profile文件中的histsize 把10改成10000 […
阅读更多...
【django framework】ModelSerializer+GenericAPIView，如何在提交前修改某些字段值

【django framework】ModelSerializer+GenericAPIView，如何在提交前修改某些字段值

【django framework】ModelSerializerGenericAPIView&#xff0c;如何在提交前修改某些字段值 我们经常会遇到下面这种情况&#xff1a; 序列化器用的是ModelSerializer&#xff0c;写视图的时候继承的是generics.CreateAPIView。现在我想在正式提交到数据库(perform_create)之…
阅读更多...
Windows kafka 简单集群搭建

Windows kafka 简单集群搭建

Windows kafka 简单集群搭建 文章目录 Windows kafka 简单集群搭建1.环境说明2.Zookeeper集群搭建2.1 ZooKeeper下载2.2 ZooKeeper安装2.2.1 解压zookeeper-3.4.8.tar.gz2.2.2 进入conf目录下&#xff0c;复制zoo_sample.cfg为zoo.cfg2.2.3 修改zoo.cfg文件2.2.4 生成myid文件2…
阅读更多...
24GB内存就能跑7B参数大模型？全新训练策略GaLore助你突破内存瓶颈

24GB内存就能跑7B参数大模型？全新训练策略GaLore助你突破内存瓶颈

训练大型语言模型&#xff0c;内存总是个大问题。 权重啊、优化器状态啊&#xff0c;都得吃内存&#xff0c;而且吃得还不少。 为了省内存&#xff0c;有人就想出了一些招儿&#xff0c;比如低秩适应&#xff08;LoRA&#xff09;&#xff0c;就是给预训练权重添点儿可训练的…
阅读更多...
基于YOLOv8深度学习的木薯病害智能诊断与防治系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战

基于YOLOv8深度学习的木薯病害智能诊断与防治系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…
阅读更多...
基于C++的一种字符串切分方法及示例代码

基于C++的一种字符串切分方法及示例代码

一、概述 在 Java 和 python 中&#xff0c;都有实现字符串切分的方法&#xff0c; 如split() &#xff0c;使用起来较为方便&#xff0c;但是在标准的 C 中&#xff0c;却没有内置的 split() 方法。 我们可以使用标准库中的一些函数和方法来实现字符串的切分&#xff0c;这里…
阅读更多...
【Java系列】OOM 时，JVM 堆栈信息保存和分析

【Java系列】OOM 时，JVM 堆栈信息保存和分析

一、前言 在日常开发中&#xff0c;即使代码写得再谨慎&#xff0c;免不了还是会发生各种意外的事件&#xff0c;比如服务器内存突然飙高&#xff0c;又或者发生内存溢出(OOM)。当发生这种情况时&#xff0c;我们怎么去排查&#xff0c;怎么去分析原因呢&#xff1f; 一般遇到…
阅读更多...
前端开发小技巧【Vue篇】 - 样式穿透 + 绑定变量

前端开发小技巧【Vue篇】 - 样式穿透 + 绑定变量

前言 样式穿透 Vue都是通过深度选择器来样式穿透的。当我们在写项目的时候&#xff0c;经常会导入第三方库&#xff0c;有些特殊的情况&#xff0c;就是在导入第三方库后&#xff0c;呈现的样式并不是我们想要的样式&#xff0c;所以我们需要对第三方的样式进行修改&#xff1…
阅读更多...
Java毕业设计 基于SSM jsp房屋租赁系统 房屋出租系统

Java毕业设计 基于SSM jsp房屋租赁系统 房屋出租系统

Java毕业设计 基于SSM jsp房屋租赁系统 房屋出租系统 SSM jsp 房屋租赁系统 房屋出租系统 功能介绍 用户&#xff1a;首页 图片轮播 搜索 登录注册 新闻公告 新闻公告详情 装修广告 热门房源 房源详情 合租 整租 商业办公 普通民宅 酒店式公寓 全部房源 留言交流 发布帖子 模…
阅读更多...
汽车大灯罩汽车尾灯罩破裂裂纹破损破洞掉角崩角等问题能修复吗？怎么修复？

汽车大灯罩汽车尾灯罩破裂裂纹破损破洞掉角崩角等问题能修复吗？怎么修复？

汽车大灯汽车尾灯破裂裂纹破损破洞掉角崩角等问题是一定可以修复的。 汽车灯罩的修复方法取决于灯罩的破损程度和材质。以下是一些常见的汽车灯罩修复方法&#xff1a; 肥皂水清洗&#xff1a;如果灯罩只是轻微模糊或发黄&#xff0c;可以使用肥皂水进行清洗。将肥皂水涂抹在…
阅读更多...
opencv-python连通域分割connectedComponents

opencv-python连通域分割connectedComponents

文章目录 连通域简介绘图代码函数说明 连通域简介 所谓连通域&#xff0c;即Connected Component&#xff0c;是一组彼此相连的像素点的集合&#xff0c;这些像素点彼此之间可以假设一条互相链接的路径&#xff0c;路径上所有像素的灰度一致&#xff0c;或者符合某个特定的条件…
阅读更多...
【软考高项】四、信息化发展之数字中国

【软考高项】四、信息化发展之数字中国

1、数字经济 定义&#xff1a;从本质上看&#xff0c;数字经济是一种新的技术经济范式&#xff0c;它建立在信息与通信技术的重大突破的基础上&#xff0c;以数字技术与实体经济融合驱动的产业梯次转型和经济创新发展的主引擎&#xff0c;在基础设施、生产要素、产业结构和治理…
阅读更多...
Day32：安全开发-JavaEE应用Servlet路由技术JDBCMybatis数据库生命周期

Day32：安全开发-JavaEE应用Servlet路由技术JDBCMybatis数据库生命周期

目录 JavaEE-HTTP-Servlet&路由&周期 JavaEE-数据库-JDBC&Mybatis&库 思维导图 Java知识点&#xff1a; 功能&#xff1a;数据库操作&#xff0c;文件操作&#xff0c;序列化数据&#xff0c;身份验证&#xff0c;框架开发&#xff0c;第三方库使用等. 框架…
阅读更多...
安装VMWare

安装VMWare

下载VMware软件&#xff08;已提供给大家&#xff09; 2&#xff0e;解压压缩文件 3.解压后文件夹中的内容 4.双击.exe进行VMware安装出现的第一个界面 5.点击下一步&#xff0c;出现以下界面 6.勾选我接受复选框&#xff0c;然后点击“下一步”。 7.后面几步都是点击“下一步”…
阅读更多...
精品基于Uniapp+ssm英语学习交流平台小程序打卡计划备忘录

精品基于Uniapp+ssm英语学习交流平台小程序打卡计划备忘录

《[含文档PPT源码等]精品微信小程序基于Uniappssm英语学习交流平台小程序》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; 开发语言&#xff1a;Java 后台框架&#xff1a;ssm 安卓框…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023