【知识整理】vue-cli脚手架开发项目如何进行js高级加密_vue 开发时混淆加密文件

作者：AllinToyou | 2024-06-01 06:12:03

踩

vue 开发时混淆加密文件

一。最近收到一个对js源码进行加密，以防止关键js源代码泄露的需求！由于我们的项目是基于vue-cli脚手架开发的，因此首先想到的是其中的webpack插件UglifyJsPlugin是否提供js代码加密的配置。查询UglifyJsPlugin官方手册后发现该插件提供代码压缩及混淆功能，可以对代码进行压缩，变量、函数名替换为简单字母，降低了源码的可读性，一定程度上达到了加密的目的，但是加密级别没有达到我们的要求。因此只能亲自动手找找是否有现成的开源加密算法，拿过来借用一下。

二。在网上找到了一个名为'jjencode'的js加密算法，这里贴出他的网站：https://www.sojson.com/jjencode.html，通过此算法对js加密后台代码如下图：

可以看到加密后已经根本看不出任何js语言的痕迹，更不可能看出其中的具体算法是什么，这种的加密级别基本已经符合我们的需求了。问题来了，加密算法虽然有了，但是我们不能每次重新打包后都手动加密代码后覆盖原文件，这使得加密流程变得繁琐，如果在每次打包后能够自动加密就好了。怎么样才能实现自动加密呢，这就需要我们手写一个自动加密的插件了。

三。如果对webpack的插件机制不了解的，可以参考这篇文章：https://juejin.im/entry/5a4cb7906fb9a04500037399。我将插件命名为'JsEncodePlugin',源码如下：


// 1、js-encode-plugin.js 文件（webpack的js加密插件）
const fs = require('fs');//node的文件系统模块，用于读写及操作文件
const path = require('path');//node提供的一些用于处理文件路径的小工具
var chalk = require('chalk')//用于向控制台输出带颜色的问题提示
// 2、模块对外暴露的 js 函数
function JsEncodePlugin(pluginOptions) {
  this.options = pluginOptions;
}


// 3、原型定义一个 apply 函数，并注入了 compiler 对象
JsEncodePlugin.prototype.apply = function (compiler) {
  const _this = this;
  // 4、挂载 webpack 事件钩子（这里挂载的是 after-emit 事件,在将内存中 assets 内容写到磁盘文件夹之后触发的webpack生命周期钩子）

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/656360

【知识整理】vue-cli脚手架开发项目如何进行js高级加密_vue 开发时 混淆加密文件

【知识整理】vue-cli脚手架开发项目如何进行js高级加密_vue 开发时混淆加密文件