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

目录

打包器-WebPack-使用&安全

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

思维导图


JS知识点:

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

技术:原生开发,DOM,常见库使用,框架开发(VueNodeJS),打包器(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博客

思维导图

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

RAG一文读懂!概念、场景、优势、对比微调与项目代码示例

本文结合“基于 ERNIE SDKLangChain 搭建个人知识库”的代码示例&#xff0c;为您讲解 RAG 的相关概念。 01 概念 在2020年 Facebook AI Research(FAIR)团队发表一篇名为《Retrieval-Augmented Generation for Knowledge-Intensive NLP Tasks》的论文。这篇论文首次提出了 RA…

Midjourney绘图欣赏系列(九)

Midjourney介绍 Midjourney 是生成式人工智能的一个很好的例子&#xff0c;它根据文本提示创建图像。它与 Dall-E 和 Stable Diffusion 一起成为最流行的 AI 艺术创作工具之一。与竞争对手不同&#xff0c;Midjourney 是自筹资金且闭源的&#xff0c;因此确切了解其幕后内容尚不…

行业认可 | 海云安上榜《2024年网络与信息安全行业全景图》多个领域

近日&#xff0c;深圳市网络与信息安全行业协会正式发布《2024年网络与信息安全行业全景图》。海云安凭借过硬的技术实力及成熟的网络与信息安全产品及服务获得行业认可&#xff0c;入围6大类目共计17项细分领域。包括&#xff1a; 业务安全&#xff08;软硬件开发安全、人工智…

《vtk9 book》 官方web版 第3章 - 计算机图形基础 (5 / 5)

vtkProp的组件和其他类型 通常希望将演员收集到一个依赖于变换的层次结构中。例如&#xff0c;一个机器人手臂可以由刚性连接的链接表示&#xff0c;这些链接在肩关节、上臂、肘部、下臂、腕关节和手部等关节处连接在一起。在这种配置中&#xff0c;当肩关节旋转时&#xff0c;…

[C++]20.实现红黑树。

实现红黑树 一.基本概念&#xff1a;1.红黑树的概念&#xff1a;2.红黑树的性质&#xff1a; 二.实现红黑树&#xff1a;1.基本结构&#xff1a;2.插入节点的多种情况&#xff1a;1.叔叔存在且为红&#xff1a;2.叔叔不存在/存在且为黑(单旋变色)3.叔叔不存在/存在且为黑(多旋&…

Wi-Fi 6E简介:扩展Wi-Fi的频谱资源

一、Wi-Fi 6E是什么&#xff1f; Wi-Fi 6E是Wi-Fi 6的一个增强版本&#xff0c;其中的“E”代表“Extended”。它采用了相同的技术标准&#xff0c;但使用了更高的频段。Wi-Fi 6E在5 GHz频段之外引入了新的6 GHz频段&#xff0c;为用户提供了更多的可用频谱&#xff0c;以便提…

滑动窗口算法(1)

目录 基本概念 209.长度最小的子数组 一、题目描述 二、思路解析 三、代码 3.无重复字符的最长子串 一、题目描述 二、思路解析 三、代码 1004.最大连续1的个数 一、题目描述 二、思路解析 三、代码 1658.将x减到0的最小操作数 一、题目描述 二、思路解析 三、…

JSP-内置对象

Out对象 作用&#xff1a;用来给页面输出数据。 主要方法&#xff1a; Print(string) </br>换行 Println(string) 方法同上 <%page language"java" contentType"text/html;charsetUTF-8"%> <html><head><title>test.…

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

基于深度学习的图像去雨去雾 文末附有源码下载地址 b站视频地址&#xff1a; https://www.bilibili.com/video/BV1Jr421p7cT/ 基于深度学习的图像去雨去雾&#xff0c;使用的网络为unet&#xff0c; 网络代码&#xff1a; import torch import torch.nn as nn from torchsumm…

Prompt提示工程上手指南:基础原理及实践(二)-Prompt主流策略

前言 上篇文章将Prompt提示工程大体概念和具体工作流程阐述清楚了&#xff0c;我们知道Prompt工程是指人们向生成性人工智能&#xff08;AI&#xff09;服务输入提示以生成文本或图像的过程中&#xff0c;对这些提示进行精炼的过程。生成人工智能是一个根据人类和机器产生的数…

【Python】使用plt库绘制动态曲线图,并导出为GIF或MP4

一、绘制初始图像 正常使用plt进行绘图&#xff0c;这里举例一个正弦函数&#xff1a; 二、绘制动态图的每一帧 思路&#xff1a; 根据横坐标点数绘制每一帧画面每次在当前坐标处&#xff0c;绘制一个点和垂直的线&#xff0c;来表示当前点可以在点上加个坐标等样式来增加…

Gut Microbes | 新生儿微生物组研究的方法学挑战

摘要 新生儿出生后&#xff0c;肠道菌群的定植对新生儿的健康发育起着至关重要的作用&#xff0c;并影响其日后的健康和疾病。了解新生儿肠道菌群的发育以及其与新生儿宿主的相互作用是一个重要的研究领域。然而&#xff0c;该领域的研究必须解决影响研究方法设计和实施的一系…

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

一、前言 在日常开发中&#xff0c;即使代码写得再谨慎&#xff0c;免不了还是会发生各种意外的事件&#xff0c;比如服务器内存突然飙高&#xff0c;又或者发生内存溢出(OOM)。当发生这种情况时&#xff0c;我们怎么去排查&#xff0c;怎么去分析原因呢&#xff1f; 一般遇到…

展厅设计中灯光的要点都是什么

1、白炽灯 白炽灯也就是普通普通白炽灯泡白炽灯有显色性强&#xff0c;开灯即亮&#xff0c;明暗可调&#xff0c;结构简单&#xff0c;造价低等优点&#xff0c;但缺点是使用寿命短&#xff0c;光效较低展厅设计中常使用于走道和其他部位。 2、卤钨灯 充气白炽灯填充气体中含有…

代码随想录day20(1)二叉树:二叉树的最小深度(leetcode111)

题目要求&#xff1a;求出一棵二叉树的最小深度 思路&#xff1a;最小深度指的是从根节点到最近叶子节点的最短路径上的节点数量&#xff08;左右孩子必须都为空&#xff01;&#xff09;。思路类似于求二叉树的最大深度&#xff0c;仍然采用后序遍历&#xff0c;增加判断只有…

Docker启动安装nacos(踩过坑版)

1、Docker 拉取镜像 docker pull nacos/nacos-server:v2.1.0 2、创建宿主机挂载目录 mkdir -p /mydata/nacos/logs/ mkdir -p /mydata/nacos/conf/ 3、启动nacos并复制文件到宿主机&#xff0c;关闭容器 启动容器 docker run -p 8848:8848 --name nacos -d nacos/nacos-se…

通过Maven创建Web工程

通过Maven创建Web工程 方式一方式二 方式一 1.先创建一个Maven工程 2.把该Maven模块的pom文件里添加一个war 3.选中该Maven模块 点击项目架构 4.手动添加一个Web架构 方式二 1.也是new一个模块 但是直接配置好Web 2.这里就是我IDEA对Maven的设置 3.第一次创建 可能…

【C++】STL--String

这一节主要总结string类的常见接口&#xff0c;以及完成了string类的模拟实现。 目录 标准库的String类 string类常见接口 string类对象的常见构造 string析构函数&#xff1a;~string string类对象的容量操作 string类对象的访问及遍历操作 string类对象的修改操作 s…

jvm题库详解

1、JVM内存模型 注意&#xff1a;这个是基于jdk1.8之前的虚拟机&#xff0c;在jdk1.8后 已经没有方法区&#xff0c;一并合并到堆中的元空间了 JVM内存区域总共分为两种类型 线程私有区域&#xff1a;程序计数器、本地方法栈和虚拟机栈 线程共享区域&#xff1a;堆&#xff08…

让若依生成的service、mapper继承mybatisPlus的基类

前言&#xff1a;若依继承mybatisPlus后&#xff0c;生成代码都要手动去service、serviceImpl、mapper文件去继承mybatisplus的基类&#xff0c;繁琐死了。这里通过修改若依生成模版从而达到生成文件后直接使用mybatisPlus的方法。 一、首先找到若依生成模版文件位置&#xff…