Post
Ask Question

Secure Your CSS And JavaScript Files

Introduction

 
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 the 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 the base address to form actual address.
 
Actual address = base address + relative address
 
Ex
  1. Base address = https://cdnjs.cloudflare.com/  
  2. Relative address = ajax/libs/angular.js/2.0.0-beta.17/angular2.min.js  
  3. 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 the JQuery to append() method.
 
Step 7
 
Obfuscate the created JavaScript file which has been created in the solution to call the 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.     var response_Status = (response != "200") ? false : true;  
  8.     if(response_Status) {  
  9.         var lblMessage = document.getElementById("lblMessage");  
  10.         lblMessage.innerHTML = "Message with CSS...";  
  11.         $('head').append('<link rel="stylesheet" type="text/css" href="Content/style.css" />');  
  12.     } else $('head').append('<link rel="stylesheet" type="text/css" href="Styles/ test.css" />');  
  13. }  
  14. $(function() {  
  15.     loadCssDynamically();  
  16. }); 
Obfuscate your code
 
JavaScript Obfuscator renders the JavaScript source code into the obfuscated format with a completely unreadable form which results in 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"];  
  2.   
  3. function loadCssDynamically() {  
  4.     var _0x1018x2 = $[_0x89ec[3]]({  
  5.         url: _0x89ec[1],  
  6.         type: _0x89ec[2],  
  7.         async: false  
  8.     })[_0x89ec[0]];  
  9.     var _0x1018x3 = (_0x1018x2 != _0x89ec[4]) ? false : true;  
  10.     if(_0x1018x3) {  
  11.         var _0x1018x4 = document[_0x89ec[6]](_0x89ec[5]);  
  12.         _0x1018x4[_0x89ec[7]] = _0x89ec[8];  
  13.         $(_0x89ec[11])[_0x89ec[10]](_0x89ec[9])  
  14.     } else {  
  15.         $(_0x89ec[11])[_0x89ec[10]](_0x89ec[12])  
  16.     }  
  17. }  
  18. $(function() {  
  19.     loadCssDynamically()  
  20. }) 
Complete Code
  1. < !DOCTYPE html > < html > < head > < title > < /title>   < meta charset = "utf-8" / > < script src = "Scripts/jquery-1.10.2.min.js" > < /script>   < script type = "text/javascript" >  
  2.     //-----------------------------Actual Code--------------------------------    
  3.     //function loadCssDynamically() {    
  4.     // var response = $.ajax({    
  5.     // url: "Content/style.css",    
  6.     // type: 'HEAD',    
  7.     // async: false    
  8.     // }).status;    
  9.     // var response_Status = (response != "200") ? false : true;    
  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.     //});    
  21.     //----------------------------------------------------------------------    
  22.     // -------------------------Obfuscated Code-----------------------    
  23.     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"];  
  24.   
  25. function loadCssDynamically() {  
  26.     var _0x1018x2 = $[_0x89ec[3]]({  
  27.         url: _0x89ec[1],  
  28.         type: _0x89ec[2],  
  29.         async: false  
  30.     })[_0x89ec[0]];  
  31.     var _0x1018x3 = (_0x1018x2 != _0x89ec[4]) ? false : true;  
  32.     if(_0x1018x3) {  
  33.         var _0x1018x4 = document[_0x89ec[6]](_0x89ec[5]);  
  34.         _0x1018x4[_0x89ec[7]] = _0x89ec[8];  
  35.         $(_0x89ec[11])[_0x89ec[10]](_0x89ec[9])  
  36.     } else {  
  37.         $(_0x89ec[11])[_0x89ec[10]](_0x89ec[12])  
  38.     }  
  39. }  
  40. $(function() {  
  41.         loadCssDynamically()  
  42.     })  
  43.     //------------------------------------------------------------------    
  44.     < /script>   < /head>   < body > < h1 style = "color:orangered;" > Hello Santosh! < /h1>   < br / > < label id = "lblMessage" > Message without CSS... < /label>   < /body>   < /html>  “  
  45. style.css” file contains# lblMessage {  
  46.     color: forestgreen;  
  47. } 
Output
 
output
 
Screenshot1: with view source
 
code
 

Summary

 
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 the “ style.css” file to the header part of the HTML file dynamically. For reference you can find the above-highlighted code in yellow color.


Similar Articles