Secure Your CSS And JavaScript Files

Nowadays securing client side code is a challenging job. In this article, I come up with some good tips to secure client-side code.

You can place either JavaScript or CSS files in your secured server and read those files using JavaScript obfuscated code to prevent the unnecessary access.

Step 1

Remove all your CSS and JavaScript files from the solution which needs security and place those files in the secured server.

Step 2

Store the base address of your secured server in your database table.

Step 3

Get the base address by calling service (API) method.

Step 4

Create one JavaScript file in the solution where the API method is called to get the base address of the secured server.

Step 5

Inside JavaScript file append relative address with base address to form actual address.

Actual address = base address + relative address

Ex

Base address = https://cdnjs.cloudflare.com/
Relative address = ajax/libs/angular.js/2.0.0-beta.17/angular2.min.js
Actual address = https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2.min.js


Step 6

For the successful call of the API method from JavaScript file, load all the required CSS and JavaScript file, using JQuery append methods, in the success code blocks

In the success event of the API method call in JavaScript file, load all required CSS and JavaScript files by calling JQuery append() method.

Step 7

Obfuscate the created JavaScript file which has been created in the solution to call API method.

Sample Code

The below JavaScript code is the read CSS file dynamically and load it to the header section of the HTML page.

Javascript Code

  1. function loadCssDynamically() {  
  2. var response = $.ajax({  
  3. url: "Content/style.css"// Here you can configure your service method call to get the base address   
  4. type: 'HEAD',  
  5. async: false  
  6. }).status;  
  7.   
  8. var response_Status = (response != "200") ? false : true;  
  9.   
  10. if (response_Status) {  
  11. var lblMessage = document.getElementById("lblMessage");  
  12. lblMessage.innerHTML = "Message with CSS...";  
  13. $('head').append('<link rel="stylesheet" type="text/css" href="Content/style.css" />');  
  14. }  
  15. else   
  16. $('head').append('<link rel="stylesheet" type="text/css" href="Styles/ test.css" />');   
  17. }  
  18. $(function () {  
  19. loadCssDynamically();  
  20. });  
Obfuscate your code

JavaScript Obfuscator renders the JavaScript source code into obfuscated format with completely unreadable form which results preventing it from analyzing and theft from unauthorized access.

For testing purposes, you can obfuscate your JavaScript code from the site.

javascript
  1. var _0x89ec=["\x73\x74\x61\x74\x75\x73","\x43\x6F\x6E\x74\x65\x6E\x74\x2F\x73\x74\x79\x6C\x65\x2E\x63\x73\x73","\x48\x45\x41\x44","\x61\x6A\x61\x78","\x32\x30\x30","\x6C\x62\x6C\x4D\x65\x73\x73\x61\x67\x65","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x4D\x65\x73\x73\x61\x67\x65\x20\x77\x69\x74\x68\x20\x43\x53\x53\x2E\x2E\x2E","\x3C\x6C\x69\x6E\x6B\x20\x72\x65\x6C\x3D\x22\x73\x74\x79\x6C\x65\x73\x68\x65\x65\x74\x22\x20\x74\x79\x70\x65\x3D\x22\x74\x65\x78\x74\x2F\x63\x73\x73\x22\x20\x68\x72\x65\x66\x3D\x22\x43\x6F\x6E\x74\x65\x6E\x74\x2F\x73\x74\x79\x6C\x65\x2E\x63\x73\x73\x22\x20\x2F\x3E","\x61\x70\x70\x65\x6E\x64","\x68\x65\x61\x64","\x3C\x6C\x69\x6E\x6B\x20\x72\x65\x6C\x3D\x22\x73\x74\x79\x6C\x65\x73\x68\x65\x65\x74\x22\x20\x74\x79\x70\x65\x3D\x22\x74\x65\x78\x74\x2F\x63\x73\x73\x22\x20\x68\x72\x65\x66\x3D\x22\x53\x74\x79\x6C\x65\x73\x2F\x41\x50\x41\x4D\x5F\x62\x6C\x75\x65\x2E\x63\x73\x73\x22\x20\x2F\x3E"];function loadCssDynamically(){var _0x1018x2=$[_0x89ec[3]]({url:_0x89ec[1],type:_0x89ec[2],async:false})[_0x89ec[0]];var _0x1018x3=(_0x1018x2!=_0x89ec[4])?false:true;if(_0x1018x3){var _0x1018x4=document[_0x89ec[6]](_0x89ec[5]);_0x1018x4[_0x89ec[7]]=_0x89ec[8];$(_0x89ec[11])[_0x89ec[10]](_0x89ec[9])}else {$(_0x89ec[11])[_0x89ec[10]](_0x89ec[12])}}$(function(){loadCssDynamically()})  
Complete Code
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title></title>  
  5. <meta charset="utf-8" />  
  6. <script src="Scripts/jquery-1.10.2.min.js"></script>  
  7. <script type="text/javascript">  
  8. //-----------------------------Actual Code--------------------------------  
  9. //function loadCssDynamically() {  
  10. // var response = $.ajax({  
  11. // url: "Content/style.css",  
  12. // type: 'HEAD',  
  13. // async: false  
  14. // }).status;  
  15.   
  16. // var response_Status = (response != "200") ? false : true;  
  17.   
  18. // if (response_Status) {  
  19. // var lblMessage = document.getElementById("lblMessage");  
  20. // lblMessage.innerHTML = "Message with CSS...";  
  21. // $('head').append('<link rel="stylesheet" type="text/css" href="Content/style.css" />');  
  22. // }  
  23. // else   
  24. // $('head').append('<link rel="stylesheet" type="text/css" href="Styles/test.css" />');   
  25. //}  
  26. //$(function () {  
  27. // loadCssDynamically();  
  28. //});  
  29. //----------------------------------------------------------------------  
  30.   
  31. // -------------------------Obfuscated Code-----------------------  
  32. var _0x89ec=["\x73\x74\x61\x74\x75\x73","\x43\x6F\x6E\x74\x65\x6E\x74\x2F\x73\x74\x79\x6C\x65\x2E\x63\x73\x73","\x48\x45\x41\x44","\x61\x6A\x61\x78","\x32\x30\x30","\x6C\x62\x6C\x4D\x65\x73\x73\x61\x67\x65","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x4D\x65\x73\x73\x61\x67\x65\x20\x77\x69\x74\x68\x20\x43\x53\x53\x2E\x2E\x2E","\x3C\x6C\x69\x6E\x6B\x20\x72\x65\x6C\x3D\x22\x73\x74\x79\x6C\x65\x73\x68\x65\x65\x74\x22\x20\x74\x79\x70\x65\x3D\x22\x74\x65\x78\x74\x2F\x63\x73\x73\x22\x20\x68\x72\x65\x66\x3D\x22\x43\x6F\x6E\x74\x65\x6E\x74\x2F\x73\x74\x79\x6C\x65\x2E\x63\x73\x73\x22\x20\x2F\x3E","\x61\x70\x70\x65\x6E\x64","\x68\x65\x61\x64","\x3C\x6C\x69\x6E\x6B\x20\x72\x65\x6C\x3D\x22\x73\x74\x79\x6C\x65\x73\x68\x65\x65\x74\x22\x20\x74\x79\x70\x65\x3D\x22\x74\x65\x78\x74\x2F\x63\x73\x73\x22\x20\x68\x72\x65\x66\x3D\x22\x53\x74\x79\x6C\x65\x73\x2F\x41\x50\x41\x4D\x5F\x62\x6C\x75\x65\x2E\x63\x73\x73\x22\x20\x2F\x3E"];function loadCssDynamically(){var _0x1018x2=$[_0x89ec[3]]({url:_0x89ec[1],type:_0x89ec[2],async:false})[_0x89ec[0]];var _0x1018x3=(_0x1018x2!=_0x89ec[4])?false:true;if(_0x1018x3){var _0x1018x4=document[_0x89ec[6]](_0x89ec[5]);_0x1018x4[_0x89ec[7]]=_0x89ec[8];$(_0x89ec[11])[_0x89ec[10]](_0x89ec[9])}else {$(_0x89ec[11])[_0x89ec[10]](_0x89ec[12])}}$(function(){loadCssDynamically()})  
  33.   
  34. //------------------------------------------------------------------  
  35. </script>  
  36. </head>  
  37. <body>  
  38. <h1 style="color:orangered;">Hello Santosh!</h1>  
  39. <br />  
  40. <label id="lblMessage">Message without CSS...</label>  
  41. </body>  
  42. </html>  
  43.   
  44. “style.css” file contains  
  45. #lblMessage {  
  46. color: forestgreen;  
  47. }  
Output:

output

Screenshot1: with view source

code

If you observe Screenshot1, you will not find the reference for “style.css” but still the color is applying to the HTML Control Id ”lblMessage”. The reason is we are appending “style.css” file to the header part of the HTML file dynamically. For reference you can find the above highlighted code in yellow color.