webpack代码混淆

最新推荐文章于 2024-08-05 00:34:55 发布
最新推荐文章于 2024-08-05 00:34:55 发布
阅读量4.1k 收藏 12
点赞数
分类专栏： WEB前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TW934440653/article/details/103582990
版权

作者：桑榆
QQ：934440653
有问题，评论留言，或qq联系

安装

npm install --save-dev webpack-obfuscator

属性

{
    compact: true,//压缩,无换行
    controlFlowFlattening: false,//是否启用控制流扁平化(降低1.5倍的运行速度)
    controlFlowFlatteningThreshold: 0.75,//应用概率;在较大的代码库中，建议降低此值，因为大量的控制流转换可能会增加代码的大小并降低代码的速度。
    deadCodeInjection: false,//随机的死代码块(增加了混淆代码的大小)
    deadCodeInjectionThreshold: 0.4,//死代码块的影响概率
    debugProtection: false,//此选项几乎不可能使用开发者工具的控制台选项卡
    debugProtectionInterval: false,//如果选中，则会在“控制台”选项卡上使用间隔强制调试模式，从而更难使用“开发人员工具”的其他功能。
    disableConsoleOutput: false,//通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。这使得调试器的使用更加困难。
 
    domainLock: [],//锁定混淆的源代码，使其仅在特定域和/或子域上运行。这使得某人只需复制并粘贴您的源代码并在其他地方运行就变得非常困难。
    identifierNamesGenerator: 'hexadecimal',//标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
    identifiersPrefix: '',//全局标识符添加特定前缀,在混淆同一页面上加载的多个文件时使用此选项。此选项有助于避免这些文件的全局标识符之间发生冲突。为每个文件使用不同的前缀
    inputFileName: '',
    log: false,//允许将信息记录到控制台。
    renameGlobals: false,//是否启用全局变量和函数名称的混淆
    reservedNames: [],//禁用模糊处理和生成标识符
    reservedStrings: [],//禁用字符串文字的转换
    rotateStringArray: true,//通过固定和随机（在代码混淆时生成）的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
    seed: 0,
    selfDefending: false,//混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
    sourceMap: false,
    sourceMapBaseUrl: '',
    sourceMapFileName: '',
    sourceMapMode: 'separate',
    stringArray: true,//删除字符串文字并将它们放在一个特殊的数组中
    stringArrayEncoding: false,//编码的所有字符串文字stringArray使用base64或rc4并插入即用其解码回在运行时的特殊代码。true（boolean）：stringArray使用编码值base64;false（boolean）：不编码stringArray值;'base64'（string）：stringArray使用编码值base64;'rc4'（string）：stringArray使用编码值rc4。大约慢30-50％base64，但更难获得初始值。建议禁用unicodeEscapeSequence带rc4编码的选项以防止非常大的混淆代码。
    stringArrayThreshold: 0.75,//调整字符串文字将插入stringArray的概率
    target: 'browser',//您可以将混淆代码的目标环境设置为以下之一：Browser;Browser No Eval;Node
    transformObjectKeys: false,//是否启用混淆对象键
    unicodeEscapeSequence: false//允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
}

1. 低混淆，高性能(官方文档)

性能稍微慢于没有混淆

new JavaScriptObfuscator({
            compact: true,//压缩代码
            controlFlowFlattening: false,//是否启用控制流扁平化(降低1.5倍的运行速度)
            deadCodeInjection: false,///随机的死代码块(增加了混淆代码的大小)
            debugProtection: false,//此选项几乎不可能使用开发者工具的控制台选项卡
            debugProtectionInterval: false,//如果选中，则会在“控制台”选项卡上使用间隔强制调试模式，从而更难使用“开发人员工具”的其他功能。
            disableConsoleOutput: true,//通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。这使得调试器的使用更加困难。
            identifierNamesGenerator: 'hexadecimal',//标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
            log: false,
            renameGlobals: false,//是否启用全局变量和函数名称的混淆
            rotateStringArray: true,//通过固定和随机（在代码混淆时生成）的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
            selfDefending: true,//混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
            stringArray: true,//删除字符串文字并将它们放在一个特殊的数组中
            stringArrayEncoding: false,
            stringArrayThreshold: 0.75,
            unicodeEscapeSequence: false//允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
        }, []),

2. 中等混淆，最佳性能(官方文档)

性能比没有模糊处理慢30-35％

 new JavaScriptObfuscator({
            compact: true,//压缩代码
            controlFlowFlattening: true,是否启用控制流扁平化(降低1.5倍的运行速度)
            controlFlowFlatteningThreshold: 0.75,应用概率;在较大的代码库中，建议降低此值，因为大量的控制流转换可能会增加代码的大小并降低代码的速度。
            deadCodeInjection: true,//随机的死代码块(增加了混淆代码的大小)
            deadCodeInjectionThreshold: 0.4,//死代码块的影响概率
            debugProtection: false,//此选项几乎不可能使用开发者工具的控制台选项卡
            debugProtectionInterval: false,//如果选中，则会在“控制台”选项卡上使用间隔强制调试模式，从而更难使用“开发人员工具”的其他功能。
            disableConsoleOutput: true,//通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。这使得调试器的使用更加困难。
            identifierNamesGenerator: 'hexadecimal',//标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
            log: false,
            renameGlobals: false,//是否启用全局变量和函数名称的混淆
            rotateStringArray: true,//通过固定和随机（在代码混淆时生成）的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
            selfDefending: true,//混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
            stringArray: true,//删除字符串文字并将它们放在一个特殊的数组中
            stringArrayEncoding: 'base64',
            stringArrayThreshold: 0.75,
            transformObjectKeys: true,
            unicodeEscapeSequence: false//允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
        }, []),

3.高度混淆，低性能(官方文档)

性能比没有模糊处理慢50-100％

new JavaScriptObfuscator({
            compact: true,//压缩代码
            controlFlowFlattening: true,//是否启用控制流扁平化(降低1.5倍的运行速度)
            controlFlowFlatteningThreshold: 1,//应用概率;在较大的代码库中，建议降低此值，因为大量的控制流转换可能会增加代码的大小并降低代码的速度。
            deadCodeInjection: true,//随机的死代码块(增加了混淆代码的大小)
            deadCodeInjectionThreshold: 1,//死代码块的影响概率
            debugProtection: true,//此选项几乎不可能使用开发者工具的控制台选项卡
            debugProtectionInterval: true,//如果选中，则会在“控制台”选项卡上使用间隔强制调试模式，从而更难使用“开发人员工具”的其他功能。
            disableConsoleOutput: true,//通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。这使得调试器的使用更加困难。
            identifierNamesGenerator: 'hexadecimal',//标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
            log: false,
            renameGlobals: false,//是否启用全局变量和函数名称的混淆
            rotateStringArray: true,//通过固定和随机（在代码混淆时生成）的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
            selfDefending: true,//混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
            stringArray: true,//删除字符串文字并将它们放在一个特殊的数组中
            stringArrayEncoding: 'rc4',
            stringArrayThreshold: 1,
            transformObjectKeys: true,
            unicodeEscapeSequence: false//允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
        }, []),

4. 排除js编译，或排除文件夹内所有js

1.排除单个js
注意这里的main2.js 是排除这个文件,也就是说这个文件不混淆,其他文件混淆


const JavaScriptObfuscator = require('webpack-obfuscator');

module.exports = {
    entry: {
        'mian1': './index1.js',
        'main2': './index2.js'
    },
    output: {
        path: 'dist',
        filename: '[name].js' 
    },
    plugins: [
        new JavaScriptObfuscator({
            rotateUnicodeArray: true
        }, ['main2.js'])
    ]
};
桑榆未晚_
关注
  • 0
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue 应用程序性能优化：代码压缩、加密和混淆配置详解
m0_74760716的博客
12-06 2853
所以就要使用到混淆器，混淆器是把里面的代码变量等信息进行重命名，这样可读性会变得非常差，接着，到这里，我们完成了对代码的混淆，但是还没有进行加固，防止反编译，所以，请往下看然后导入自己的包就可以了，这里是流水式的走下来，所以只需要导入和导出就可以了，添加单个文件，选择好刚刚混淆后的包，然后你做的事情就是等，等待上传完--加固完--下载完--已完成，当到已完成的时候，说明这里已经可以导出了，导出需要前面提到的自己创建的签名，这里可是会用到的，如果不用，则包安装包可能会出现问题。
webpack-obfuscator, web service的javascript混淆插件插件.zip
09-17
webpack-obfuscator, web service的javascript混淆插件插件 web service的 javascript混淆插件插件 安装使用NPM安装软件包并将它的添加到你的devDependencies:npm install --save-dev webpack-obfuscator用法：
使用 webpack-obfuscator 进行代码混淆及报错解决方案
最新发布
a123456234的博客
08-05 1441
Error: The number of constructor arguments in the derived class t must be >= than the number of constructor arguments of its base class. TypeError: Cannot read property 'tap' of undefined TypeError: Cannot read property 'sourceAndMap' of undefined
webpack 代码混淆
m0_38066007的博客
10-29 4987
webpack是如何进行代码混淆的。这里用到了一个插件。 uglifyjs-webpack-plugin：https://www.npmjs.com/package/uglifyjs-webpack-plugin npm install uglifyjs-webpack-plugin --save-dev 基中有两个子属性： minimize 正常情况下开发环境为false,...
面试必备！webpack 中那些最易混淆的 5 个知识点
weixin_34414650的博客
05-29 598
原文发表于我的简陋博客 前两天为了优化公司的代码打包项目，恶补了很多 webpack4 的知识。要是放在几年前让我学习 webpack 我肯定是拒绝的，之前看过 webpack 的旧文档，比我们内部项目的文档还要简陋。 但是最近看了一下 webpack4 的文档，发现 webpack官网的 指南 写的还不错，跟着这份指南学会 webpack4 基础配置问题不大，想系统学习 webpack 的朋友...
webpack将js混淆代码
qq_46344419的博客
08-06 1253
打包混淆代码
Vue 教程(三十六)webpack 之代码混淆插件 Uglifyjs
yuan_xw的专栏
08-10 1973
Vue 教程(三十六)webpack 之代码混淆插件 Uglifyjs Uglifyjs 插件，可以对 js 等文件进行压缩 安装插件 npm install uglifyjs-webpack-plugin@1.1.1 --save-dev 修改 webpack.config.js 文件 // 导入Node中path常量 const path = require("path"); const webpack = require("webpack"); const HtmlWebpackPlugi
使用webpack-obfuscator进行代码加密混淆
alxw2010的博客
11-11 1176
vue项目使用webpack-obfuscator进行代码加密混淆 适应 vue 2.6.11 vue-admin
vue webpack压缩代码_webpack不混淆、不压缩指定js文件
weixin_31092009的博客
12-30 5615
在项目中使用了mozilla/pdf.js，在使用中需要设置GlobalWorkerOptions.workerSrc，代码如下import PDFJS from 'pdfjs-dist'import workerSrc from 'pdfjs-dist/build/pdf.worker.js'PDFJS.GlobalWorkerOptions.workerSrc = workerSrc;cons...
js反混淆工具
12-18
js反混淆工具，可以反混淆被混淆和压缩了的js文件
JS逆向-常见压缩和混淆之webpack（1）
Python进阶专栏《爬虫实战进阶》，《数据分析入门与实战》原创作者
03-26 1248
对于代码混淆，其本质是对于代码标识符和结构的调整，从而达到不可读不可调试的目的，常用的混淆有字符串，变量名混淆。说到webpack，它是当前前端最热门的模块化管理和打包工具，本质上webpack只是一个现代JavaScript应用程序的静态模块打包工具，并不是混淆工具，尽管webpack有一些插件可以把代码混淆化，所以现在很多网站都把webpack和obfuscator混淆工具结合使用，这两者结合起来，会让前端代码变得难以阅读和分析。另外目前市面上比较常见的混淆还有ob混淆，特征是定义数组，数组位移。
【js】从0开始工程化项目、webpack打包混淆js代码
kinghzking的专栏
06-29 1802
公司代码提供给第三方使用，为了安全不泄露源码，需要对给出的代码进行加密混淆，前端代码虽然无法做到完全加密混淆，但是通过使用 webpack-obfuscator 通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆，达到无法恢复源码甚至无法阅读的目的。因工作需要，经常写写短小精悍的js，然后再去掉注释，混淆，再加密，麻烦的很。从最初的需求来看，为了可以实现模块化，同时帮忙打包、混淆代码。目录结果按照习惯编写就行，下面是小编的目录，仅供参考。，这时候需要不断尝试修正，或者将相关代码排除出去。
【已解决】Vue项目中Vite以及Webpack代码混淆处理
热门推荐
编码世界
10-23 6万+
关于代码混淆网上案例铺天盖地，90%以上都是`Webpack`相关来处理代码混淆，对于`Vite`的案例少之又少，在解决vite项目代码混淆我花了一些时间来找合适的插件区处理这个问题，最终选择`rollup-plugin-obfuscator`。另外第四章节介绍了`Webpack` 处理代码混淆方案。
vue项目配置 webpack-obfuscator 进行代码加密混淆
chinaherolts2008的博客
02-25 3112
背景 公司代码提供给第三方使用，为了不完全泄露源码，需要对给出的代码进行加密混淆，前端代码虽然无法做到完全加密混淆，但是通过使用 webpack-obfuscator 通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆，达到无法恢复源码甚至无法阅读的目的。 安装 webpack-obfuscator https://www.npmjs.com/package/webpack-obfuscator npm install --save-dev webpack-obfuscator 配置 // w
webpack中的代码压缩&&混淆机制
ding1885的博客
07-30 3410
压缩 删除 Javascript 代码中所有注释、跳格符号、换行符号及无用的空格，缩短变量名称从而压缩 JS 文件大小。并且不同作用域的变量名是可以重复的，类似a,b,c可以反复出现。 混淆 经过编码将变量和函数原命名改为毫无意义的命名，以防止他人窥视和窃取 Javascript 源代码。让我们的代码尽可能的不可读，常见的做法有：分离变量，增加无意义的代码，打乱控制流。 ...
js vue 前端代码混淆webpack-obfuscator
qq_34200636的博客
04-11 2271
js vue 前端代码混淆webpack-obfuscator
webpack-obfuscator js代码混淆
weixin_52131798的博客
11-16 1371
使用：（作用：第三方公司使用公司软件，使用这个插件可以保护源码，它会在源码中加入废代码段，字符编码转义使构建代码完全混淆，达到无法恢复源码甚至无法阅读的目的） npm install --save-dev javascript-obfuscator webpack-obfuscator 在vue.config.js中引入使用 const WebpackObfuscator = require('webpack-obfuscator'); plugins: [ new WebpackObf
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值