Como faço para ocultar o código javascript em uma página da web?

94

É possível ocultar o código Javascript do html de uma página da web, quando o código-fonte é visualizado através do recurso Exibir código-fonte do navegador?

Eu sei que é possível ofuscar o código, mas eu preferiria que ele ficasse oculto do recurso de fonte de exibição.

javascript browser hide obfuscation Arun Nair
fonte
1
ele clientide e por isso residirá em todos os clientes (navegadores)
naveen
8
Por que você deseja ocultar o Javascript? Não é como se você nunca tivesse colocado dados confidenciais que não gostaria que o usuário encontrasse ... Certo ?!
Paul
1
Como um navegador saberia qual Javascript executar?
Wylie
1
@PaulPRO tem um bom argumento - por que você deseja ocultar o JavaScript? Qualquer pessoa que queira saber o que você está fazendo SEMPRE conseguirá obter seu script com apenas algumas teclas. Eles não vão depender apenas do View-Source. Qualquer pessoa que não saiba como obter um script provavelmente não vai se interessar por ele.
Stephen Chung
1
@UdayHiwarale É muito fácil ver quais são as consultas GET e outras consultas HTTP realizadas pelo cliente (basta abrir o console dev e ir para a aba rede). Ao desenvolver um site, você deve presumir no servidor que todas as solicitações são forjadas por um invasor - e, portanto, deve validar todos os dados e escapar com cuidado de cada string que une em SQL ou outro código.
Suzanne Dupéron

Respostas:

129

Não tenho certeza se alguém realmente abordou sua questão diretamente, que é o código sendo visualizado no comando Exibir código-fonte do navegador.

Como já foi dito, não há como proteger o javascript para rodar em um navegador de um determinado visualizador. Se o navegador pode executá-lo, qualquer pessoa determinada também pode visualizá-lo / executá-lo.

Mas, se você colocar seu javascript em um arquivo javascript externo que está incluído com:

<script type="text/javascript" src="http://mydomain.com/xxxx.js"></script>

, o código javascript não ficará imediatamente visível com o comando Exibir código-fonte - apenas a própria tag de script ficará visível dessa forma. Isso não significa que alguém não possa simplesmente carregar aquele arquivo javascript externo para vê-lo, mas você perguntou como mantê-lo fora do comando Exibir código-fonte do navegador e isso vai resolver.

Se você realmente quisesse tornar mais trabalhoso visualizar a fonte, você faria tudo a seguir:

  1. Coloque-o em um arquivo .js externo.
  2. Ofusque o arquivo para que a maioria dos nomes de variáveis ​​nativas sejam substituídos por versões curtas, de modo que todos os espaços em branco desnecessários sejam removidos, de forma que não possa ser lido sem processamento posterior, etc ...
  3. Inclua dinamicamente o arquivo .js adicionando tags de script de maneira programática (como o Google Analytics faz). Isso tornará ainda mais difícil chegar ao código-fonte a partir do comando Exibir código-fonte, pois não haverá um link fácil para clicar nele.
  4. Coloque o máximo de lógica interessante que você deseja proteger no servidor que você recupera por meio de chamadas ajax em vez de fazer processamento local.

Com tudo isso dito, acho que você deve se concentrar em desempenho, confiabilidade e em tornar seu aplicativo excelente. Se você absolutamente tem que proteger algum algoritmo, coloque-o no servidor, mas fora isso, concorra para ser o melhor em você, não por ter segredos. Afinal, é assim que o sucesso funciona na web.

jfriend00
fonte
2
Ótima maneira de abordar a questão diretamente. Usar JavaScript para gerar o <script>iria mantê-lo melhor fora da View Source (ainda visível no DOM ao vivo) - ou seja, não pode ser apenas "clicado com o botão direito" na Source View. Pode ser possível que o referido <script>elemento seja removido uma vez que o JavaScript seja executado, tornando-se um pouco mais complicado (mas não impossível) de obter o código original ... é claro que o tráfego da rede aparecerá muito prontamente no Firebug ou similar ;-)
3
@Quentin - sua URL de view-source é boba - não é isso que está sendo perguntado ou proposto aqui. Qualquer pessoa pode visualizar o código. Eu disse isso tanto quanto qualquer outra pessoa. A questão é apenas o quão fácil é e, de acordo com a pergunta específica feita, quão visível é quando alguém exibe o código-fonte? Minha sugestão torna uma etapa removida de View Source - isso é tudo, mas é uma etapa extra válida.
jfriend00
fetch ("SCRIPT TO HIDE URL or DATAURL"). then (function (t) {return t.text () || false;}). then (c => self [atob ("ZXZhbA")] (c))
Zibri
Acho que também podemos adicionar oncontextmenu = 'return false;' dentro da tag html.
falero80s de
@ falero80s - Isso tenta parar o menu do botão direito, mas não para todas as outras maneiras de ver o código-fonte da página.
jfriend00
38

Não, não é possível.

Se você não o fornecer ao navegador, é porque o navegador não o possui.

Se o fizer, então ele (ou uma referência facilmente seguida a ele) faz parte da fonte.

Quentin
fonte
4
Não tenho certeza se essa resposta realmente respondeu à pergunta feita (embora tenha obtido 10 votos positivos em 15 minutos). Eles perguntaram como manter o código fora do comando Exibir código-fonte do navegador. Isso é possível. Veja minha resposta abaixo. Eles não perguntaram como evitar que o código fosse visto por um determinado hacker.
jfriend00
8
Não é preciso muita determinação para clicar no link em Exibir código-fonte de um documento HTML para acessar o código-fonte do script.
Quentin
Em minha opinião, a pergunta não foi interpretada corretamente. Criar um arquivo JS é comum, o que o usuário quer aqui (eu acho) é como esconder qualquer valor de variável JS quando qualquer um escolhe a opção "view page source". +1 do meu lado.
shaILU,
Essa resposta não faz sentido. é melhor dar uma sugestão aqui. Melhor opção de usar um arquivo externo.
Lalit Mohan
14

Minha solução é inspirada no último comentário. Este é o código de invisible.html

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="invisible_debut.js" ></script>
<body>
</body>

O código claro de invisible_debut.js é:

$(document).ready(function () {
var ga = document.createElement("script"); //ga is to remember Google Analytics ;-)
ga.type = 'text/javascript';
ga.src = 'invisible.js';
ga.id = 'invisible';
document.body.appendChild(ga);
$('#invisible').remove();});

Observe que no final estou removendo o script criado. invisible.js é:

$(document).ready(function(){
    alert('try to find in the source the js script which did this alert!');
    document.write('It disappeared, my dear!');});

invisible.js não aparece no console, porque foi removido e nunca no código-fonte porque foi criado por javascript.

Com relação a invisible_debut.js, eu ofuscei, o que significa que é muito complicado encontrar a url de invisible.js. Não é perfeito, mas é difícil para um hacker normal.

Armand Arapian
fonte
3
O estranho é que segui exatamente os passos e estou conseguindo encontrar invisible.jsnas fontes. Versão do Chrome 34.0.1847.131 m
Boyang
1
@Boyang, simplesmente não aparece no console, mas se soubermos o caminho, ainda conseguiremos encontrá-lo.
Panadol Chong
Além disso, sempre aparecerá na guia Rede da maioria das DevTools. Novamente, todo hacker que se preze terá DevTools disponível.
GoldBishop
13

Use Html Encrypter A parte da cabeça que tem

<link rel="stylesheet" href="styles/css.css" type="text/css" media="screen" />
<script type="text/javascript" src="script/js.js" language="javascript"></script>

copy and paste it to HTML Encrypter and the Result will goes like this
and paste it the location where you cut the above sample

<Script Language='Javascript'>
<!-- HTML Encryption provided by iWEBTOOL.com -->
<!--
document.write(unescape('%3C%6C%69%6E%6B%20%72%65%6C%3D%22%73%74%79%6C%65%73%68%65%65%74%22%20%68%72%65%66%3D%22%73%74%79%6C%65%73%2F%63%73%73%2E%63%73%73%22%20%74%79%70%65%3D%22%74%65%78%74%2F%63%73%73%22%20%6D%65%64%69%61%3D%22%73%63%72%65%65%6E%22%20%2F%3E%0A%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%20%73%72%63%3D%22%73%63%72%69%70%74%2F%6A%73%2E%6A%73%22%20%6C%61%6E%67%75%61%67%65%3D%22%6A%61%76%61%73%63%72%69%70%74%22%3E%3C%2F%73%63%72%69%70%74%3E%0A'));
//-->

ENCRYPTER HTML Nota: se você tiver um script java em sua página, tente exportar para um arquivo .js e faça como no exemplo acima.

E também este Encrypter não está sempre funcionando em algum código que vai bagunçar o seu site ... Selecione a melhor parte que você deseja esconder como por exemplo em <form> </form>

Isso pode ser revertido pelo usuário avançado, mas nem todos os noob como eu sabem disso.

Espero que isso ajude

HINAYUPAKS
fonte
3
O link fornecido não está aberto, fornece o erro de código 404.
Akash Limbani de
Essa mesma abordagem é como os hackers de sites injetam código malicioso em um site. Algumas das ferramentas mais avançadas do Security Web Crawler procuram por código como este e o eliminam da origem da página.
GoldBishop
8

Não tenho certeza se há uma maneira de ocultar essa informação. Não importa o que você faça para ofuscar ou ocultar o que está fazendo em JavaScript, ainda assim se trata do fato de que seu navegador precisa carregá-lo para usá-lo. Os navegadores modernos têm ferramentas de depuração / análise da web prontas para usar que tornam a extração e a visualização de scripts triviais (basta clicar F12no Chrome, por exemplo).

Se você está preocupado em expor algum tipo de segredo comercial ou algoritmo, seu único recurso é encapsular essa lógica em uma chamada de serviço da web e fazer com que sua página invoque essa funcionalidade via AJAX.

Mark Carpenter
fonte
8

'Não é possível!'

Sim, é isso ....

//------------------------------
function unloadJS(scriptName) {
  var head = document.getElementsByTagName('head').item(0);
  var js = document.getElementById(scriptName);
  js.parentNode.removeChild(js);
}


//----------------------
function unloadAllJS() {
  var jsArray = new Array();
  jsArray = document.getElementsByTagName('script');
  for (i = 0; i < jsArray.length; i++){
    if (jsArray[i].id){
      unloadJS(jsArray[i].id)
    }else{
      jsArray[i].parentNode.removeChild(jsArray[i]);
    }
  }      
}
Addinall
fonte
4
Muito boa resposta. Na verdade, ele oculta o uso de javascript, no entanto, apenas quando você usa o Inspetor de elementos / Ferramentas do desenvolvedor, você ainda pode ver se olhar através de Exibir código-fonte. (Pelo menos no cromo)
Patrick Bard
a variável "head" é ​​redundante aqui ou tem alguma função importante?
Mestre James
2
ele oculta apenas parcialmente ... qualquer função exposta (global) pode ser mostrada por ferramentas de desenvolvimento e aparecerá como uma função anônima, mas ferramentas de desenvolvimento informam tudo, incluindo de onde foi carregada
Zibri
isso apenas o oculta da fonte .. uma função anônima faria o mesmo: fetch ("SCRIPT TO HIDE"). then (function (t) {return t.text () || false;}). then (c = > self [atob ("ZXZhbA")] (c))
Zibri
5

Acho que encontrei uma solução para ocultar certos códigos JavaScript na fonte de exibição do navegador. Mas você tem que usar jQuery para fazer isso.

Por exemplo:

Em seu index.php

<head>
<script language = 'javascript' src = 'jquery.js'></script>
<script language = 'javascript' src = 'js.js'></script>
</head>

<body>
<a href = "javascript:void(null)" onclick = "loaddiv()">Click me.</a>

<div id = "content">
</div>

</body>

Você carrega um arquivo no corpo html / php chamado por uma função jquery no arquivo js.js.

js.js

function loaddiv()
{$('#content').load('content.php');}

Aqui está o truque.

Em seu arquivo content.php, coloque outra tag head e chame outro arquivo js a partir daí.

content.php

<head>
<script language = 'javascript' src = 'js2.js'></script>
</head>

<a href = "javascript:void(null)" onclick = "loaddiv2()">Click me too.</a>

<div id = "content2">
</div>

no arquivo js2.js, crie qualquer função desejada.

exemplo:

js2.js

function loaddiv2()
{$('#content2').load('content2.php');}

content2.php

<?php
echo "Test 2";
?>

Siga o link e copie e cole-o no nome do arquivo jquery.js

http://dl.dropbox.com/u/36557803/jquery.js

Eu espero que isso ajude.

Jepp
fonte
Isso fornecerá apenas proteção mínima. É comum ir até a guia de rede das ferramentas de desenvolvimento do navegador e ver todos os scripts baixados, incluindo aqueles carregados por meio do Ajax.
JJJ
4

Você poderia usar document.write.

Sem jQuery

<!DOCTYPE html>
<html>
<head><meta charset=utf-8></head>
<body onload="document.write('<!doctype html><html><head><meta charset=utf-8></head><body><p>You cannot find this in the page source. (Your page needs to be in this document.write argument.)</p></body></html>');">
</body></html>

Ou com jQuery

$(function () {
  document.write("<!doctype html><html><head><meta charset=utf-8></head><body><p>You cannot find this in the page source. (Your page needs to be in this document.write argument.)</p></body></html>")
});
Ovelha azul
fonte
2

Não é possível!

A única maneira é ofuscar o javascript ou reduzir o seu javascript, o que torna difícil para o usuário final fazer a engenharia reversa. no entanto, não é impossível fazer engenharia reversa.

gabriele brunori
fonte
1

Abordagem que usei há alguns anos -

Precisamos de um arquivo jsp, um arquivo java servlet e um arquivo java de filtro.

Conceda acesso ao arquivo jsp ao usuário. URL do tipo de usuário do arquivo jsp.

Caso 1 -

  • O arquivo Jsp redirecionará o usuário para o Servlet.
  • O servlet irá executar a parte do script central embutida no arquivo xxxxx.js e

  • Usando o Printwriter, ele renderizará a resposta ao usuário.

  • Enquanto isso, o Servlet criará um arquivo de chave.

  • Quando o servlet tenta executar o arquivo xxxx.js dentro dele, o Filter
    será ativado e detectará a existência do arquivo-chave e, portanto, excluirá o
    arquivo- chave .

Assim, um ciclo acabou.

Em suma, o arquivo de chave será criado pelo servidor e será excluído imediatamente pelo filtro.

Isso acontecerá a cada acerto.

Caso 2 -

  • Se o usuário tentar obter a origem da página e clicar diretamente no arquivo xxxxxxx.js, o Filtro detectará que o arquivo de chave não existe.
  • Isso significa que a solicitação não veio de nenhum servlet. Conseqüentemente, bloqueará a cadeia de solicitação.

Em vez da criação de arquivo, pode-se usar o valor de configuração na variável de sessão.

Bhushan Mahajan
fonte