Pokud jste někdy museli psát skutečný projekt, bezpečnostní obavy existují — nebo by měly být. Jak technologie postupují, můžeme během krátké doby napsat úžasné, výkonné a výkonné systémy, ale zároveň to znamená, že škodliví lidé a technologie jsou silnější a obtížnější k překonání. Proto je dnes nezbytné chránit se před všemi běžnými zranitelnostmi při vývoji systémů.
Angular se o bezpečnost stará hned po instalaci: má vlastní systém proměnlivé ochrany a funkce sanitizace, které zabraňují škodlivému kódu ve vaší aplikaci. Další funkcí je komprese kódu.
Minimalizace a zmatek
Komprese kódu je technika, která snižuje velikost zdrojového kódu odstraněním zbytečných znaků, jako jsou mezery a komentáře, čímž zlepšuje výkon načítání zdrojového kódu. Tento proces je běžný ve webovém vývoji pro JavaScript, CSS a HTML soubory a nějakým způsobem přidává vrstvu zabezpečení tím, že kód zamlžuje. Komprimovaný kód je extrémně obtížně čitelný, proto je považován za určitou formu zamlžení. Nástroj však může kód dekomprimovat, aby byl čitelný, což lze následně zpětně analyzovat. A právě zde nastává zmatek.
Doplňující kompresi je technika obfuskace kódu, která ztěžuje pochopení a zpětné inženýrství zdrojového kódu. Často se používá k ochraně duševního vlastnictví, zabránění manipulaci a odrazení od reverzního inženýrství, což ztěžuje útočníkům pochopení logiky kódu a identifikaci potenciálních zranitelností. Převádí čitelný kód do složitějších a méně známých verzí, aniž by změnil jeho funkčnost. Nástroje pro zamlžování kódu mohou také přidávat mrtvý kód, aby útočníky zmátli, což ztěžuje pochopení softwarového kódu.
No, pojďme si naši aplikaci Angular zmást, pokud vám přijde užitečná.
Webpack obfuscator
Angular používá Webpack během fáze balení a má vlastní výchozí nastavení pro balení modulů, které vyvíjíte. Využijeme toho a přizpůsobíme způsob, jakým Webpack balí aplikace Angular. Nejprve nainstalujte následující balíčky:
javascript-obfuscator: Výkonný bezplatný JavaScriptový obfuscator s řadou funkcí na ochranu vašeho zdrojového kódu.
zatímco webpack-obfuscator jej používá jako plugin k poskytování funkcí Webpacku. JavaScriptový kód obfuscatoru najdete zde a plugin Webpack obfuscator zde.Přihlášení k hypertextovému odkazu je viditelné.
Poté vytvořte custom-webpack.config.js soubor s vlastní konfigurací, kterou chceme během balíčkování použít. Tady je jednoduchý příklad:
Můžete nabídnout mnoho různých konfiguračních možností pro pluginy, webpack-obfuscator pro jemné doladění zmateného výstupu. To je nejjednodušší způsob, jak přidat debugProtection do kódu, což ztěžuje používání konzole pro sledování proměnných a funkcí vaší aplikace.
Poznámka: Druhý díl ve WebpackObfuscatorParametry pole jsou soubory, které vylučují obfuskaci。
Zatím jsme nastavili konfiguraci pro Webpack. Teď ho musíme použít. Potřebujeme také další závislost:
To nám pomůže integrovat náš vlastní webpack builder s Angularem, abychom mohli stále stavět struktury v Angularu. Jakmile je balíček nainstalován, stačí změnit jen angular.json souboru. Vyhledejte atribut build a přidejte následující:
Nahrazením builderfrom za @angular-devkit/build-angular:browser na @angular-builders/custom-webpack:browser můžeme stále stavět pro prohlížeč, ale nyní můžeme vkládat vlastní konfiguraci webpacku. Vlastnost customWebpackConfig nastavuje odkaz na soubor, aby ho Angular mohl použít.
Pokud je vše správně nastavené, příkazy pro sestavení by měly fungovat bez problémů a výsledkem bude matoucí aplikace Angular!
nedostatek
Nicméně vezměte prosím na vědomí, že tato metoda má nevýhody z hlediska velikosti balení. Obfuskace kódu ztěžuje zpětné inženýrství kódu, ale způsob, jakým deklaruje proměnné, využívá více znaků, což vede ke zvětšení velikosti balíčku – téměř opačně než minimalizace kódu.
To je vše. Používejte ji cíleně a naučte se, jak řešit nedostatky této technologie!
Původní:Přihlášení k hypertextovému odkazu je viditelné.
Odkaz:Přihlášení k hypertextovému odkazu je viditelné. |
Zveřejněno 23. 12. 2024 11:06:14
|
|
|
