Se você já teve que escrever um projeto de verdade, existem preocupações de segurança — ou pelo menos deveriam existir. À medida que a tecnologia avança, podemos criar sistemas incríveis, poderosos e de alto desempenho em pouco tempo, mas isso também significa que pessoas e tecnologias maliciosas se tornam mais poderosas e difíceis de superar. Por isso, é essencial proteger contra todas as vulnerabilidades comuns ao desenvolver sistemas hoje.
O Angular cuida de muita segurança logo de cara: possui seu próprio sistema de proteção variável e recursos de higienização que impedem que código malicioso seja executado no seu app. Outro recurso é a compressão de código.
Minimização e confusão
A compressão de código é uma técnica que reduz o tamanho do código-fonte ao remover caracteres desnecessários, como espaços e comentários, melhorando o desempenho de carregamento do código-fonte. Esse processo é comum no desenvolvimento web para arquivos JavaScript, CSS e HTML, e de alguma forma adiciona uma camada de segurança ao ofuscar o código. O código comprimido é extremamente difícil de ler, por isso é considerado algum tipo de ofuscação. No entanto, a ferramenta pode descomprimir o código para torná-lo legível, o que pode ser então reconstruído. É aí que surge a confusão.
Complementando a compressão, a ofuscação de código é uma técnica que torna o código-fonte difícil de entender e de fazer engenharia reversa. Ele é frequentemente usado para proteger propriedade intelectual, prevenir manipulações e dissuadir engenharia reversa, dificultando que atacantes entendam a lógica do código e identifiquem vulnerabilidades potenciais. Ele converte código legível em versões mais complexas e obscuras sem alterar sua funcionalidade. Ferramentas de ofuscação de código também podem adicionar código morto para enganar atacantes, dificultando a compreensão da base de código do software.
Bem, vamos confundir nosso app Angular se você achar útil.
Ofuscador de webpacks
O Angular usa o Webpack durante a fase de empacotamento e tem suas próprias configurações padrão para empacotar os módulos que você desenvolve. Vamos aproveitar isso e personalizar como o Webpack empacota os aplicativos do Angular. Primeiro, instale os seguintes pacotes:
JavaScript-Obfuscator: Um poderoso ofuscador JavaScript livre com uma variedade de recursos para proteger seu código-fonte.
enquanto o webpack-obfuscator o usa como um plugin para fornecer funcionalidade ao Webpack. Você pode encontrar o código do obfuscador em JavaScript aqui, e o plugin do Webpack obfuscator aqui.O login do hiperlink está visível.
Depois disso, crie um arquivo custom-webpack.config.js com a configuração personalizada que queremos aplicar durante o processo de agrupamento. Aqui vai um exemplo simples:
Você pode fornecer várias opções de configuração diferentes para plugins, webpack-obfuscador para afinar a saída confusa. Essa é a mais simples para adicionar debugProtection ao seu código, o que dificulta o uso do console para acompanhar as variáveis e funções da sua aplicação.
Nota: O segundo no WebpackObfuscatorParâmetros de array são arquivos que excluem ofuscação。
Até agora, configuramos a configuração do Webpack. Agora precisamos usá-la. Também precisamos de outra dependência:
Isso nos ajudará a integrar nosso construtor personalizado de webpacks com o Angular, para que ainda possamos construir estruturas usando o Angular. Depois que o pacote está instalado, só precisamos mudar o arquivo angular.json. Procure pelo atributo de build e adicione o seguinte:
Ao substituir builderfrom por @angular-devkit/build-angular:browser para @angular-builders/custom-webpack:browser, ainda podemos compilar para o navegador, mas agora podemos injetar nossa configuração personalizada de webpack. A propriedade customWebpackConfig define a referência ao arquivo para que o Angular possa usá-lo.
Se tudo estiver configurado corretamente, seus comandos de build devem funcionar normalmente, e o resultado será um app Angular confuso!
deficiência
No entanto, note que esse método tem desvantagens em termos de tamanho da embalagem. A ofuscação de código dificulta a engenharia reversa do código, mas a forma como declara variáveis usa mais caracteres, resultando em um aumento no tamanho do pacote – quase na direção oposta à minimização do código.
É isso. Certifique-se de usá-la de forma intencional e aprenda a corrigir as limitações dessa tecnologia!
Original:O login do hiperlink está visível.
Referência:O login do hiperlink está visível. |
Postado em 23-12-2024 às 11:06:14
|
|
|
