How to protect your website without changing its code
Obfuscating is the fact of intentionally making something less clear to understand.
If you use the Wappalyzer extension on your navigator, you can see what techs were used to build the website you’re navigating on.
Some things are hard to hide: most front-end frameworks use homemade HTML tags and recognizable JavaScript functions, which makes them very easy to detect.
However, some technologies such as the reverse proxy the website uses, or its web server version and name use several HTTP headers.
By default, Express.JS uses the x-powered-by
header with the express
value. Apache does the same, and NGinx sends by default its name and build number!
This data can be a vector for cyber-attacks.
If you’re running a server on a version that is known to bundle some known vulnerabilities, some people might try to attack you.
How to prevent that from happening?
Well, you can’t really prevent 100% of the scenarios, but keeping your software up-to-date is a good starting point when it comes to security (updates often contain security patches as well as new features).
In most cases, you don’t want anyone to know what web server you’re running, or what version of PHP you’re using to develop your back-end.
Obfuscating your website starts with removing all the useless headers that give too much information (like x-powered-by
).
Using packages like helmet
for your Node app is a good way to include useful HTTP headers like X-Frame-Options
or X-XSS-Protection
.
With PHP, simply add the expose_php = off
entry to your php.ini
file.
If you’re using Nginx, you can use the server_tokens off;
directive in your main config file (or server_tokens none;
) if you’re using Nginx MOD.
Tricking the attackers
If you want to trick any malicious person scraping your website, you can set false headers, for example, to show you’re running on express
when you’re in fact running PHP!
The same works with your server, for example, sending Apache headers when running Nginx and vice versa.
Uglifying your code
There is a process called uglification which basically makes your code look worse, so it’s harder to debug.
Let’s take this implementation of a bubble sort function:
Here is how the same code looks after being uglified.
Harder to read, right?
Uglifying your front-end JavaScript code makes it harder to understand and therefore harder to reverse-engineer.
It can usually be done using a bundler like webpack, which most front-end frameworks feature out-of-the-box.
This can easily be done with uglify-js and uglifyjs-webpack-plugin.
We’ve now got two ways to make our website more secure without changing anything to its code!
If you’ve liked this content, make sure to check out my other posts, and feel free to follow my account to support me and see my next Stories!
Have a good day :)