网站开发 平均工资,做网站月度总结,百度地图开放平台,软件交易网目录
打包器-WebPack-使用安全
第三方库-JQuery-使用安全
思维导图 JS知识点#xff1a; 功能#xff1a;登录验证#xff0c;文件操作#xff0c;SQL操作#xff0c;云应用接入#xff0c;框架开发#xff0c;打包器使用等 技术#xff1a;原生开发…目录
打包器-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 langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body**script srcsrc/2.js/scriptscript srcsrc/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 xy;
} 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 langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript srcmain.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 或 productionmode: development, // 或者 production//mode:production,
};entry: 指定入口文件即Webpack从哪个文件开始构建依赖关系图。output: 指定输出的目录和文件名以及是否在每次构建前清理输出目录。mode: 指定打包的模式可以是 ‘development’ 或 ‘production’。 development 模式下会启用一些开发工具容易造成源码泄露production 模式下会进行代码优化代码极简化。 运行webpack打包命令 npx webpack 打包成功后在index.html中将引用的代码切换为打包好的./dist/bundle. bodyscript 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版本。 WebPack 源码泄漏 - 模式选择 开发者模式下文件很全所有文件在浏览器中都可以看到 (在开发者工具的 Sources 中可以看到 webpack) 所以开发时若模式选择不当选择了开发者模式则会造成源码泄露。生产模式时封装很安全看不到引用的 js。模糊提取安全检查工具 - PacketFuzzerhttps://github.com/rtcatc/Packer-Fuzzer泄露源码可能会泄露敏感信息如数据库连接配置文件调用某些 api 接口等 原生态 JS前端语言直接浏览器显示源代码 NodeJS服务端语言浏览器不显示源代码 WebPack打包模式选择开发者模式后会造成源码泄漏egnodejs 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博客 思维导图
