Secure Your CSS And JavaScript Files

Santosh Kumar Adidawarpu
May 05, 2016
9.4k
0
11
Article

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

function loadCssDynamically() {
var response = $.ajax({
url: "Content/style.css", // Here you can configure your service method call to get the base address
type: 'HEAD',
async: false
}).status;
var response_Status = (response != "200") ? false : true;
if (response_Status) {
var lblMessage = document.getElementById("lblMessage");
lblMessage.innerHTML = "Message with CSS...";
$('head').append('<link rel="stylesheet" type="text/css" href="Content/style.css" />');
}
else
$('head').append('<link rel="stylesheet" type="text/css" href="Styles/ test.css" />');
}
$(function () {
loadCssDynamically();
});

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.

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

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//-----------------------------Actual Code--------------------------------
//function loadCssDynamically() {
// var response = $.ajax({
// url: "Content/style.css",
// type: 'HEAD',
// async: false
// }).status;
// var response_Status = (response != "200") ? false : true;
// if (response_Status) {
// var lblMessage = document.getElementById("lblMessage");
// lblMessage.innerHTML = "Message with CSS...";
// $('head').append('<link rel="stylesheet" type="text/css" href="Content/style.css" />');
// }
// else
// $('head').append('<link rel="stylesheet" type="text/css" href="Styles/test.css" />');
//}
//$(function () {
// loadCssDynamically();
//});
//----------------------------------------------------------------------
// -------------------------Obfuscated Code-----------------------
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()})
//------------------------------------------------------------------
</script>
</head>
<body>
<h1 style="color:orangered;">Hello Santosh!</h1>
<br />
<label id="lblMessage">Message without CSS...</label>
</body>
</html>
“style.css” file contains
#lblMessage {
color: forestgreen;
}

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.