Se hai mai dovuto scrivere un progetto reale, esistono preoccupazioni di sicurezza — o almeno dovrebbero esserci. Con il progresso della tecnologia, possiamo scrivere sistemi straordinari, potenti e ad alte prestazioni in poco tempo, ma ciò significa anche che persone e tecnologie malevoli diventano più potenti e difficili da superare. Ecco perché è essenziale proteggere da tutte le vulnerabilità comuni nello sviluppo di sistemi oggi.
Angular si occupa di gran parte della sicurezza fin dall'inizio: ha un proprio sistema di protezione variabile e funzionalità di sanificazione che impediscono a codice malevolo di essere eseguito nella tua app. Un'altra caratteristica è la compressione del codice.
Minimizzazione e confusione
La compressione del codice è una tecnica che riduce la dimensione del codice sorgente rimuovendo caratteri inutili come spazi e commenti, migliorando così le prestazioni di caricamento del codice sorgente. Questo processo è comune nello sviluppo web per file JavaScript, CSS e HTML, e in qualche modo aggiunge un livello di sicurezza offuscando il codice. Il codice compresso è estremamente difficile da leggere, motivo per cui viene considerato una sorta di offuscamento. Tuttavia, lo strumento può decomprimere il codice per renderlo leggibile, che può poi essere ingegnerizzato al contrario. Ed è qui che nasce la confusione.
A complemento della compressione, l'offuscamento del codice è una tecnica che rende difficile comprendere e ingegnerizzare il codice sorgente. Viene spesso utilizzato per proteggere la proprietà intellettuale, prevenire le manomissioni e scoraggiare il reverse engineering, rendendo difficile per gli attaccanti comprendere la logica del codice e identificare potenziali vulnerabilità. Converte codice leggibile in versioni più complesse e oscure senza alterarne le funzionalità. Gli strumenti di offuscamento del codice possono anche aggiungere codice morto per fuorviare gli attaccanti, rendendo più difficile comprendere il codice software.
Bene, confondiamo la nostra app Angular se la trovi utile.
Ofuscatore webpack
Angular utilizza Webpack durante la fase di confezionamento e ha le sue impostazioni predefinite per il packaging dei moduli che sviluppi. Approfitteremo di questo e personalizzaremo come Webpack impacchetterà le app Angular. Per prima cosa, installa i seguenti pacchetti:
JavaScript-obfuscator: Un potente obfuscatore JavaScript libero con una varietà di funzionalità per proteggere il tuo codice sorgente.
mentre webpack-obfuscator lo usa come plugin per fornire funzionalità a Webpack. Puoi trovare il codice JavaScript obfuscator qui, e il plugin Webpack obfuscator qui.Il login del link ipertestuale è visibile.
Dopodiché, crea un file custom-webpack.config.js con la configurazione personalizzata che vogliamo applicare durante il processo di aggregazione. Ecco un esempio semplice:
Puoi fornire molte opzioni di configurazione diverse per plugin, webpack-obfuscator per ottimizzare l'output confuso. Questa è la soluzione più semplice per aggiungere DebugProtection al tuo codice, il che rende difficile usare la console per tenere traccia delle variabili e delle funzioni dell'applicazione.
Nota: Il secondo in WebpackObfuscatorI parametri dell'array sono file che escludono l'offuscamento。
Finora abbiamo configurato la configurazione per Webpack. Ora dobbiamo usarla. Abbiamo anche bisogno di un'altra dipendenza:
Questo ci aiuterà a integrare il nostro webpack builder personalizzato con Angular, così da poter comunque costruire strutture usando Angular. Una volta installato il pacchetto, dobbiamo solo cambiare il file angular.json. Cerca l'attributo build e aggiungi quanto segue:
Sostituendo builderfrom con @angular-devkit/build-angular:browser in @angular-builders/custom-webpack:browser, possiamo comunque compilare per il browser, ma ora possiamo inserire la nostra configurazione personalizzata di webpack. La proprietà customWebpackConfig imposta il riferimento al file in modo che Angular possa utilizzarlo.
Se tutto è configurato correttamente, i comandi di build dovrebbero funzionare bene e il risultato sarà un'app Angular confusa!
mancanza
Tuttavia, si prega di notare che questo metodo presenta svantaggi in termini di dimensione del pacchetto. L'offuscamento del codice rende più difficile il reverse engineering del codice, ma il modo in cui dichiara le variabili utilizza più caratteri, causando un aumento delle dimensioni del pacchetto - quasi nella direzione opposta alla minimizzazione del codice.
Questo è tutto. Assicurati di usarla con consapevolezza e di imparare a risolvere le carenze di questa tecnologia!
Originale:Il login del link ipertestuale è visibile.
Riferimento:Il login del link ipertestuale è visibile. |
Pubblicato il 23-12-2024 11:06:14
|
|
|
