Exploration of Website Source Code Obfuscation
While developing a website I went down a rabbit hole of attempting to hide the source code from the end user. I quickly learned that this isn’t fully possible.
However, there are ways to make it significantly harder and more annoying to view.
Option 1- Disable Right Click
Through some quick brainstorming, my first thought was to try to find a way to disable right-click (seeing as this is the traditional way to inspect code on a website).
I came across this article.
It provided a fairly simple solution, which is to add the “oncontextmenu” attribute to the html body tag and set it to “return false;” (as seen below).
<html
<head>
...
</head>
<body oncontextmenu="return false;">
...
</body>
</html>>
This disabled right-click thus preventing the user from right-clicking and then selecting “Inspect”.
Option 2- Disable Specific Key Input
While disabling right-click did make it harder to look at the source code there were still other ways. My next thought was to disable specific keys so that way the end user can’t use shortcuts to access the source code.
I looked through the Mozilla web docs and found the Mouse Event section. In this section, I found the keydown event which fires when a specific key is pressed. A list of js key codes is available here. With some quick research, I found the keys that are used as shortcuts to dev tools (F12, Ctrl+Shift+i, Ctrl+u).
I then created a function in js that evaluates to false when certain key codes are received from the keydown event.
Recommended by LinkedIn
<script
document.onkeydown = function (e) {
if (window.event.keyCode == 123 || window.event.keyCode == 17 || window.event.keyCode == 16 || window.event.keyCode == 73 || window.event.keyCode == 85)
return false;
}
</script>>
Option 3- Source Code Obfuscation with JavaScript (best option)
Another option would be to obfuscate your source code by using javascript. However, the issue with this is that you have to enable javascript to use the website.
I found this online html code obfuscator here.
Here is an example of how it works below.
Input-
<h1>Obfuscate this source code</h1>
Output-
<script>var s="=i2?Pcgvtdbuf!uijt!tpvsdf!dpef=0i2? ";var m="";for(var i=0;i<s.length;i++)m+=String.fromCharCode(s.charCodeAt(i)-1);document.write(m);</script><noscript>You must enable JavaScript to see this text.</noscript>
When implementing this code surrounded with the usual HTML formatting (!DOCTYPE html, head, body)
Conclusion
Ultimately there is no real way to make HTML website code invisible, however, there are processes that make it significantly harder.
Feel free to reach out if you discover other solutions.