The Vue project uses Webpack-Obfuscator for code encryption obfuscation

This article has participated in the call for good writing activities, click to view: back end, big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!

background

The code of the company is provided to the third party for use. In order not to completely disclose the source code, it is necessary to encrypt and obfuscate the given code. Although the front-end code cannot be completely encrypted and obfuscated, the construction code can be completely obfuscated by adding random waste code segments and character coding escape by using Webpack-Obfuscator. The source cannot be recovered or even read.

The installation

Webpack – obfuscator www.npmjs.com/package/web…

npm install --save-dev webpack-obfuscator
Copy the code

configuration

// webpack.config.js
const JavaScriptObfuscator = require('webpack-obfuscator');
module.exports = {
  entry: {
    'abc': './test/input/index.js'.'cde': './test/input/index1.js'
  },
  output: {
    path: 'dist'.filename: '[name].js'
  },
  plugins: [
    new JavaScriptObfuscator({
      rotateUnicodeArray: true
      // The array contains the files to be excluded},'abc.js'])]};Copy the code

Vue CLI project configuration:

// vue.config.js
const path = require('path');
var JavaScriptObfuscator = require('webpack-obfuscator');
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/'.productionSourceMap: false.configureWebpack: {
    plugins: [
      new JavaScriptObfuscator({
        rotateStringArray: true,}, [])]},pwa: {},
  pages: {}}Copy the code

If you want to encrypt obfuscation at packaging time but not at local runtime, you can configure the following:

configureWebpack: (process.env.NODE_ENV === 'production')? {plugins: [
      new JavaScriptObfuscator({
        // ...}, [])]} : {},Copy the code

Vue cli 2.x is configured in webpack.prod.conf.js

build

npm run build
Copy the code

Build file comparison

1. Original files

// test.js
function abc() {
    for (let i = 0; i < 10; i++) {
        console.log(The first `${i}Hello,hello)
    }
}
abc()
Copy the code

2. `webpack`The default tool`uglifyjs-webpack-plugin`

webpackJsonp([2] and {lVK7:function(o,l){!function(){for(var o=0; o<10; o++)console.log("The first"+o+"Hey,hello,hello."}})} (), ["lVK7"]);
Copy the code

3. `webpack-obfuscator`There is no parameter

new JavaScriptObfuscator({
}, [])
Copy the code

var _0x1f6e=["Hey,hello,hello."."lVK7"."log"]; !function(n,o){!function(o){for(; --o;) n.push(n.shift())}(++o)}(_0x1f6e,323);var _0x3655=function(n,o){return _0x1f6e[n-=0]}; webpackJsonp([2] and {lVK7:function(n,o){!function(){for(var n=0; n<10; n++)console[_0x3655("0x0"(a)]"The first"+n+_0x3655("0x1"))}()}},[_0x3655("0x2")]);
Copy the code

4. `webpack-obfuscator`Highly confused

Low performance: Performance is 50-100% slower than without blurring

new JavaScriptObfuscator({
  // Compress the code
  compact: true.// Enable control flow flattening (1.5 times slower)
  controlFlowFlattening: true.// Application probability; In larger code bases, it is recommended to lower this value because a large number of control flow transitions can increase the size and slow down the code.
  controlFlowFlatteningThreshold: 1.// Random dead code block (increases the size of obfuscated code)
  deadCodeInjection: true.// The impact probability of dead code blocks
  deadCodeInjectionThreshold: 1.// This option makes it almost impossible to use the developer tools console TAB
  debugProtection: true.// If selected, interval force debug mode is used on the Console TAB, making it more difficult to use the other features of developer tools.
  debugProtectionInterval: true.// Disable console.log, console.info, console.error, and console.warn by replacing them with empty functions. This makes the debugger more difficult to use.
  disableConsoleOutput: true.// Mangled (short identifier) hexadecimal
  identifierNamesGenerator: 'hexadecimal'.log: false.// Whether to enable global variable and function name confusion
  renameGlobals: false.// Move arrays by fixed and random positions (generated when code is confused). This makes it more difficult to match the order of the deleted strings to their original positions. This option is recommended if the original source code is not small, because auxiliary functions can attract attention.
  rotateStringArray: true.Cpmpat :true; cpmpat:true;
  selfDefending: true.// Remove string literals and place them in a special array
  stringArray: true.stringArrayEncoding: 'rc4'.stringArrayThreshold: 1.// Enables/disables string conversion to Unicode escape sequences. Unicode escape sequences greatly increase the code size and make it easy to restore a string to its original view. It is recommended that this option be enabled only for small source code.
  transformObjectKeys: true.unicodeEscapeSequence: false} []),Copy the code

Built file size: 29,999 bytes (29.2 KB)

var _0xa0d1=["w7Bzw6oKw6E="."wrwIUcOVw4M="."w4bChi3DtcOQ"."wpLDtsK5w4LDpA=="."OUlQwp1z"."woEqw4XCtsOe"."YR3DrkDCiA=="."woAjwq/Ci8KQ"."dDNzw5bDgA==".// ...
("0x201"."xatR")] =function(x){return x()},x[_0x34e6("0x202"."vdcx")](_0x2c01f8)},4e3);
Copy the code

3. `webpack-obfuscator`Medium to confuse

Best performance: Performance is 30-35% slower than without blurring

new JavaScriptObfuscator({
  // Compress the code
  compact: true.// Enable control flow flattening (1.5 times slower)
  controlFlowFlattening: true.// Application probability; In larger code bases, it is recommended to lower this value because a large number of control flow transitions can increase the size and slow down the code.
  controlFlowFlatteningThreshold: 0.75.// Random dead code block (increases the size of obfuscated code)
  deadCodeInjection: true.// The impact probability of dead code blocks
  deadCodeInjectionThreshold: 0.4.// This option makes it almost impossible to use the developer tools console TAB
  debugProtection: false.// If selected, interval force debug mode is used on the Console TAB, making it more difficult to use the other features of developer tools.
  debugProtectionInterval: false.// Disable console.log, console.info, console.error, and console.warn by replacing them with empty functions. This makes the debugger more difficult to use.
  disableConsoleOutput: true.// Mangled (short identifier) hexadecimal
  identifierNamesGenerator: 'hexadecimal'.log: false.// Whether to enable global variable and function name confusion
  renameGlobals: false.// Move arrays by fixed and random positions (generated when code is confused). This makes it more difficult to match the order of the deleted strings to their original positions. This option is recommended if the original source code is not small, because auxiliary functions can attract attention.
  rotateStringArray: true.Cpmpat :true; cpmpat:true;
  selfDefending: true.// Remove string literals and place them in a special array
  stringArray: true.stringArrayEncoding: 'base64'.stringArrayThreshold: 0.75.transformObjectKeys: true.// Enables/disables string conversion to Unicode escape sequences. Unicode escape sequences greatly increase the code size and make it easy to restore a string to its original view. It is recommended that this option be enabled only for small source code.
  unicodeEscapeSequence: false} []),Copy the code

File size after build: 7066 bytes (6.90 KB)

var _0x1a25=["UmFzT1U="."RkVIc0o="."VUt2eW4="."Q29IS0g="."V1NSZ0k="."d3RNT2w="."dlV6cUw="."RlpzZWg="."QnpzSlE="."cXBqQ1k="."YXBwbHk="."bFZLNw=="."Y3p1Ymo="."TFZlQXE="."Y2NKWlY="."cmV0dXJuIChmdW5jdGlvbigpIA==".// ...
(b[_0x4bcb("0x2a"(a)]"The first"+c,b[_0x4bcb("0x2b")]))}})}},[_0x4bcb("0x2f")]);
Copy the code

4. `webpack-obfuscator`Low confused

High performance: Performance is slightly slower than no confusion

new JavaScriptObfuscator({
  // Compress the code
  compact: true.// Enable control flow flattening (1.5 times slower)
  controlFlowFlattening: false.// Random dead code block (increases the size of obfuscated code)
  deadCodeInjection: false.// This option makes it almost impossible to use the developer tools console TAB
  debugProtection: false.// If selected, interval force debug mode is used on the Console TAB, making it more difficult to use the other features of developer tools.
  debugProtectionInterval: false.// Disable console.log, console.info, console.error, and console.warn by replacing them with empty functions. This makes the debugger more difficult to use.
  disableConsoleOutput: true.// Mangled (short identifier) hexadecimal
  identifierNamesGenerator: 'hexadecimal'.log: false.// Whether to enable global variable and function name confusion
  renameGlobals: false.// Move arrays by fixed and random positions (generated when code is confused). This makes it more difficult to match the order of the deleted strings to their original positions. This option is recommended if the original source code is not small, because auxiliary functions can attract attention.
  rotateStringArray: true.Cpmpat :true; cpmpat:true;
  selfDefending: true.// Remove string literals and place them in a special array
  stringArray: true.stringArrayEncoding: false.stringArrayThreshold: 0.75.// Enables/disables string conversion to Unicode escape sequences. Unicode escape sequences greatly increase the code size and make it easy to restore a string to its original view. It is recommended that this option be enabled only for small source code.
  unicodeEscapeSequence: false} []),Copy the code

Built file size: 2,424 bytes (2.36 KB)

var _0x37a6=["exception"."trace"."console"."Hey,hello,hello."."lVK7"."apply"."return (function() ".'{}.constructor("return this")( )'."log"."warn"."debug"."info"."error"]; !function(n,e){var o=function(e){for(; --e;) n.push(n.shift())};// ...
[_0xe1fd("0x3"(a)]"The first"+n+_0xe1fd("0xb"))}()}},[_0xe1fd("0xc")]);
Copy the code

Contrast table

The file name	The file size	Normal build	There is no parameter	Highly confused	Moderate confusion	Low confused
`test.js`	`117 bytes`	`177 bytes`	`363 bytes`	`29.2 KB(29,999 bytes)`	`6.90 KB (7066 bytes)`	`2.36 KB(2,424 bytes)`
`jquery.js`	`111 KB (113,852 bytes)`	`85.0 KB (87,064 bytes)`	`115 KB (117,770 bytes)`	`1.24 MB (1,304,998 bytes)`	`401 KB (411,543 bytes)`	`117 KB (120,243 bytes)`

The main properties

{
  // Compress, no line breaks
  compact: true.// Enable control flow flattening (1.5 times slower)
  controlFlowFlattening: false.// Application probability; In larger code bases, it is recommended to lower this value because a large number of control flow transitions can increase the size and slow down the code.
  controlFlowFlatteningThreshold: 0.75.// Random dead code block (increases the size of obfuscated code)
  deadCodeInjection: false.// The impact probability of dead code blocks
  deadCodeInjectionThreshold: 0.4.// This option makes it almost impossible to use the developer tools console TAB
  debugProtection: false.// If selected, interval force debug mode is used on the Console TAB, making it more difficult to use the other features of developer tools.
  debugProtectionInterval: false.// Disable console.log, console.info, console.error, and console.warn by replacing them with empty functions. This makes the debugger more difficult to use.
  disableConsoleOutput: false.// Lock the obfuscated source code so that it runs only on specific domains and/or subdomains. This makes it very difficult for someone to just copy and paste your source code and run it somewhere else.
  domainLock: [].// Mangled (short identifier) hexadecimal
  identifierNamesGenerator: 'hexadecimal'.// Add a specific prefix to the global identifier, which is used when confusing multiple files loaded on the same page. This option helps avoid conflicts between global identifiers for these files. Use a different prefix for each file
  identifiersPrefix: ' '.inputFileName: ' '.// Allows logging of information to the console.
  log: false.// Whether to enable global variable and function name confusion
  renameGlobals: false.// Disable obfuscation and generate identifiers
  reservedNames: [].// Disables conversion of string literals
  reservedStrings: [].// Move arrays by fixed and random positions (generated when code is confused). This makes it more difficult to match the order of the deleted strings to their original positions. This option is recommended if the original source code is not small, because auxiliary functions can attract attention.
  rotateStringArray: true.Cpmpat :true; cpmpat:true;
  seed: 0.selfDefending: false.sourceMap: false.sourceMapBaseUrl: ' '.sourceMapFileName: ' '.sourceMapMode: 'separate'.// Remove string literals and place them in a special array
  stringArray: true.// Encodes all string literals: stringArray uses base64 or RC4 and inserts and plays it decoded back to special code at run time. True (Boolean) : stringArray uses the encoded value base64; False (Boolean) : does not encode stringArray values; 'base64' (string) : stringArray uses the encoded value base64; 'RC4' (string) : stringArray uses the encoding value rc4. Base64 is about 30-50% slower, but harder to get initial values. It is recommended to disable unicoescapesequence with RC4 encoding option to prevent very large obfuscating code.
  stringArrayEncoding: false.// Adjust the probability that string literals will insert stringArray
  stringArrayThreshold: 0.75.// You can set the target environment for obfuscation code to one of the following: Browser; Browser No Eval; Node
  target: 'browser'.// Whether to enable obfuscation key
  transformObjectKeys: false.// Enables/disables string conversion to Unicode escape sequences. Unicode escape sequences greatly increase the code size and make it easy to restore a string to its original view. It is recommended that this option be enabled only for small source code.
  unicodeEscapeSequence: false
}
Copy the code

Pay attention to

The installationwebpack-obfuscatorTo pay attention to thewebpack-obfuscatorThe version is to be associated with the local projectwebpackThe version matches. I’m using[email protected]projectwebpack 是 4.xVersion. (4. X 本 webpackUse the latest version[email protected]An error will be reported that it cannot be used,webpackSpace to upgrade to the5.xVersion).
Excludes the arrayThe compatibleMultimatch package syntax, such as support['js/chunk-vendors.**.js'],['excluded_bundle_name.js', '**_bundle_name.js'] 或 'excluded_bundle_name.js'And so on.

The Vue project uses Webpack-Obfuscator for code encryption obfuscation

background

The installation

configuration

build

Build file comparison

1. Original files

2. webpackThe default tooluglifyjs-webpack-plugin

3. webpack-obfuscatorThere is no parameter

4. webpack-obfuscatorHighly confused

3. webpack-obfuscatorMedium to confuse

4. webpack-obfuscatorLow confused

Contrast table

The main properties

Pay attention to

Related Posts

Vue3 source series — What does key do in diff

“JavaScript Advanced Programming” chapter 6 learning notes for collection reference types

Use CSS variables skillfully to achieve gradient following the mouse

2. `webpack`The default tool`uglifyjs-webpack-plugin`

3. `webpack-obfuscator`There is no parameter

4. `webpack-obfuscator`Highly confused

3. `webpack-obfuscator`Medium to confuse

4. `webpack-obfuscator`Low confused