【已解决】Vue项目中Vite以及Webpack代码混淆处理

news2024/11/25 16:29:29

🐱 个人主页:不叫猫先生,公众号:前端舵手
🙋‍♂️ 作者简介:前端领域优质作者、阿里云专家博主,共同学习共同进步,一起加油呀!
📢 资料领取:前端进阶资料可以找我免费领取
🔥 摸鱼学习交流:我们的宗旨是在「工作中摸鱼,摸鱼中进步」,期待大佬一起来摸鱼(文末有我wx或者私信)

在这里插入图片描述

目录

  • 前言
  • 一、插件介绍
    • 1、原理和工作方式:
    • 2、特点:
  • 二、Vite混淆处理
    • 1、安装
    • 2、引入
    • 3、配置项解释
  • 三、Vite混淆处理可能会出现的异常问题
    • 1、Uncaught SyntaxError: Unexpected token '<'
  • 四、webpack混淆处理
    • 1、查看`Webpack`的版本
    • 2、安装
    • 3、配置

前言

关于代码混淆网上案例铺天盖地,90%以上都是Webpack相关来处理代码混淆,对于Vite的案例少之又少,在解决vite项目代码混淆我花了一些时间来找合适的插件区处理这个问题,最终选择rollup-plugin-obfuscator。另外第四章节介绍了Webpack 处理代码混淆方案。

rollup-plugin-obfuscator 的 npm 地址:链接直达

javascript-obfuscator 的 githup 地址:链接直达

一、插件介绍

rollup-plugin-obfuscator 是 Rollup 构建工具的一个插件,用于对 JavaScript 代码进行混淆和压缩。它的主要作用是增加 JavaScript 代码的安全性和减小生成文件的大小。

1、原理和工作方式:

  • 代码混淆:插件通过采用各种技巧来混淆 JavaScript 代码,使其变得难以理解和逆向工程。这些技巧包括变量名重命名、函数提取、字符串替换等。例如,它可以将原始代码中的变量名和函数名改为无意义的名称,从而增加代码的复杂性。

  • 代码压缩:除了混淆,插件还可以对代码进行压缩,删除不必要的空格、注释和缩短变量名,以减小生成文件的大小。这有助于加快网页加载速度。

  • 选项配置:插件通常提供了许多选项配置,允许开发者自定义混淆和压缩的程度。这些选项包括设置要保留的函数、排除特定文件或模块等。

2、特点:

  • 安全性增强:混淆使代码更难以被他人理解,降低了代码被盗用、破解或修改的风险。这对于保护知识产权和敏感数据非常有用。

  • 文件大小优化:插件通过代码压缩有助于减小生成文件的大小,从而减少了网络传输时间和提高了网页加载速度。

  • 适用于前端项目:rollup-plugin-obfuscator 特别适用于前端项目,如网页应用程序,以增加客户端端代码的安全性。

  • 可定制性:插件通常提供广泛的选项来满足不同项目的需求,开发者可以根据具体情况进行配置。

  • 保留功能性:混淆后的代码通常会保留原有的功能性,确保应用程序仍然能够正常运行。

混淆并不是绝对的安全措施,有经验的黑客仍然可能尝试解密代码。因此,在需要更高安全性的情况下,还需要采取其他措施,如服务器端验证和加密。

二、Vite混淆处理

项目环境:Vue3+Vite

1、安装

yarn add --dev rollup-plugin-obfuscator javascript-obfuscator
或者
npm install --save-dev rollup-plugin-obfuscator javascript-obfuscator

在打包时候还会报错,需要安装下面的依赖

yarn add javascript-obfuscator -D

2、引入

vite.config.ts中引入插件,并进行设置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import obfuscator from 'rollup-plugin-obfuscator';
export default defineConfig({
  // base: "",
  build: {
    minify: 'esbuild', // 默认
  },
  esbuild: {
    drop: ['console', 'debugger'],//打包去除
  },
  plugins: [
    vue(),
    obfuscator({
      global:false,
      // options配置项实际为 javascript-obfuscator 选项,具体可查看https://github.com/javascript-obfuscator/javascript-obfuscator
      options: {
        compact: true,
        controlFlowFlattening: true,
        controlFlowFlatteningThreshold: 0.75,
        numbersToExpressions: true,
        simplify: true,
        stringArrayShuffle: true,
        splitStrings: true,
        splitStringsChunkLength: 10,
        rotateUnicodeArray: true,
        deadCodeInjection: true,
        deadCodeInjectionThreshold: 0.4,
        debugProtection: false,
        debugProtectionInterval: 2000,
        disableConsoleOutput: true,
        domainLock: [],
        identifierNamesGenerator: "hexadecimal",
        identifiersPrefix: "",
        inputFileName: "",
        log: true,
        renameGlobals: true,
        reservedNames: [],
        reservedStrings: [],
        seed: 0,
        selfDefending: true,
        sourceMap: false,
        sourceMapBaseUrl: "",
        sourceMapFileName: "",
        sourceMapMode: "separate",
        stringArray: true,
        stringArrayEncoding: ["base64"],
        stringArrayThreshold: 0.75,
        target: "browser",
        transformObjectKeys: true,
        unicodeEscapeSequence: true,

        domainLockRedirectUrl: "about:blank",
        forceTransformStrings: [],
        identifierNamesCache: null,
        identifiersDictionary: [],
        ignoreImports: true,
        optionsPreset: "default",
        renameProperties: false,
        renamePropertiesMode: "safe",
        sourceMapSourcesMode: "sources-content",
       
        stringArrayCallsTransform: true,
        stringArrayCallsTransformThreshold: 0.5,
       
        stringArrayIndexesType: ["hexadecimal-number"],
        stringArrayIndexShift: true,
        stringArrayRotate: true,
        stringArrayWrappersCount: 1,
        stringArrayWrappersChainedCalls: true,
        stringArrayWrappersParametersMaxCount: 2,
        stringArrayWrappersType: "variable",
      }
    })
  ]
})

3、配置项解释

下面的列表是 rollup-plugin-obfuscator 插件的配置选项列表,每个选项都用于定制代码混淆和压缩的方式。以下是每个选项的解释:

配置项描述
global这是一个布尔值,如果设置为 false,将禁用混淆全局作用域的代码。
compact一个布尔值,如果设置为 true,则启用代码的紧凑模式,删除不必要的空白字符和注释。
controlFlowFlattening启用控制流混淆,使代码的控制流程变得更加复杂,从而增加代码的难以理解性。
controlFlowFlatteningThreshold控制流混淆的阈值,影响混淆程度。
numbersToExpressions如果设置为 true,将数字转换为表达式,增加代码的复杂性。
simplify启用简化,用于删除不必要的代码。
stringArrayShuffle打乱字符串数组,使字符串更难以理解。
splitStrings将字符串拆分成小块,增加代码的复杂性。
splitStringsChunkLength控制字符串拆分的块大小。
rotateUnicodeArray旋转 Unicode 字符数组,增加代码的混淆度。
deadCodeInjection开启膨胀,插入死代码,使代码更复杂,阻碍逆向工程。
deadCodeInjectionThreshold死代码注入的阈值。
debugProtection如果设置为 true,将启用调试保护。
debugProtectionInterval控制调试保护的间隔。
disableConsoleOutput禁用控制台输出。
domainLock限制脚本运行的域名列表。
identifierNamesGenerator控制混淆后的标识符名称生成方式,如 “hexadecimal”。
identifiersPrefix标识符前缀,可增加混淆度。
inputFileName输入文件名。
log是否启用日志记录。
renameGlobals是否重命名全局变量。
reservedNames保留的标识符名字列表。
reservedStrings保留的字符串列表。
seed用于生成随机数的种子。
selfDefending如果设置为 true,将启用自我保护模式。
sourceMap是否生成源映射文件。
stringArray是否启用字符串数组混淆。
stringArrayEncoding字符串数组的编码方式,如 “base64”。
stringArrayThreshold控制字符串数组混淆的阈值。
target目标环境,如 “browser”.
transformObjectKeys是否转换对象键名。
unicodeEscapeSequence启用 Unicode 转义序列。
domainLockRedirectUrl域名锁定重定向的URL。
forceTransformStrings强制转换字符串的列表。
identifierNamesCache标识符名称的缓存。
identifiersDictionary标识符字典,用于自定义标识符名称。
ignoreImports是否忽略导入的模块。
optionsPreset预定义的配置选项集,如 “default”.
renameProperties是否重命名对象属性。
renamePropertiesMode对象属性重命名模式,如 “safe”.
sourceMapSourcesMode源映射的模式。
stringArrayCallsTransform是否转换字符串数组调用。
stringArrayCallsTransformThreshold字符串数组调用转换的阈值。
stringArrayIndexesType字符串数组索引的类型,如 “hexadecimal-number”.
stringArrayIndexShift是否进行字符串数组索引的位移。
stringArrayRotate是否旋转字符串数组。
stringArrayWrappersCount字符串数组包装器的数量。
stringArrayWrappersChainedCalls是否启用字符串数组包装器的链接调用。
stringArrayWrappersParametersMaxCount字符串数组包装器的参数最大数量。
stringArrayWrappersType字符串数组包装器的类型。

注意,当项目比较庞大时,不建议开启膨胀,也就是deadCodeInjection取值为false,不需要设置deadCodeInjectionThreshold的值

三、Vite混淆处理可能会出现的异常问题

1、Uncaught SyntaxError: Unexpected token ‘<’

打包之后,部署到服务器后,控制台报错:Uncaught SyntaxError: Unexpected token '<'

在这里插入图片描述
点开之后,显示如下:
在这里插入图片描述
经过查询资料,发现是Vue内部静态资源文件引用出问题了。
出错地方的代码如下:

let transWorker = new Worker(
    new URL("../until/transcode.worker.js", import.meta.url)
);

在这里插入图片描述

解决办法:将transcode.worker.js放到public下的static文件夹下,然后对上面代码修改:

let transWorker = new Worker(
    new URL("/static/transcode.worker.js", import.meta.url)
);

四、webpack混淆处理

Vue2项目中使用Webpack代码混淆方案使用webpack-obfuscator + javascript-obfuscator

1、查看Webpack的版本

先查看Webpack的版本,不同webpack版本安装的webpack-obfuscator版本不同。

webpack4.x 使用2.x的 webpack-obfuscator
webpack5.x 使用3.x的 webpack-obfuscator

yarn list webpack

在这里插入图片描述

2、安装

  • webpack4.x
yarn add webpack-obfuscator@2.6.0 javascript-obfuscator -D
  • webpack5.x
yarn add webpack-obfuscator javascript-obfuscator -D

3、配置

// vue.config.js

var obfuscator = require('webpack-obfuscator');

module.exports = {
  configureWebpack: {
    plugins: [
      new obfuscator({
        rotateStringArray: true,
        /**[] 可以配置 排除混淆的文件 */
      }, [])
    ]
  },
}

具体配置项可参考第二章的第三小节。此配置与上面使用Vite几乎相同。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1123025.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

触发点击事件,标签高亮显示

文章目录 &#x1f380;前言&#xff1a;&#x1f3e8;技术选型&#xff1a;vue中v-bind、v-for、的使用以及三目表达式操作步骤&#xff1a;标签动态属性响应函数标签样式 &#x1f380;前言&#xff1a; 我们经常在点击菜单时&#xff0c;会有颜色高亮显示(以红色为例)。在点…

看来直播带货不会被取消了

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 这个月大家一直都在讨论印尼关闭电商直播&#xff0c;争论国内是否应该关闭直播电商&#xff0c;而且讨论的愈演愈烈&#xff0c;卢松松也发布了很多相关的信息和言论。 结果10月20日&#xff0c;…

Microsoft Edge浏览器中使用免费的ChatGPT

一、双击打开浏览器 找到&#xff1a;扩展&#xff0c;打开 二、打开Microsoft Edge加载项 三、Move tab新标签 获取免费ChatGPT 四、启用Move tab。启用ChatGPT。 扩展 管理扩展 启用 五、新建标签页&#xff0c;使用GPT 六、使用举例 提问 GPT回复

因为做了这样的项目,成为了offer收割机!

作者&#xff1a;小傅哥 博客&#xff1a;https://bugstack.cn 沉淀、分享、成长&#xff0c;让自己和他人都能有所收获&#xff01;&#x1f604; 文章目录 一、项目视图二、学习路线1. 实习生2. 校招生3. 社招生 四、目标路径五、项目组合 注意&#xff1a;小傅哥的星球&…

紫光同创FPGA实现HSSTLP高速接口视频传输,8b/10b编解码,OV5640采集,提供PDS工程源码和技术支持

目录 1、前言免责声明 2、我这里已有的 GT 高速接口解决方案3、设计思路框架设计框图OV5640摄像头配置及采集视频数据封装按键选择HSSTLP高速收发器详解HSSTLP基本了解HSSTLP之时钟HSSTLP之PCSHSSTLP之PMAHSSTLP之接口说明硬件设计HSSTLP IP调用和配置 SFP连接方案选择视频数据…

(免费领源码)hadoop#Mysql离线与实时的离线与实时的电影推荐系统10338-计算机毕业设计项目选题推荐

摘 要 随着互联网与移动互联网迅速普及&#xff0c;网络上的电影娱乐信息数量相当庞大&#xff0c;人们对获取感兴趣的电影娱乐信息的需求越来越大,个性化的离线与实时的电影推荐系统 成为一个热门。然而电影信息的表示相当复杂&#xff0c;己有的相似度计算方法与推荐算法都各…

支持语音与视频即时通讯项目杂记(二)

目录 概念&#xff1a; 视频帧&#xff08;Video Frame&#xff09;是组成视频的基本单元。它可以被视为一幅静止的图像&#xff0c;它在一定的时间间隔内连续播放&#xff0c;从而形成了流畅的视频。 Changes to Qt Multimedia New features in Qt 6 Removed features C…

【具身智能模型2】RT-1: Robotics Transformer for Real-World Control at Scale

论文标题&#xff1a;RT-1: Robotics Transformer for Real-World Control at Scale 论文作者&#xff1a;Anthony Brohan, Noah Brown, Justice Carbajal, Yevgen Chebotar, Joseph Dabis, Chelsea Finn, Keerthana Gopalakrishnan, Karol Hausman, Alex Herzog, Jasmine Hsu,…

如何处理前端打包体积过大的问题?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

如何使用前端桌面应用程序框架(Electron等)?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

STM32实现USB转TTL串口工具

STM32实现USB转TTL串口工具 具有USB接口和UART接口的STM32芯片&#xff0c;如STM32F1, STM32F4等等&#xff0c;都可以实现USB转TTL串口工具的制作。目前具有USB接口的最小资源的芯片是STM32F103C6T6。这里介绍USB转UART的代码设计。 STM32例化的USB VCOM&#xff0c;数据通讯…

(1)(1.1) Bluetooth

文章目录 前言 1 连接到自动驾驶仪 2 连接Mission Planner快速入门 3 与Mission Planner的详细连接 4 从安卓地面站连接 5 如何更改波特率、设备名称和设备密码 6 故障排除 7 产品规格 前言 蓝牙数据链路&#xff08;如 HC-06 模块&#xff09;(HC-06 module)可用于将…

Node.JS---npm相关

文章目录 前言一、package.json配置项version&#xff1a;1.0.0devDependenciesdependenciespeerDependenciesoptionalDependencies 二、npm命令1、npm config listxmzs使用2、npm installpackage-lock.json作用 3、npm run4、 查看全局安装的可执行文件 npm生命周期npxnpx简介…

对象属性的读写两种方法

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 对象属性的读写 两种方法 选择题 下列代码执行输出的结果是? class C(object): name hello c1 C() print("【执行】c1C()") print("【显示】print(c1.name)") print(c…

伽马函数:将阶乘函数扩展到正整数之外

一、说明 &#xff0c;是对阶乘这种运算的实数域拓展。属于高级的数学模型&#xff0c;在高级概率模型用于定义分布函数。本文将介绍这个函数的基础概念和属性。 二、gamma函数定义 众所周知&#xff0c;阶乘这个运算本来是用于简化形如 n(n−1)(n−2)…321 的乘积的&#xff0…

OCR文字识别软件对于硬件的哪方面需求较高?

这个还得看OCR软件是远程识别还是本地识别&#xff0c;前者对电脑配置要求相对较低&#xff0c;因为OCR识别是在远程服务器上进行的&#xff0c;本地只是负责优化图片和保存识别结果&#xff0c;如金鸣表格文字识别和眼精星表格文字识别这类的软件就是基于远程的OCR识别方案&am…

MySQL性能优化指南:深入分析重做日志刷新到磁盘的机制

文章目录 &#x1f31f; MySQL重做日志性能优化指南&#x1f34a; 重做日志对数据库性能的影响&#x1f34a; 重做日志刷入磁盘的机制&#x1f34a; 实战使用&#x1f389; 1. 确认MySQL的redo log配置&#x1f389; 2. 强制刷新重做日志&#x1f389; 3. 检查重做日志是否已经…

【GIS前言技术】到底什么是实景三维?

文章目录 什么是实景三维&#xff1f;实景三维是怎么制作的&#xff1f;实景三维有哪些应用&#xff1f; 什么是实景三维&#xff1f; 实景三维是客观真实反映现实世界的三维模型&#xff0c;具有单体化、实体化、结构化、语义化的特点&#xff0c;通过融合模型三维、倾斜三维…

中文编程工具构件的应用:会员管理系统软件登录界面所用的构件编程实例

中文编程工具构件的应用&#xff1a;会员管理系统软件登录界面所用的构件编程实例 该实际应用的软件登录界面中的 用户名使用了 组合框构件&#xff0c;其内容可以读取动态赋值&#xff0c;密码框使用了 行编辑 构件&#xff0c;该构件可以预先设置密码字符。 该中文编程工具免…

【汇编】寄存器(学习笔记)

一、CPU工作原理 1、CPU概述 CPU由运算器、控制器、寄存器等器件组成&#xff0c;这些器件靠内部总线相连。 内部总线&#xff1a;CPU内部 <–> 各个器件 外部总线&#xff1a;CPU <–> 主板上其它器件 2、通用寄存器 8086CPU所有的寄存器都是16位的&#xff0c…