目錄
打包器-WebPack-使用&安全
第三方庫(kù)-JQuery-使用&安全
思維導(dǎo)圖
JS知識(shí)點(diǎn)：
功能：登錄驗(yàn)證，文件操作，SQL操作，云應(yīng)用接入，框架開(kāi)發(fā)，打包器使用等
技術(shù)：原生開(kāi)發(fā)，DOM，常見(jiàn)庫(kù)使用，框架開(kāi)發(fā)（Vue，NodeJS），打包器(Webpack)等
安全：原生開(kāi)發(fā)安全，NodeJS安全，Vue安全，打包器Webpack安全，三方庫(kù)安全問(wèn)題等
打包器-WebPack-使用&安全
參考：https://mp.weixin.qq.com/s/J3bpy-SsCnQ1lBov1L98WAWebpack是一個(gè)模塊打包器。在Webpack中會(huì)將前端的所有資源文件都作為模塊處理。它將根據(jù)模塊的依賴(lài)關(guān)系進(jìn)行分析，生成對(duì)應(yīng)的資源。
五個(gè)核心概念:1.?【入口(entry)】：指示webpack應(yīng)該使用哪個(gè)模塊，來(lái)作為構(gòu)建內(nèi)部依賴(lài)圖開(kāi)始。
2.?【輸出(output)】：在哪里輸出文件，以及如何命名這些文件。
3.?【Loader】：處理那些非JavaScript文件（webpack?自身只能解析?JavaScript和json）。webpack?本身只能處理JS、JSON模塊，如果要加載其他類(lèi)型的文件(模塊)，就需要使用對(duì)應(yīng)的loader。
4.?【插件(plugins)】：執(zhí)行范圍更廣的任務(wù)，從打包到優(yōu)化都可以實(shí)現(xiàn)。
5.?【模式(mode)】：有生產(chǎn)模式production和開(kāi)發(fā)模式development。
使用：
1、創(chuàng)建需打包文件
2、安裝webpack庫(kù)
3、創(chuàng)建webpack配置文件
4、運(yùn)行webpack打包命令
安全：1、WebPack源碼泄漏-模式選擇
2、模糊提取安全檢查-PacketFuzzer
https://github.com/rtcatc/Packer-Fuzzer
原生態(tài)JS：前端語(yǔ)言直接瀏覽器顯示源代碼
NodeJS：服務(wù)段語(yǔ)言瀏覽器不顯示源代碼
WebPack：打包模式選擇開(kāi)發(fā)者模式后會(huì)造成源碼泄漏（nodejs?vue）
為什么要使用Webpack？
創(chuàng)建WebPack，并創(chuàng)建目錄src在目錄下創(chuàng)建1.js 2.js
// 1。js function test(){ console.log('test'); }test();在創(chuàng)建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相互依賴(lài)的順序不同，造成無(wú)法執(zhí)行；
使用Webpack的主要原因
- 模塊化支持：Webpack 支持將應(yīng)用程序拆分為模塊，使開(kāi)發(fā)人員能夠使用模塊化的方式組織和管理代碼。模塊化能夠提高代碼的可維護(hù)性、重用性和可測(cè)試性。
- 資源打包：Webpack 可以將項(xiàng)目中的各種資源（例如 JavaScript、CSS、圖像等）視為模塊，并將它們打包成一個(gè)或多個(gè)最終的靜態(tài)資源文件。這樣可以減少網(wǎng)絡(luò)請(qǐng)求的次數(shù)，提高應(yīng)用程序的加載性能。
- 代碼分割：Webpack 支持將應(yīng)用程序的代碼分割成多個(gè)塊（chunks），并在需要時(shí)按需加載。這種代碼分割的技術(shù)可以提高應(yīng)用程序的初始加載速度，并減小用戶需要下載的初始文件大小。
- 資源優(yōu)化：Webpack 提供了豐富的插件和工具生態(tài)系統(tǒng)，可以進(jìn)行各種資源優(yōu)化和轉(zhuǎn)換，例如壓縮代碼、處理樣式預(yù)處理器、優(yōu)化圖像等。這些優(yōu)化可以減小資源文件的大小，提高應(yīng)用程序的性能。
- 開(kāi)發(fā)環(huán)境支持：Webpack 提供了強(qiáng)大的開(kāi)發(fā)環(huán)境支持，包括開(kāi)發(fā)服務(wù)器、熱模塊替換（Hot Module Replacement）、源代碼映射等功能。這些功能可以提升開(kāi)發(fā)效率，加快開(kāi)發(fā)周期。
webpack使用
創(chuàng)建需打包文件
創(chuàng)建WebPack，并創(chuàng)建目錄src在目錄下創(chuàng)建js目錄在js目錄下創(chuàng)建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));在創(chuàng)建src同級(jí)文件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>報(bào)錯(cuò)Cannot use import statement outside a module，嘗試在不支持模塊的環(huán)境中使用 ES6 的 import 打包語(yǔ)句造成無(wú)法執(zhí)行
安裝webpack庫(kù)：npm i webpack webpack-cli -g (安裝到全局目錄)
創(chuàng)建webpack配置文件
創(chuàng)建src同級(jí)文件webpack.config.js不能改名稱(chēng)// 引入path模塊，用于處理文件路徑 const path = require('path'); // Webpack配置對(duì)象 module.exports = { // 指定入口文件，即Webpack從這個(gè)文件開(kāi)始構(gòu)建依賴(lài)圖 entry: './src/main.js', // 指定輸出配置 output: { // 輸出的文件路徑，使用path.resolve確保路徑的正確性 path: path.resolve(__dirname, 'dist'), // 輸出的文件名 filename: 'bundle.js', // 在每次構(gòu)建前清理輸出目錄 clean: true, }, // 指定打包模式，可以是 'development' 或 'production' mode: "development", // 或者 "production" //mode:"production", };
- entry: 指定入口文件，即Webpack從哪個(gè)文件開(kāi)始構(gòu)建依賴(lài)關(guān)系圖。
- output: 指定輸出的目錄和文件名，以及是否在每次構(gòu)建前清理輸出目錄。
- mode: 指定打包的模式，可以是 ‘development’ 或 ‘production’。
- development 模式下會(huì)啟用一些開(kāi)發(fā)工具，容易造成源碼泄露
- production 模式下會(huì)進(jìn)行代碼優(yōu)化，代碼極簡(jiǎn)化。
運(yùn)行webpack打包命令 npx webpack
打包成功后，在index.html中將引用的代碼切換為打包好的./dist/bundle.
<body> <script src="./dist/bundle.js"></script> </body>運(yùn)行成功，并回顯定義的兩個(gè)函數(shù)計(jì)算結(jié)果
webpack安全
WebPack源碼泄漏-模式選擇
- development 模式下會(huì)啟用一些開(kāi)發(fā)工具，容易造成源碼泄露
- production 模式下會(huì)進(jìn)行代碼優(yōu)化，代碼極簡(jiǎn)化。
模糊提取安全檢查-PacketFuzzer
https://github.com/rtcatc/Packer-Fuzzer原生態(tài)JS：前端語(yǔ)言直接瀏覽器顯示源代碼
NodeJS：服務(wù)段語(yǔ)言瀏覽器不顯示源代碼
WebPack：打包模式選擇開(kāi)發(fā)者模式后會(huì)造成源碼泄漏（nodejs vue）
這類(lèi)打包器會(huì)將整站的API和API參數(shù)打包在一起供Web集中調(diào)用，這也便于我們快速發(fā)現(xiàn)網(wǎng)站的功能和API清單，但往往這些打包器所生成的JS文件數(shù)量異常之多并且總JS代碼量異常龐大（多達(dá)上萬(wàn)行），這給我們的手工測(cè)試帶來(lái)了極大的不便，Packer Fuzzer軟件應(yīng)運(yùn)而生。
本工具支持自動(dòng)模糊提取對(duì)應(yīng)目標(biāo)站點(diǎn)的API以及API對(duì)應(yīng)的參數(shù)內(nèi)容，并支持對(duì)：未授權(quán)訪問(wèn)、敏感信息泄露、CORS、SQL注入、水平越權(quán)、弱口令、任意文件上傳七大漏洞進(jìn)行模糊高效的快速檢測(cè)。在掃描結(jié)束之后，本工具還支持自動(dòng)生成掃描報(bào)告，您可以選擇便于分析的HTML版本以及較為正規(guī)的doc、pdf、txt版本。
- WebPack 源碼泄漏 - 模式選擇
- 開(kāi)發(fā)者模式下文件很全，所有文件在瀏覽器中都可以看到 (在開(kāi)發(fā)者工具的 Sources 中，可以看到 webpack)，
所以開(kāi)發(fā)時(shí)若模式選擇不當(dāng)，選擇了開(kāi)發(fā)者模式，則會(huì)造成源碼泄露。- 生產(chǎn)模式時(shí)封裝很安全，看不到引用的 js。
- 模糊提取安全檢查工具 - PacketFuzzer：https://github.com/rtcatc/Packer-Fuzzer
- 泄露源碼可能會(huì)泄露敏感信息，如數(shù)據(jù)庫(kù)連接配置文件，調(diào)用某些 api 接口等
原生態(tài) JS：前端語(yǔ)言直接瀏覽器顯示源代碼
NodeJS：服務(wù)端語(yǔ)言瀏覽器不顯示源代碼
WebPack：打包模式選擇開(kāi)發(fā)者模式后會(huì)造成源碼泄漏（eg：nodejs vue）
第三方庫(kù)-JQuery-使用&安全
jQuery是一個(gè)快速、簡(jiǎn)潔的JavaScript框架,是一個(gè)豐富的JavaScript代碼庫(kù)。設(shè)計(jì)目的是為了寫(xiě)更少的代碼，做更多的事情。它封裝JavaScript常用功能代碼，提供一種簡(jiǎn)便的JavaScript設(shè)計(jì)模式，優(yōu)化HTML文檔操作、事件處理、動(dòng)畫(huà)設(shè)計(jì)和Ajax交互。1、使用：
引用路徑：https://www.jq22.com/jquery-info122
2、安全：
檢測(cè)：http://research.insecurelabs.org/jquery/test/
測(cè)試：CVE-2020-11022/CVE-2020-11023
參考：https://blog.csdn.net/weixin_44309905/article/details/120902867
JQuery使用
引用路徑：https://www.jq22.com/jquery-info122
沒(méi)細(xì)講，目前只要了解開(kāi)發(fā)中引用了不安全有漏洞的庫(kù)也會(huì)造成漏洞
1、使用：
jquery 引用路徑：jquery下載所有版本（實(shí)時(shí)更新）
2、安全：
檢測(cè)：http://research.insecurelabs.org/jquery/test/
測(cè)試：CVE-2020-11022/CVE-2020-11023
Javascript 框架庫(kù)漏洞驗(yàn)證：Javascript框架庫(kù)漏洞驗(yàn)證-CSDN博客jQuery 框架漏洞全總結(jié)及開(kāi)發(fā)建議：Javascript框架庫(kù)漏洞驗(yàn)證-CSDN博客文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-839814.html
思維導(dǎo)圖
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-839814.html
到了這里，關(guān)于Day31：安全開(kāi)發(fā)-JS應(yīng)用&WebPack打包器&第三方庫(kù)JQuery&安裝使用&安全檢測(cè)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
