网络公司企业网站源码,合肥网站建设渠道,我们提供的网站建设,品牌注册公司时间轴#xff1a; 演示案例#xff1a;
打包器-WebPack-使用安全
第三方库-JQuery-使用安全
打包器-WebPack-使用安全
参考#xff1a;https://mp.weixin.qq.com/s/J3bpy-SsCnQ1lBov1L98WA
Webpack 是一个模块打包器。在 Webpack 中会将前端的所有资源…时间轴 演示案例
打包器-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 xy;
}
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 langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- script srcsrc/js/sum.js/scriptscript srcsrc/js/count.js/script script srcsrc/main.js/script -- //使用此函数将不用在一步步调用以上函数及文件script srcdist/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 运行结果 使用打包器和不适用打包器的区别
使用打包器
bodyscript srcdist/bundle.js/script //使用打包得到的bundle.js
/body
不使用打包器
bodyscript srcsrc/js/sum.js/scriptscript srcsrc/js/count.js/script script srcsrc/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
headmeta charsetutf-8titlejQuery XSS Examples (CVE-2020-11022/CVE-2020-11023)/titlescript srchttps://code.jquery.com/jquery-3.5.1.min.js/script!-- script srchttps://code.jquery.com/jquery-3.4.1.min.js/script --
/head
body
script
function test(n,jq){sanitizedHTML document.getElementById(pocn).innerHTML;if(jq){$(#div).html(sanitizedHTML);}else{div.innerHTMLsanitizedHTML;}
}
/script
h1jQuery XSS Examples (CVE-2020-11022/CVE-2020-11023)/h1
pPoCs of XSS bugs fixed in a hrefhttps://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.htmlEnglish/a / a href//masatokinugawa.l0.cm/2020/05/jquery3.5.0-xss.html日本語/a/ph2PoC 1/h2
button onclicktest(1)Assign to innerHTML/button button onclicktest(1,true)Append via .html()/button
xmp idpoc1
stylestyle /img srcyy onerroralert(1)
/xmph2PoC 2 (Only jQuery 3.x affected)/h2
button onclicktest(2)Assign to innerHTML/button button onclicktest(2,true)Append via .html()/button
xmp idpoc2
img altx title/img srcyy onerroralert(1)
/xmph2PoC 3/h2
button onclicktest(3)Assign to innerHTML/button button onclicktest(3,true)Append via .html()/button
xmp idpoc3
optionstyle/option/selectimg srcyy onerroralert(1)/style
/xmpdiv iddiv/div
/body
/html
代码逻辑
为什么写在前面的alert1弹窗因为他放在xmp代码中。 jquery版本3.4.1版本会显示弹窗 此次点击Append via.html()会显示弹窗 jquery版本3.5.1版本点击后没有弹窗 此次是点击append via.html()没有弹窗。 总结 Jquery内置的过滤
本身dom stylestyle /img srcyy οnerrοralert(1)
3.5.1 stylestyle /img srcyy οnerrοralert(1) /style
3.4.1 stylestyle /styleimg srcyy οnerrοralert(1)
利用漏洞 版本符合stylestyle /styleimg srcyy οnerrοralert(1) 值可控 就可以造成xss 能够造成漏洞的原因
内置过滤
jQuery框架漏洞全总结及开发建议_jquery漏洞-CSDN博客 此文章由李豆豆喵和番薯小羊卷~共同完成。
