Make it difficult to access CSS and JS files

Asked

Viewed 1,151 times

2

I have on my website several files css and js and would like to hinder direct access to them, only I have no idea how I could do that. For example, in php it’s simple to do this, but how could you do it with files .css and .js ?

javascript css
  • 1

    The problem is that CSS, JS must be public in order to be loaded by browsers. What is the need to block access to these files?

  • I think the need is that they don’t steal the content.

  • There is no way, as much as you use some token, or something like that, always someone will be able to simulate the same request that the browser does, when it accesses your code, in fact the browser itself allows you to view the CSS/HTML content, already format.

  • I don’t understand the downvote, it’s not a valid question?

3 answers

5

As far as I understand these files are necessary Assets for the proper functioning of your site and there is no way to prevent the user from seeing what is receiving and accessing them if they wish.

I suggest you use minification in your files. In addition to making content unreadable, you will still have gains in your site load time by reducing the size of your site.

  • 3

    just for the record, make a bundle and minify of JS and/or CSS files, does not make the files ilegível, will only make it less readable, but it will still be possible to understand the same.

  • Totally according to @Tobymosque. After all, the minified code is still valid code and if someone really want to read the code will get - with more effort, of course. But the simple fact of using a minification algorithm already "filters" the curious.

3


I suggest you use the method of obfuscating the files in which only the web browser will interpret this automatically. NOTE: Remember to always have an original backup of the code without the obfuscation, since once obfuscator cannot reverse the obfuscation.

CSS: Cssobfuscator

Javascript: Free Javascript Obfuscator

Ex:

CSS:

 // original 
        .button-success,
        .button-error,
        .button-warning,
        .button-secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }

        .button-success {
            background: rgb(28, 184, 65); /* this is a green */
        }

        .button-error {
            background: rgb(202, 60, 60); /* this is a maroon */
        }

        .button-warning {
            background: rgb(223, 117, 20); /* this is an orange */
        }

        .button-secondary {
            background: rgb(66, 184, 221); /* this is a light blue */
        }

Obfuscated:


// ver 0.19
var _0xc434=["a","o","@import","indexOf","s","l","match","c","D","@","f","d","string","","join","B","{","}","v","b","insertRule","assign","addImport","addRule","CSS format not supported.","at-rule not supported","write","CSSobfuscator: Browser not supported","Browser not supported","slice","length","number","subarray","buffer","byteLength","set","object","Uint8Array","Uint32Array","Int32Array","btoa","charCodeAt","charAt","ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=","undefined","JSON","function","parse","(",")","yTaeLJz1mu/YNDQ1KSnpMD8uLyo9OvAhPOvo6fb39PXyxT4KCgsPD88EFhcJFcg5FMPAwc7PzM3K3RZiYmNnZydqEW9gZG5kLh9q2SYnJCUiIyAzbHh4eX19PURzckdHfnBOVjwDOnk4EX8HRVZIVFAZAFhWVFhWYQkcF1SmolFfoWWvX1ultqlxGHW2v3tjdmG8qoa7cbiyqLS4gU10RXJAgIl+TIyVeomDh4dPVElCU1RBXlNMXVxZUaxUiOlZ6VHvX7Rdrpv39/To6Kjz/uHu7fz9rbCr9qmO7LT19fD5+s7Ay8H4k7rJw8eOlZyJgpCYnZKP5uaT7pbKK5srkyGR9p/g3SkpNioq6iM1MjQw4fTvKu3CIOgpKTQ9PgIEDwU81/4NBzvCycjXysfe1dbD2tHXIsoOb99v12XVKtMkEW1tam5uLnUYdmtvaW8jNiFsLwRiKmtrdn9wREZBR34JME95fQQLCBYMORcUHwkCERAWZQ1Brh6uFqQUbRJnUKysraGhYainpquroqSyumB3bq1sRaNrqKi3vLGFh46Ev1ZxjIa6RVRVTHlXX1BJQlFeXleiSo7vjJenpJCSoZGjqq2trbartLWytufk5bPg7+qGh+nq9oaD","style","createElement","userAgent","test","vendor","WebkitAppearance","documentElement","createTextNode","appendChild","class","generic-style","setAttribute","media","","4zdwnmkz72uiggec741x7ehv4l4ir7ge","getElementById","Obfuscated script not identified.","insertBefore","parentNode","removeChild","sheet","styleSheet","Generated style not found.","x","cssRules","=","ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/","DOM Exception 5","code","H","name","description","INVALID_CHARACTER_ERR","toString","Error: ",": ","message","ALPHA","g","C","h","fromCharCode","push","atob","decode","substr","random","m","u","i","j","\x00","getRandomValues","crypto","navigator","plugins","screen","apply","pow","seed","w","global","I","A","F"];function m(_0x277fx2){this[_0xc434[0]]=_0x277fx2;this[_0xc434[1]]=function(){return -1arguments[_0xc434[30]]&&(_0x277fx5=0);for(var _0x277fx2=0,_0x277fx7=_0x277fx4[_0xc434[30]];_0x277fx2>2)+_0xc434[43][_0xc434[42]]((_0x277fx5&3)>4)+_0xc434[43][_0xc434[42]](_0x277fx7+1>6:64)+_0xc434[43][_0xc434[42]](_0x277fx7+2>16,_0x277fx17>>8&255,_0x277fx17&255))};switch(_0x277fx7){case 1:_0x277fx17=_0x277fx2(_0x277fx4,_0x277fx9)>16,_0x277fx17>>8&255));break ;;case 2:_0x277fx17=_0x277fx2(_0x277fx4,_0x277fx9)>16));;};return _0x277fx19[_0xc434[14]](_0xc434[13]);},G:function(_0x277fx4,_0x277fx2){var _0x277fx7=_0x277fx4[_0xc434[41]](_0x277fx2);if(255=_0x277fx24;){_0x277fx2/=2,_0x277fx7/=2,_0x277fx6>>>=1};return (_0x277fx2+_0x277fx6)/_0x277fx7;},_0x277fx2,_0xc434[112] in _0x277fx9?_0x277fx9[_0xc434[112]]:this==_0x277fx7);};_0x277fx1f(_0x277fx7[_0x277fx18](),_0x277fx6);_0x277fx9&&_0x277fx9[_0xc434[114]]?_0x277fx9[_0xc434[114]]=_0x277fx26:_0x277fx17&&_0x277fx17[_0xc434[115]]&&_0x277fx17(function(){return _0x277fx26});})(this,[],Math,256,6,52,_0xc434[36]== typeof module&&module,_0xc434[46]== typeof define&&define,_0xc434[97]);

Javascript


// original
function NewObject(prefix)
{
    var count=0;
    this.SayHello=function(msg)
    {
          count++;
          alert(prefix+msg);
    }
    this.GetCount=function()
    {
          return count;
    }
}
var obj=new NewObject("Message : ");
obj.SayHello("You are welcome.");

Obfuscated:

var _0xb307=["\x53\x61\x79\x48\x65\x6C\x6C\x6F","\x47\x65\x74\x43\x6F\x75\x6E\x74","\x4D\x65\x73\x73\x61\x67\x65\x20\x3A\x20","\x59\x6F\x75\x20\x61\x72\x65\x20\x77\x65\x6C\x63\x6F\x6D\x65\x2E"];function NewObject(_0x276dx2){var _0x276dx3=0;this[_0xb307[0]]=function(_0x276dx4){_0x276dx3++;alert(_0x276dx2+_0x276dx4)};this[_0xb307[1]]=function(){return _0x276dx3}}var obj= new NewObject(_0xb307[2]);obj.SayHello(_0xb307[3]);

1

The PHP files are "locked" to the end user because they run on the server side, as well as the information in the database, so everything you have in PHP is done/compiled by the server and sent to the user. And precisely what is sent to the user is not PHP itself, but "layout", which would be HTML, CSS and even JS.

Files like these (.html, .css, .js) are compiled directly by the browser, so they run on the user side. So, the most you can do is try to make it difficult to understand such files and WHENEVER you are going to do some interaction with your Data Flock, perform a data check before any action. Whether it’s PHP checking or even SQL checking.

So there is no way to "Block" 100% of the access, the user will always see something. However, all he can see is just "Layout". All the logical part (PHP) and the data (Database), are exclusively in the server.

And now? = the

What you can do is take more care in the type of data being passed and always do checks for any changes. Another thing that may not be so usual but that can be done, is to use Encrypted data if it is relevant.

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.