Hoe u uw JavaScript-code verbergen vanaf de view-bron

Sep 13, 2025
Procedures
How to hide your JavaScript code

Als u geen voorzorgsmaatregelen neemt met uw JavaScript-code, maakt u het leven gemakkelijk voor iedereen die het wil klonen. Maar als uw programmeerprocessen meer dan één klik verwijderd zijn, zullen aanvallers de voorkeur geven aan de software van een concurrent. Bots en andere onverschillig die het internet kammen voor AWS of Azure-inloggegevens zijn meestal niet de moeite met gedobsceerde code - de aanmeldingsinformatie van de volgende website kan ook worden gebruikt om bitcoin te worden en kan worden geoogst met minder inspanning.

Obfanne JavaScript was ingewikkeld. Het proces is echter in de afgelopen paar jaar aanzienlijk eenvoudiger geworden. Tegenwoordig kunnen zelfs kleine bedrijven hun code beschermen tegen nieuwsgierige ogen. In sommige gevallen is het veilig om veilig te worden slechts een aanroeping van een Node.js-pakket.

De volgende stappen introduceren een veelgebruikte JavaScript-obfuscator en kijken ook naar een paar andere onderwerpen die verband houden met het probleem bij de hand.

  • De beste antivirussoftware
  • 15 Essential JavaScript-tools

01. Versiecontrole

Onze JavaScript-obfuscator woont in de Node Runtime-omgeving. Laten we beginnen met het controleren van de gebruikte versies. De onderstaande uitvoer biedt de versiestatus die wordt aangetroffen op het werkstation van uw Echt Werkstation dat voor de volgende stappen wordt gebruikt:

 Tamhan @ Tamhan-ThinkPad: ~ $ knooppunt - Versie
v8.12.0
Tamhan @ Tamhan-ThinkPad: ~ $ NPM --Versie
6.4.1 

02. Installeer het programma

JavaScript-obfuscator moet worden geïnstalleerd in de Global Assembly-cache van uw werkstation. Roept NPM aan met de g Parameter en vergeet niet om superuserrechten te bieden - het feitelijke implementatieproces moet binnen enkele seconden worden gedaan.

 Tamhan @ Tamhan-ThinkPad: ~ $ sudo npm install-g
javascript-obfuscator
[SUDO] Wachtwoord voor TAMHAN:
​​​

+ [email protected]
103 pakketten toegevoegd van 162 medewerkers
in 4.4s 

03. Maak een monster

Het testen van obfuscation werkt het beste als we een 'echte' code hebben. Dus laat ons beginnen met een kleine HTML-webpagina. Het laadt een Javascript-bestand met de naam Werknemer.js, verklaart een knop en bevat een klein beetje inline scripting. Wanneer het in een browser is geladen, klikt u op de knop om een ​​tekstvak weer te geven.

 & lt; html & gt;
& LT; BODY & GT;
& lt; script src = "werknemer.js" & gt; & lt; / script & gt;
& lt; script & gt;
functie werknemer () {
alert (Dothetrick ());
​
& LT; / Script & GT;
& lt; knop type = "knop" onclick = "werknemer (
) "& GT; klik me! & lt; / knop & gt;
& LT; / BODY & GT;
& LT; / HTML & GT; 

04. Voeg een code toe

Werknemer.Js begint met een tekenreeksvariabele. Ze zijn een klassiek aanvalsdoel - als een ROM moet worden gedecodeerd, begint de assembler meestal door te zoeken naar tabellen die stringsequenties bevatten. Bovendien wordt codering uitgevoerd met behulp van een reeks variabelen met zeer 'sprekende' namen.

 Var MySting = "Hallo vanaf toekomstige PLC"

Functie Dothetrick () {
var chiffrat;
Chiffrat = ROT13 (MYSTRING);
terugkeer chiffrat;
} 

05. Implementeer de codering

Omdat dit niet is bedoeld als een codering 101, moeten we genoegen nemen met een relatief eenvoudig substitutiecijfer. ROT13 is niet moeilijk, maar het kan behoorlijk verbeef worden geprogrammeerd. De implementatie van dsoares Wordt geleverd met een set van 'sprekende' variabelen en biedt veel voedsel voor onze obfuscator.

 Functie ROT13 (STR) {
Var Re = New Regexp ("[A-Z]", "I");
var min = 'a'charcodes (0);
Var MAX = 'Z'CARCODEAT (0);
var factor = 13;
var resultaat = "";
str = str.touppercase ();
  
voor (var i = 0; i & lt; str.lengte; i ++) {
Resultaat + = (re.test (str [i])?
String.fromcharcode ((Str.charcodeseat
(i) - min + factor)% (max-min + 1)
+ min): str [i]);
​
Retourresultaat;
} 

06. Eerste obfuscatie

Het uitvoeren van een obfusceringsrun van de code is eenvoudig. Beroep doen op javascript-obfuscator en geef een punt in om het programma te laten werken aan alle bestanden in de huidige werkdirectory. Dit toont het resultaat op het IBM-werkstation van de auteur:

 Tamhan @ Tamhan-ThinkPad: ~ / futureobfuscate /
Code $ JavaScript-obfuscator. 

07. Omleiding uitgang

Het afvuren van de bestanden rechtstreeks in de containermap is inefficiënt, omdat namen moeten worden gewijzigd voordat ze kunnen worden gebruikt. Een betere manier gaat om het gebruik van de uitgang parameter. Als javascript-obfuscator Vindt het, het programma genereert een submap in de huidige werkdirectory en dumpt de resultaten van zijn arbeid daar.

 Tamhan @ Tamhan-ThinkPad: ~ / futureobfuscate / code $
JavaScript-obfuscator. - Output ./Obfusca

08. Analyseer de resultaten

How to hide your JavaScript code: Results

Het is vreselijk, maar het kan erger zijn

Duik in de map 'Obfusca' en open de nieuwe versie van de werknemer.js om je ogen te feesten op de gruwel die wordt getoond die deze stap vergezelt. De formatteren van de code werd slecht verminkt. Method-namen bleven echter hetzelfde, omdat ze nodig zijn voor externe aanroepingen. Bovendien zitten snaren nu in een array waar een aanvaller ze gemakkelijk kan oogsten.

 Var A0_0XB9E2 = ['HELLO \ X20FROM \ X20FUTURE
\ X20PLC ',' [A-Z] ',' Test ',' Charcodeeat ']; 

09. Voorkom stringoogst

Javascript-obfuscator wordt geleverd met een selectie van string-mangling-algoritmen, die kunnen worden geconfigureerd met - Straring-array-codering ​Houd er rekening mee dat de uitvoermap vóór elke aanroep moet worden leeggemaakt, omdat het vergagt om dit te doen leidt tot 'recursief' obfuscatie van de uitvoerbestanden van de vorige run.

 Tamhan @ Tamhan-ThinkPad: ~ / futureobfuscate / code $
JavaScript-obfuscator. - Output ./Obfusca
- Straring-array-codering base64 

10. Kijk opnieuw naar de resultaten

Op dit punt ziet de uitvoer van onze obfuscator er anders uit - de array aan de bovenkant van het bestand is nu veel minder leesbaar. Dit lost echter niet alle problemen op. Als u een paar obfuscatiecycli uitvoert, komt u uiteindelijk af met Mark-Up vergelijkbaar met die bij deze stap:

 Var A0_0X31E5 = ['BGVUZ3RO', 'DGVZDA ==', '
Znjvbunoyxjdb2rl ',' y2hhcknvzgvbda == ','
DG9VCHBLCKNHC2U = '];
​​​
​​​
Var MySting = 'Hallo \ X20PROM \ X20FUTURE \ X20PLC' 

11. Randomisatie begrijpen

Obfuscators werken in een drukveld tussen hoge prestaties en codebeveiliging. Een manier om het probleem aan te pakken, betreft "Randomising'-elementen. De runtime-dure obfuscations worden niet toegevoegd aan alle knooppunten, maar alleen aan een subset. Het detecteren als knooppunten worden beïnvloed of niet wordt gedaan via een willekeurige nummergenerator, waarvan de gevoeligheid kan worden afgestemd.

12. Ga na snaren

De bovengenoemde willekeurige nummersgenerator geeft nummers uit die van nul naar één zijn. Als het nummer groter is dan de drempel, zal de wijziging niet plaatsvinden. Instelling stringarraythrshold Aan een waarde van één betekent dat alle nummers kleiner zijn dan de drempel, ervoor zorgen dat elk en elke snaar wordt verminkt.

 Tamhan @ Tamhan-ThinkPad: ~ / futureobfuscate / code $
JavaScript-obfuscator. - Output ./Obfusca
--String-array-codering base64
--StRingarraythrshold 1 

13. Injecteer willekeurige code

Analyse-instrumenten zoals JSNICE-winst van het hebben van een kleine codebasis. Gezien het feit dat JavaScript-obfuscator de code hoe dan ook in een AST breekt, spreekt niets tegen het inbrengen van 'Garbage Code' on the Fly. Aangezien deze functie aanzienlijke bloat toevoegt, moeten ontwikkelaars het handmatig activeren via de twee hiernaast weergegeven parameters:

 --Dead-code-injectie & lt; boolean & gt;
--Dead-code-injectie-drempel & lt; nummer & gt; 

14. Geniet van de chaos

De obfuscator met beide --Dead-code-injectie WAAR en --Dead-code-injectie-drempel 1 Set leidt tot een bestandsgrootte van ongeveer 2,5 kb. Pogingen om de code te neutraliseren, leidt tot een bijna onbetyptbare wand van meestal tautologisch JavaScript.

15. PROGRESSIEF PROGRAMMA FLOW wijzigen

Het breken van code in een AST maakt diepe transformaties mogelijk. Het instellen van de controleflowflattening Attribuut aan True vertelt het programma dat het functie-oproepen kan ontzeggen. Dit leidt tot een aanzienlijke uitbreiding van de gegenereerde code - houd er rekening mee dat de resultaten een prestatie-treffer van 150 procent kunnen nemen.

16. irriteert de debugger

Artefacten van debugging zijn 's werelds grootste geschenk aan hackers. Een paar gesprekken naar Console.Log () en zijn vrienden kunnen een aanvaller waardevolle informatie geven over wat er in het programma gebeurt - een goed voorbeeld zou het getoonde fragment zijn:

 Functie Dothetrick ()
​
var chiffrat;
console.log ("voorbereiden om te coderen
chiffrat ");
Chiffrat = ROT13 (MYSTRING);
console.log ("retourneren van chiffrat");
terugkeer chiffrat;
} 

17. Evalueer technische problemen

We kunnen proberen het programma opnieuw te obseren met de onderstaande opdracht. Het schakelt de functie String Caching uit en moet de console-logging via omleiding uitschakelen.

 Tamhan @ Tamhan-ThinkPad: ~ / Desktop /
DeadStuff / 2018NOV / FutureObScate / Code $
JavaScript-obfuscator. - Output ./Obfusca
- Spring-array-codering false
--DisableConsoleoutput waar 

18. Speel kat- en muisspellen

Obfuscator en browserverkopers vechten een lange en bittere strijd om de debugger-functie. Hierdoor gaan 'agressieve' maatregelen, zoals console-omleiding van de programmallow-onderdrukten die deze stap worden begeleid, meestal niet lang.

 DebugProtectie: false,
DebugProtectionInterval: FALSE, 

19. Snel online obfuscation

Het volledige Node.js-pakket installeren voor obfuscating One of twee bestanden is zinloos. Bezoek obfuscator.io Om toegang te krijgen tot een online versie van het programma dat in uw browser woont. Controleer en comboboxes onder de hoofdinvoer kunt u het programma-gedrag wijzigen zoals uiteengezet in de bovenstaande stappen.

20. Leer meer

How to hide your JavaScript code: Learn more

Klik om alle parameters te zien die u nodig heeft

Het ontwikkelaarsteam onderhoudt relatief gedetailleerde documentatie die de manier uitlegt die de verschillende opdrachtregelparameters met elkaar communiceren. Gewoon bezoek ga hier Als de hierboven getoonde "korte help" -uitvoer u niet helpt bij het bereiken van uw doel.

21. Een sterfelijke vijand van een obfuscator

How to hide your JavaScript code: JS Nice

JS Nice is een gemakkelijke manier om je code onleesbaar te maken

De eth Zürich biedt een de-obfuscation-service die wordt gehost bij jsnice.org ​Het maakt gebruik van neurale netwerken en een kennisdatabase die bestaat uit bestaande code om variabele namen te bepalen. Tijdens het afwisselen werkt de opmaak meestal vrij goed, sommige van de namen - zoals pixelsizetargetmax In de coderingsroutine die deze stap begeleidt - kan nogal amusant zijn.

 Functie ROT13 (PL $ 120) {
/ ** @TYPE {! Regexp} * /
Var InsufficientRegExp = New Regexp
(A0_0x395D ("0x1"), "I"); variëren
PIXELSIZETARGETMAX = "A" ["charcodeeat"] (0);
VAR ZEROSIZEMAX = "Z" ["charcodeeat"] (0);
/ ** @TYPE {NUMBER} * /
var minh = 13;
/ ** @TYPE {string} * /
var uit = ""; 

Generate, the award winning conference for web designers, returns to NYC on April 24-25! To book tickets visit www.generateconf.com 

Genereer, de bekroonde conferentie voor webontwerpers, keert terug naar NYC op 24-25 april! Tickets bezoek boeken www.generateconf.com

Dit artikel is oorspronkelijk gepubliceerd in kwestie 283 van Creative Web Design Magazine Webdesigner Koop hier nummer 283 of Abonneer u hier op Web Designer

Gerelateerde artikelen:

  • 9 van de beste JavaScript-frameworks
  • Onthuld: de nieuwste JavaScript-trends
  • 5 Awesome Javascript API's

Procedures - Meest populaire artikelen

Aan de slag met GraM CMS

Procedures Sep 13, 2025

(Beeldkrediet: toekomst) GRAV is een contentmanagementsysteem (CMS) met een verschil. Content managementsystemen zijn..


Hoe te tekenen ASUKA van Neon Genesis Evangelion

Procedures Sep 13, 2025

(Beeldkrediet: Paul Kwon) Creëren karakterontwerpen Want Living is een droom die uitkomt, vooral bij ..


Hoe de grootte van een afbeelding in Photoshop te wijzigen

Procedures Sep 13, 2025

Weten hoe de grootte van een afbeelding in Photoshop te wijzigen is een fundamentele vaardigheid voor ontwerpers. Of u nu een afb..


Master de mixerborstel in Photoshop

Procedures Sep 13, 2025

Digital Painting-tools hebben de afgelopen jaren serieus geavanceerd. Kunstenaars kunnen tablets gebruiken om thuis of weg te pro..


Instellen van site-thema met CSS-variabelen

Procedures Sep 13, 2025

CSS Custom Eigenschappen, algemeen bekend als CSS-variabelen, worden nu ondersteund door alle grote moderne browsers. Dit beteken..


Maak rimpeleffecten met PIXIJS

Procedures Sep 13, 2025

Er zijn veel interessante effecten die aan een pagina kunnen worden toegevoegd om de betrokkenheid te vergroten, maar het is bela..


Maak een splash-effect in RealFlow

Procedures Sep 13, 2025

Pagina 1 van 2: Pagina 1 Pagina 1 Pagina 2 In dit artikel ga ik dem..


Gebruik deeltjes om een ​​3D-splash te maken

Procedures Sep 13, 2025

Deze tutorial zal een kijkje nemen naar hoe u een vloeibare splash of krooneffect kunt maken en kunt worden gebruikt om spatten u..


Categorieën