Ak ste niekedy museli písať skutočný projekt, bezpečnostné obavy existujú — alebo by aspoň mali byť. Ako technológia napreduje, môžeme za krátky čas napísať úžasné, výkonné a výkonné systémy, ale zároveň to znamená, že škodliví ľudia a technológie sú silnejšie a ťažšie ich prekonať. Preto je dnes pri vývoji systémov nevyhnutné chrániť sa pred všetkými bežnými zraniteľnosťami.
Angular sa stará o veľa bezpečnosti hneď po inštalácii: má vlastný variabilný ochranný systém a funkcie sanitizácie, ktoré zabraňujú škodlivému kódu vo vašej aplikácii. Ďalšou funkciou je kompresia kódu.
Minimalizácia a zmätok
Kompresia kódu je technika, ktorá znižuje veľkosť zdrojového kódu odstránením zbytočných znakov, ako sú medzery a komentáre, čím zlepšuje výkon načítavania zdrojového kódu. Tento proces je bežný vo webovom vývoji pre JavaScript, CSS a HTML súbory a nejako pridáva vrstvu bezpečnosti tým, že kód zahmlieva. Komprimovaný kód je mimoriadne ťažko čitateľný, preto sa považuje za akýsi druh zahmlievania. Nástroj však dokáže kód dekomprimovať, aby bol čitateľný, čo je následne možné spätne analyzovať. Tu nastáva zmätok.
Doplnkom kompresie je technika obfuskácie kódu, ktorá sťažuje pochopenie a spätné inžinierstvo zdrojového kódu. Často sa používa na ochranu duševného vlastníctva, zabránenie manipulácii a odradenie od reverzného inžinierstva, čo sťažuje útočníkom pochopenie logiky kódu a identifikáciu potenciálnych zraniteľností. Prevádza čitateľný kód do zložitejších a nejasnejších verzií bez zmeny jeho funkčnosti. Nástroje na zahmlievanie kódu môžu tiež pridať mŕtvy kód, aby zavádzali útočníkov, čím sťažujú pochopenie softvérového kódu.
No, poďme si pomýliť našu aplikáciu Angular, ak vám príde užitočná.
Webpack obfuscator
Angular používa Webpack počas fázy balenia a má vlastné predvolené nastavenia pre balenie modulov, ktoré vyvíjate. Využijeme to a prispôsobíme spôsob, akým Webpack balí Angular aplikácie. Najprv nainštalujte nasledujúce balíky:
javascript-obfuscator: Výkonný bezplatný JavaScriptový obfuskátor s rôznymi funkciami na ochranu vášho zdrojového kódu.
zatiaľ čo webpack-obfuscator ho používa ako plugin na poskytovanie funkčnosti Webpacku. JavaScript kód obfuscatora nájdete tu a plugin Webpack obfuscator tu.Prihlásenie na hypertextový odkaz je viditeľné.
Potom vytvorte custom-webpack.config.js súbor s vlastnou konfiguráciou, ktorú chceme použiť počas procesu balíčkovania. Tu je jednoduchý príklad:
Môžete ponúknuť mnoho rôznych konfiguračných možností pre pluginy, webpack-obfuscator na jemné doladenie zmäteného výstupu. Toto je najjednoduchší spôsob, ako pridať debugProtection do kódu, čo sťažuje používanie konzoly na sledovanie premenných a funkcií aplikácie.
Poznámka: Druhý v WebpackObfuscatorParametre poľa sú súbory, ktoré vylučujú zahmlievanie。
Zatiaľ sme nastavili konfiguráciu pre Webpack. Teraz ho musíme použiť. Potrebujeme aj ďalšiu závislosť:
To nám pomôže integrovať náš vlastný webpack builder s Angularom, aby sme mohli stále stavať štruktúry pomocou Angularu. Keď je balík nainštalovaný, stačí zmeniť súbor angular.json. Vyhľadajte atribút build a pridajte nasledujúce:
Nahradením builderfrom za @angular-devkit/build-angular:browser za @angular-builders/custom-webpack:browser môžeme stále vytvárať pre prehliadač, ale teraz môžeme injektovať našu vlastnú webpack konfiguráciu. Vlastnosť vlastného WebpackConfig nastavuje referenciu na súbor, aby ju Angular mohol použiť.
Ak je všetko správne nastavené, vaše príkazy na zostavenie by mali fungovať bez problémov a výsledkom bude mätúca aplikácia v Angulare!
nedostatok
Upozorňujeme však, že táto metóda má nevýhody z hľadiska veľkosti balenia. Obfuskácia kódu sťažuje spätné inžinierstvo kódu, ale spôsob, akým deklaruje premenné, používa viac znakov, čo vedie k zväčšeniu balíka – takmer opačne ako minimalizácia kódu.
To je všetko. Používajte ho zámerne a naučte sa, ako riešiť nedostatky tejto technológie!
Originál:Prihlásenie na hypertextový odkaz je viditeľné.
Referencia:Prihlásenie na hypertextový odkaz je viditeľné. |
Zverejnené 2024-12-23 11:06:14
|
|
|
