Das Vue-Projekt konfiguriert den Webpack-Obfuscator, um Codeverschlüsselung und -verschleierung zu implementieren.

Das Vue-Projekt konfiguriert den Webpack-Obfuscator, um Codeverschlüsselung und -verschleierung zu implementieren.

Hintergrund

Der Unternehmenscode wird Dritten zur Verwendung zur Verfügung gestellt. Um zu verhindern, dass der Quellcode vollständig durchsickert, muss der angegebene Code verschlüsselt und verschleiert werden. Obwohl der Front-End-Code nicht vollständig verschlüsselt und verschleiert werden kann, kann der Build-Code mithilfe von webpack-obfuscator vollständig verschleiert werden, indem zufällige Junk-Codesegmente, Zeichencodierungs-Escapes usw. hinzugefügt werden, sodass der Quellcode nicht wiederhergestellt oder sogar gelesen werden kann.

Installieren

webpack-obfuscator https://www.npmjs.com/package/webpack-obfuscator

npm install --save-dev webpack-obfuscator

Konfiguration

// webpack.config.js
const JavaScriptObfuscator = require('webpack-obfuscator');
modul.exporte = {
 Eintrag: {
 'abc': './test/input/index.js',
 'cde': './test/input/index1.js'
 },
 Ausgabe: {
 Pfad: 'dist',
 Dateiname: „[name].js“
 },
 Plugins: [
 neuer JavaScriptObfuscator({
 rotateUnicodeArray: wahr
 // Das Array enthält Dateien, die ausgeschlossen werden müssen}, ['abc.js'])
 ]
};

vue cli Projektkonfiguration:

// vue.config.js
const path = require('Pfad');
var JavaScriptObfuscator = require('webpack-obfuscator');
modul.exporte = {
 öffentlicher Pfad: process.env.NODE_ENV === 'Produktion' ? './' : '/',
 productionSourceMap: false,
 konfigurierenWebpack: {
 Plugins: [
 neuer JavaScriptObfuscator({
 rotateStringArray: wahr,
 }, [])
 ]
 },
 pwa: {},
 Seiten: {}
}

Wenn Sie nur beim Verpacken verschlüsseln und verschleiern möchten, nicht aber beim lokalen Ausführen, können Sie es wie folgt konfigurieren:

configureWebpack: (Prozess.env.NODE_ENV === 'Produktion') ? {
 Plugins: [
 neuer JavaScriptObfuscator({
 // ...
 }, [])
 ]
 } : {},

vue cli 2.x -Konfiguration in webpack.prod.conf.js

Bauen

npm-Ausführung erstellen

Builddateivergleich

1. Originaldokument

//test.js
Funktion abc() {
 für (sei i = 0; i < 10; i++) {
 console.log(`${i}th, hallo, hallo`)
 }
}
ABC()

2. webpack Standardtool uglifyjs-webpack-plugin

webpackJsonp([2],{lVK7:function(o,l){!function(){for(var o=0;o<10;o++)console.log("Der "+o+"te, hallo, hallo")}()}},["lVK7"]);

3. Wenn webpack-obfuscator keine Parameter hat

neuer JavaScriptObfuscator({
}, [])
var _0x1f6e=["Nein, nein, hallo","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],{lVK7:function(n,o){!function(){for(var n=0;n<10;n++)console[_0x3655("0x0")]("Nein"+n+_0x3655("0x1"))}()}},[_0x3655("0x2")]);

4. webpack-obfuscator ist stark verschleiert

Geringe Leistung: Die Leistung ist 50-100% langsamer als ohne Unschärfe

neuer JavaScriptObfuscator({
 // Code komprimieren compact: true,
 // Ob die Abflachung des Kontrollflusses aktiviert werden soll (Laufgeschwindigkeit um das 1,5-fache reduzieren)
 controlFlowFlattening: wahr,
 // Anwendungswahrscheinlichkeit; Bei größeren Codebasen wird empfohlen, diesen Wert zu verringern, da eine große Anzahl von Kontrollflussübergängen die Größe des Codes erhöhen und die Geschwindigkeit des Codes verringern kann.
 Kontrollflussabflachungsschwelle: 1,
 // Zufällige tote Codeblöcke (erhöht die Größe des verschleierten Codes)
 deadCodeInjection: wahr,
 //Wahrscheinlichkeit der Auswirkung toter Codeblöcke deadCodeInjectionThreshold: 1,
 // Diese Option macht es fast unmöglich, die Konsolenregisterkarte der Entwicklertools zu verwenden debugProtection: true,
 // Wenn aktiviert, wird der Debugmodus mit Intervallen auf der Registerkarte „Konsole“ erzwungen, wodurch die Verwendung anderer Funktionen der Entwicklertools erschwert wird.
 debugProtectionInterval: wahr,
 // Deaktivieren Sie console.log, console.info, console.error und console.warn, indem Sie sie durch leere Funktionen ersetzen. Dies erschwert die Verwendung des Debuggers.
 disableConsoleOutput: true,
 // Verschleierungsmethode des Bezeichners hexadezimal (hexadezimal) verstümmelt (kurzer Bezeichner)
 identifierNamesGenerator: 'hexadezimal',
 log: falsch,
 // Ob die Verwechslung von globalen Variablen und Funktionsnamen ermöglicht werden soll renameGlobals: false,
 // Verschieben Sie das Array durch feste und zufällige (generierte, wenn der Code verschleiert wird) Positionen. Dadurch wird es schwieriger, die Reihenfolge der gelöschten Zeichenfolgen ihren ursprünglichen Positionen zuzuordnen. Diese Option wird empfohlen, wenn der ursprüngliche Quellcode nicht klein ist, da die Hilfsfunktionen die Aufmerksamkeit auf sich ziehen können.
 rotateStringArray: wahr,
 // Nachdem der Code verschleiert wurde, können Sie die Codeverschönerung nicht mehr verwenden und müssen cpmpat:true konfigurieren.
 selfDefending: wahr,
 // Stringliterale entfernen und in ein spezielles Array einfügen stringArray: true,
 stringArrayEncoding: "rc4",
 stringArrayThreshold: 1,
 // Ermöglicht das Aktivieren/Deaktivieren der Zeichenfolgenkonvertierung in Unicode-Escapesequenzen. Unicode-Escapesequenzen erhöhen die Codegröße erheblich und erleichtern die Wiederherstellung einer Zeichenfolge in ihrer ursprünglichen Form. Es wird empfohlen, diese Option nur für kleine Quellcodes zu aktivieren.
 transformObjectKeys: wahr,
 UnicodeEscapeSequence: false
}, []),

Größe der erstellten Datei: 29,999 字節(29.2 KB)

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

3. webpack-obfuscator mittlere Verschleierung

Beste Leistung: Die Leistung ist 30-35% langsamer als ohne Unschärfe

neuer JavaScriptObfuscator({
 // Code komprimieren compact: true,
 // Ob die Abflachung des Kontrollflusses aktiviert werden soll (Laufgeschwindigkeit um das 1,5-fache reduzieren)
 controlFlowFlattening: wahr,
 // Anwendungswahrscheinlichkeit; Bei größeren Codebasen wird empfohlen, diesen Wert zu verringern, da eine große Anzahl von Kontrollflussübergängen die Größe des Codes erhöhen und die Geschwindigkeit des Codes verringern kann.
 Kontrollflussabflachungsschwelle: 0,75,
 // Zufällige tote Codeblöcke (erhöht die Größe des verschleierten Codes)
 deadCodeInjection: wahr,
 //Wahrscheinlichkeit der Auswirkung toter Codeblöcke deadCodeInjectionThreshold: 0,4,
 // Diese Option macht es fast unmöglich, die Konsolenregisterkarte der Entwicklertools zu verwenden debugProtection: false,
 // Wenn aktiviert, wird der Debugmodus mit Intervallen auf der Registerkarte „Konsole“ erzwungen, wodurch die Verwendung anderer Funktionen der Entwicklertools erschwert wird.
 debugProtectionInterval: false,
 // Deaktivieren Sie console.log, console.info, console.error und console.warn, indem Sie sie durch leere Funktionen ersetzen. Dies erschwert die Verwendung des Debuggers.
 disableConsoleOutput: true,
 // Verschleierungsmethode des Bezeichners hexadezimal (hexadezimal) verstümmelt (kurzer Bezeichner)
 identifierNamesGenerator: 'hexadezimal',
 log: falsch,
 // Ob die Verwechslung von globalen Variablen und Funktionsnamen ermöglicht werden soll renameGlobals: false,
 // Verschieben Sie das Array durch feste und zufällige (generierte, wenn der Code verschleiert wird) Positionen. Dadurch wird es schwieriger, die Reihenfolge der gelöschten Zeichenfolgen ihren ursprünglichen Positionen zuzuordnen. Diese Option wird empfohlen, wenn der ursprüngliche Quellcode nicht klein ist, da die Hilfsfunktionen die Aufmerksamkeit auf sich ziehen können.
 rotateStringArray: wahr,
 // Nachdem der Code verschleiert wurde, können Sie die Codeverschönerung nicht mehr verwenden und müssen cpmpat:true konfigurieren.
 selfDefending: wahr,
 // Stringliterale entfernen und in ein spezielles Array einfügen stringArray: true,
 stringArrayEncoding: "base64",
 stringArrayThreshold: 0,75,
 transformObjectKeys: wahr,
 // Ermöglicht das Aktivieren/Deaktivieren der Zeichenfolgenkonvertierung in Unicode-Escapesequenzen. Unicode-Escapesequenzen erhöhen die Codegröße erheblich und erleichtern die Wiederherstellung einer Zeichenfolge in ihrer ursprünglichen Form. Es wird empfohlen, diese Option nur für kleine Quellcodes zu aktivieren.
 UnicodeEscapeSequence: false
}, []),

Größe der erstellten Datei: 7066字節(6.90kb)

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

4. webpack-obfuscator geringe Verschleierung

Hohe Leistung: Die Leistung ist etwas langsamer als ohne Verschleierung

neuer JavaScriptObfuscator({
 // Code komprimieren compact: true,
 // Ob die Abflachung des Kontrollflusses aktiviert werden soll (Laufgeschwindigkeit um das 1,5-fache reduzieren)
 controlFlowFlattening: falsch,
 // Zufällige tote Codeblöcke (erhöht die Größe des verschleierten Codes)
 deadCodeInjection: falsch,
 // Diese Option macht es fast unmöglich, die Konsolenregisterkarte der Entwicklertools zu verwenden debugProtection: false,
 // Wenn aktiviert, wird der Debugmodus mit Intervallen auf der Registerkarte „Konsole“ erzwungen, wodurch die Verwendung anderer Funktionen der Entwicklertools erschwert wird.
 debugProtectionInterval: false,
 // Deaktivieren Sie console.log, console.info, console.error und console.warn, indem Sie sie durch leere Funktionen ersetzen. Dies erschwert die Verwendung des Debuggers.
 disableConsoleOutput: true,
 // Verschleierungsmethode des Bezeichners hexadezimal (hexadezimal) verstümmelt (kurzer Bezeichner)
 identifierNamesGenerator: "hexadezimal",
 log: falsch,
 // Ob die Verwechslung von globalen Variablen und Funktionsnamen ermöglicht werden soll renameGlobals: false,
 // Verschieben Sie das Array durch feste und zufällige (generierte, wenn der Code verschleiert wird) Positionen. Dadurch wird es schwieriger, die Reihenfolge der gelöschten Zeichenfolgen ihren ursprünglichen Positionen zuzuordnen. Diese Option wird empfohlen, wenn der ursprüngliche Quellcode nicht klein ist, da die Hilfsfunktionen die Aufmerksamkeit auf sich ziehen können.
 rotateStringArray: wahr,
 // Nachdem der Code verschleiert wurde, können Sie die Codeverschönerung nicht mehr verwenden und müssen cpmpat:true konfigurieren.
 selfDefending: wahr,
 // Stringliterale entfernen und in ein spezielles Array einfügen stringArray: true,
 stringArrayEncoding: false,
 stringArrayThreshold: 0,75,
 // Ermöglicht das Aktivieren/Deaktivieren der Zeichenfolgenkonvertierung in Unicode-Escapesequenzen. Unicode-Escapesequenzen erhöhen die Codegröße erheblich und erleichtern die Wiederherstellung einer Zeichenfolge in ihrer ursprünglichen Form. Es wird empfohlen, diese Option nur für kleine Quellcodes zu aktivieren.
 UnicodeEscapeSequence: false
}, []),

Größe der erstellten Datei: 2,424 字節(2.36 KB)

var _0x37a6=["Ausnahme", "Trace", "Konsole", "Neu, Neu, Hallo", "lVK7", "Anwenden", "Return (function() ",'{}.constructor("return this")() ',"Protokoll", "Warnung", "Debug", "Info", "Fehler"];!function(n,e){var o=function(e){for(;--e;)n.push(n.shift())};
// ...
[_0xe1fd("0x3")]("Nein"+n+_0xe1fd("0xb"))}()}},[_0xe1fd("0xc")]);

Vergleichstabelle

Dateiname Dateigröße Normaler Körperbau Keine Parameter Stark verschleiert Mäßige Verwirrung Geringe Verschleierung
test.js 117 Byte 177 Byte 363 Byte 29,2 KB (29.999 Byte) 6,90 KB (7066 Bytes) 2,36 KB (2.424 Byte)
jquery.js 111 KB (113.852 Byte) 85,0 KB (87.064 Byte) 115 KB (117.770 Byte) 1,24 MB (1.304.998 Byte) 401 KB (411.543 Byte) 117 KB (120.243 Byte)

Hauptattribute

{
 //Komprimierung, kein Zeilenumbruch compact: true,
 // Ob die Abflachung des Kontrollflusses aktiviert werden soll (Laufgeschwindigkeit um das 1,5-fache reduzieren)
 controlFlowFlattening: falsch,
 // Anwendungswahrscheinlichkeit; Bei größeren Codebasen wird empfohlen, diesen Wert zu verringern, da eine große Anzahl von Kontrollflussübergängen die Größe des Codes erhöhen und die Geschwindigkeit des Codes verringern kann.
 Kontrollflussabflachungsschwelle: 0,75,
 // Zufällige tote Codeblöcke (erhöht die Größe des verschleierten Codes)
 deadCodeInjection: falsch,
 //Wahrscheinlichkeit der Auswirkung toter Codeblöcke deadCodeInjectionThreshold: 0,4,
 // Diese Option macht es fast unmöglich, die Konsolenregisterkarte der Entwicklertools zu verwenden debugProtection: false,
 // Wenn aktiviert, wird der Debugmodus mit Intervallen auf der Registerkarte „Konsole“ erzwungen, wodurch die Verwendung anderer Funktionen der Entwicklertools erschwert wird.
 debugProtectionInterval: false,
 // Deaktivieren Sie console.log, console.info, console.error und console.warn, indem Sie sie durch leere Funktionen ersetzen. Dies erschwert die Verwendung des Debuggers.
 disableConsoleOutput: false,
 // Sperren Sie verschleierten Quellcode, sodass er nur auf bestimmten Domänen und/oder Subdomänen ausgeführt werden kann. Dadurch wird es für jemanden sehr schwierig, Ihren Quellcode einfach zu kopieren, einzufügen und ihn woanders auszuführen.
 Domänensperre: [],
 //Verschleierungsmethode des Bezeichners hexadezimal (hexadezimal) verstümmelt (kurzer Bezeichner)
 identifierNamesGenerator: 'hexadezimal',
 //Fügen Sie dem globalen Bezeichner ein bestimmtes Präfix hinzu. Verwenden Sie diese Option, wenn Sie mehrere auf derselben Seite geladene Dateien verschleiern möchten. Mithilfe dieser Option können Konflikte zwischen globalen Kennungen für diese Dateien vermieden werden. Verwenden Sie für jede Dateikennung ein anderes Präfix. Präfix: '',
 Eingabedateiname: '',
 // Protokollierung in der Konsole aktivieren.
 log: falsch,
 // Ob die Verwechslung von globalen Variablen und Funktionsnamen ermöglicht werden soll renameGlobals: false,
 // Deaktivieren Sie die Verschleierung und die generierten Bezeichner reservedNames: [],
 // Konvertierung von String-Literalen deaktivieren reservedStrings: [],
 // Verschieben Sie das Array durch feste und zufällige (generierte, wenn der Code verschleiert wird) Positionen. Dadurch wird es schwieriger, die Reihenfolge der gelöschten Zeichenfolgen ihren ursprünglichen Positionen zuzuordnen. Diese Option wird empfohlen, wenn der ursprüngliche Quellcode nicht klein ist, da die Hilfsfunktionen die Aufmerksamkeit auf sich ziehen können.
 rotateStringArray: wahr,
 // Nachdem der Code verschleiert wurde, können Sie die Codeverschönerung nicht mehr verwenden und müssen cpmpat:true konfigurieren.
 Samen: 0,
 selfDefending: falsch,
 Quellkarte: falsch,
 Quellkartenbasisurl: '',
 Quellkartendateiname: '',
 sourceMapMode: "separat",
 // Stringliterale entfernen und in ein spezielles Array einfügen stringArray: true,
 // Kodieren Sie alle Zeichenfolgenliterale in stringArray mit Base64 oder RC4 und fügen Sie sie in einen speziellen Code ein, der sie zur Laufzeit wieder dekodiert. true (Boolesch): stringArray verwendet den Base64-Kodierungswert; false (Boolesch): stringArray-Wert nicht kodieren; „base64“ (Zeichenfolge): stringArray verwendet den Base64-Kodierungswert; „rc4“ (Zeichenfolge): stringArray verwendet den RC4-Kodierungswert. Etwa 30–50 % langsamer als Base64, aber es ist schwieriger, den Anfangswert zu erhalten. Es wird empfohlen, die Option „UnicodeEscapeSequence“ bei der RC4-Kodierung zu deaktivieren, um sehr große verschleierte Codes zu verhindern.
 stringArrayEncoding: false,
 // Passen Sie die Wahrscheinlichkeit an, mit der ein Zeichenfolgenliteral in stringArray eingefügt wird stringArrayThreshold: 0,75,
 // Sie können die Zielumgebung für verschleierten Code auf eine der folgenden Optionen festlegen: Browser; Browser No Eval; Node
 Ziel: "Browser",
 // Ob die Verschleierung von Objektschlüsseln aktiviert werden soll transformObjectKeys: false,
 // Ermöglicht das Aktivieren/Deaktivieren der Zeichenfolgenkonvertierung in Unicode-Escapesequenzen. Unicode-Escapesequenzen erhöhen die Codegröße erheblich und erleichtern die Wiederherstellung einer Zeichenfolge in ihrer ursprünglichen Form. Es wird empfohlen, diese Option nur für kleine Quellcodes zu aktivieren.
 UnicodeEscapeSequence: false
}

Beachten

  • Achten Sie bei der Installation webpack-obfuscator darauf, dass die Version von webpack-obfuscator mit der lokalen webpack Version des Projekts übereinstimmt. Ich verwende [email protected] und das Projekt- webpack ist Version 4.x ( 4.x版webpack meldet einen Fehler und kann nicht mit der neuesten Version [email protected] verwendet werden, und webpack wurde nicht auf Version 5.x aktualisiert).
  • excludes數組ist mit multimatch包語法kompatibel; es unterstützt beispielsweise ['js/chunk-vendors.**.js'] , ['excluded_bundle_name.js', '**_bundle_name.js'] oder 'excluded_bundle_name.js' usw.

Artikeladresse: https://www.cnblogs.com/dragonir/p/14445767.html Autor: dragonir

Referenz zu verwandten Artikeln:

JS-Code-Verschleierung

Webpack-Obfuscator https://blog.csdn.net/qq_31126175/article/details/86526237

Dies ist das Ende dieses Artikels über die Konfiguration von Webpack-Obfuscator im Vue-Projekt zur Code-Verschlüsselung und -Verschleierung. Weitere verwandte Inhalte zur Code-Verschleierung von Vue Webpack-Obfuscator finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung zum Starten der Ausführung der Dist-Datei, die generiert wird, nachdem Webpack das Vue-Projekt gepackt hat
  • Beschreiben Sie kurz, wie Sie chainWebpack in vue-cli verwenden

<<:  Tipps zum Organisieren von Zeichenfolgen in Linux

>>:  Zusammenfassung der speziellen Verarbeitungsanweisungen für MySQL-SQL-Anweisungen (unbedingt lesen)

Artikel empfehlen

Detaillierte Erklärung dreier häufig verwendeter Webeffekte in JavaScript

Inhaltsverzeichnis 1 Element Offset-Serie 1.1 Off...

CSS-Implementierungscode zum Zeichnen von Dreiecken (Rahmenmethode)

1. Implementieren Sie ein einfaches Dreieck Mithi...

Detaillierte Erklärung der wechselseitigen Verwendung von Ref in React

Inhaltsverzeichnis 1. Lassen Sie uns zunächst erk...

In wenigen Schritten zum einfachen Aufbau eines Windows-SSH-Servers

Das hier erwähnte SSH heißt Security Shell. Ich g...

Native JS-Kapselung vue Tab-Umschalteffekt

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erläuterung des MySQL-Mechanismus zur gemeinsamen Abfrageoptimierung

Inhaltsverzeichnis Strategie zur Ausführung föder...

So installieren und verwenden Sie Cockpit unter CentOS 8/RHEL 8

Cockpit ist ein webbasiertes Serververwaltungstoo...

Eine kurze Diskussion über das Implementierungsprinzip von Webpack4-Plugins

Inhaltsverzeichnis Vorwort wissen Übung macht den...

Detaillierte Erklärung zu sinnvollen Einstellungen des MySQL sql_mode

Sinnvolle Einstellung des MySQL sql_mode sql_mode...

Beispiel für die Implementierung von Unterstreichungseffekten mit CSS und JS

In diesem Artikel werden hauptsächlich zwei Arten...

So kapseln Sie Axios in Vue

Inhaltsverzeichnis 1. Installation 1. Einleitung ...