5

Tenho no meu site, vários arquivos css e js e gostaria de dificultar o acesso direto a eles, só que não faço ideia de como poderia fazer isso. Por exemplo, no php é simples fazer isso, mas como poderia fazer isso com arquivos .css e .js ?

4
  • 1
    O problema é que CSS, JS devem ser publicos para que possam ser carregados pelos browsers. Qual a necessidade de bloquear acesso a estes arquivos? 15/04/2016 às 14:50
  • Acho que a necessidade é que não roubem o conteúdo.
    – mau humor
    18/04/2016 às 6:07
  • Não tem como, por mais que você use algum token, ou algo do tipo, sempre alguém vai poder simular a mesma requisição que o browser faz, quando acessa o teu código, na verdade o próprio browser te permite visualizar o conteúdo CSS/HTML, já formato.
    – mau humor
    18/04/2016 às 6:09
  • Não entendi o downvote, não é uma pergunta válida? 18/04/2016 às 12:25

3 Respostas 3

6

Até onde entendo esses arquivos são assets necessários para o correto funcionamento do seu site e não há como impedir que o usuário veja o que está recebendo e acessá-los se desejar.

Sugiro o uso de minificação nos seus arquivos. Além de tornar o conteúdo ilegível, você ainda terá ganhos no tempo de carga do seu site pela redução do tamanho dos mesmos.

2
  • 3
    só para constar, fazer um bundle e minify de arquivos JS e/ou CSS, não torna os arquivos ilegível, apenas vai tornar o mesmo menos legivel, porém ainda será possivel compreender o mesmo. 15/04/2016 às 14:49
  • Totalmente de acordo @TobyMosque. Afinal, o código minificado ainda é código válido e se alguém realmente quiser ler o código conseguirá - com mais esforço, é claro. Mas o simples fato de usar um algoritmo de minificação já "filtra" os curiosos. 15/04/2016 às 15:06
4

Sugiro que use o método de obfuscar os arquivos no qual apenas o navegador de web vai interpretar isso automaticamente. OBS: Lembre-se de ter sempre um backup original do código sem a obfuscação, já que uma vez obfuscador não poderá reverter a obfuscação.

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 */
        }

Obfuscado:


// 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.");
                

Obfuscado:

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]);
2

Os arquivos em PHP são "bloqueados" para o usuário final porque eles rodam do lado servidor, assim como as informações no Banco de Dados, portanto tudo que você tem em PHP é feito/compilado pelo servidor e enviado ao usuário. E justamente o que é enviado ao usuário não é o PHP em si, mas o "layout", que seria HTML, CSS e ate mesmo JS.

Arquivos como esses (.html, .css, .js) são compilados diretamente pelo navegador, portanto eles rodam do lado do usuário. Sendo assim, o máximo que você pode fazer é tentar dificultar o entendimento de tais arquivos e SEMPRE que for fazer alguma interação com seu Bando de Dados, realizar uma verificação dos dados antes de qualquer ação. Seja a verificação feita pelo próprio PHP ou até mesmo SQL.

Portanto não tem como "Bloquear" 100% do acesso, o usuário sempre vai ver alguma coisa. Porem tudo o que ele consegue ver é apenas "Layout". Toda a parte lógica (PHP) e os dados (Banco de Dados), ficam exclusivamente no servidor.

E agora? =o

O que você pode fazer é tomar mais cuidado no tipo de dado que está sendo passado e sempre fazer verificações para quaisquer alteração. Outra coisa que talvez não seja tão usual mas que pode ser feita, é utilizar dados Criptografados caso seja relevante.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .