If you've ever had to write an actual project, security concerns exist — or at least should be. As technology advances, we can write amazing, powerful, high-performance systems in a short amount of time, but it also means that malicious people and technologies become more powerful and difficult to overcome. That is why it is essential to protect against all common vulnerabilities when developing systems today.
Angular takes care of a lot of security out of the box: it has its own variable protection system and sanitization features that prevent malicious code from running in your app. Another feature is code compression.
Minimization and confusion
Code compression is a technique that reduces the size of source code by removing unnecessary characters such as spaces and comments, improving the loading performance of source code. This process is common in web development for JavaScript, CSS, and HTML files, and it somehow adds a layer of security by obfuscating the code. The compressed code is extremely difficult to read, which is why it is considered some kind of obfuscation. However, the tool can decompress the code to make it readable, which can then be reverse-engineered. This is where confusion comes in.
Complementing compression, code obfuscation is a technique that makes source code difficult to understand and reverse engineer. It is often used to protect intellectual property, prevent tampering, and deter reverse engineering, making it difficult for attackers to understand the logic of the code and identify potential vulnerabilities. It converts readable code into more complex and obscure versions without altering its functionality. Code obfuscation tools can also add dead code to mislead attackers, making it harder to understand the software codebase.
Well, let's confuse our Angular app if you find it useful.
Webpack obfuscator
Angular uses Webpack during the packaging phase and has its own default settings for packaging the modules you develop. We'll take advantage of this and customize how Webpack packages Angular apps. First, install the following packages:
javascript-obfuscator: A powerful free JavaScript obfuscator with a variety of features to protect your source code.
whereas webpack-obfuscator uses it as a plugin to provide functionality to Webpack. You can find the JavaScript obfuscator code here, and the Webpack obfuscator plugin here.The hyperlink login is visible.
After that, create a custom-webpack.config.js file with the custom configuration we want to apply during the bundling process. Here's a simple example:
You can provide many different configuration options for plugins, webpack-obfuscator to fine-tune the confused output. This is the simplest one to add debugProtection to your code, which makes it difficult to use the console to keep track of your application's variables and functions.
Note: The second in WebpackObfuscatorArray parameters are files that exclude obfuscation。
So far, we've set up the configuration for Webpack. Now we need to use it. We also need another dependency:
This will help us integrate our custom webpack builder with Angular so that we can still build structures using Angular. Once the package is installed, we only have to change the file angular.json. Search for the build attribute and add the following:
By replacing builderfrom with @angular-devkit/build-angular:browser to @angular-builders/custom-webpack:browser, we can still build for the browser, but can now inject our custom webpack configuration. The customWebpackConfig property sets the reference to the file so that Angular can use it.
If everything is set up correctly, your build commands should work fine, and the result will be a confusing Angular app!
shortcoming
However, please note that this method has drawbacks in terms of package size. Code obfuscation makes it harder to reverse engineer code, but the way it declares variables uses more characters, resulting in an increase in the size of the package - almost in the opposite direction of code minimization.
That's it. Be sure to use it purposefully and learn how to address the shortcomings of this technology!
Original:The hyperlink login is visible.
Reference:The hyperlink login is visible. |
Posted on 2024-12-23 11:06:14
|
|
|
