¿Cómo oculto el código javascript en una página web?

95

¿Es posible ocultar el código Javascript del html de una página web, cuando el código fuente se visualiza a través de la función Ver código fuente de los navegadores?

Sé que es posible ofuscar el código, pero preferiría que esté oculto en la función de ver fuente.

arun nair
fuente
1
está en el lado del cliente y, por lo tanto, residirá en todos los clientes (navegadores)
naveen
8
¿Por qué querría ocultar Javascript? No es como si alguna vez hubieras puesto datos confidenciales que no quieres que el usuario encuentre ... ¿verdad?
Paul
1
¿Cómo sabría un navegador qué JavaScript ejecutar?
Wylie
1
@PaulPRO tiene un buen punto: ¿por qué querrías ocultar JavaScript? Cualquiera que quiera saber lo que estás haciendo SIEMPRE podrá obtener tu guión con unas pocas teclas. No solo dependerán de Ver código fuente. Cualquiera que no sepa cómo obtener un guión probablemente no estará interesado en él de todos modos.
Stephen Chung
1
@UdayHiwarale Es muy fácil ver cuáles son las consultas GET y otras consultas HTTP realizadas por el cliente (simplemente abra la consola de desarrollo y vaya a la pestaña de red). Al desarrollar un sitio web, debe asumir en el servidor que todas las solicitudes son falsificadas por un atacante y, por lo tanto, debe validar todos los datos y escapar cuidadosamente de cada cadena que empalme en SQL u otro código.
Suzanne Dupéron

Respuestas:

133

No estoy seguro de que alguien más haya abordado su pregunta directamente, que es el código que se ve desde el comando Ver código fuente del navegador.

Como han dicho otros, no hay forma de proteger javascript destinado a ejecutarse en un navegador de un visor determinado. Si el navegador puede ejecutarlo, cualquier persona determinada puede verlo / ejecutarlo también.

Pero, si coloca su javascript en un archivo javascript externo que se incluye con:

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

etiquetas, entonces el código javascript no será inmediatamente visible con el comando Ver código fuente, solo la etiqueta de secuencia de comandos en sí será visible de esa manera. Eso no significa que alguien no pueda simplemente cargar ese archivo javascript externo para verlo, pero sí preguntó cómo mantenerlo fuera del comando Ver código fuente del navegador y esto lo hará.

Si realmente quisiera hacer más trabajo para ver la fuente, haría todo lo siguiente:

  1. Ponlo en un archivo .js externo.
  2. Ofusque el archivo para que la mayoría de los nombres de variables nativas se reemplacen con versiones cortas, de modo que se eliminen todos los espacios en blanco innecesarios, de modo que no se pueda leer sin más procesamiento, etc.
  3. Incluya dinámicamente el archivo .js agregando etiquetas de secuencia de comandos mediante programación (como lo hace Google Analytics). Esto hará que sea aún más difícil acceder al código fuente desde el comando Ver código fuente, ya que no habrá un enlace fácil para hacer clic allí.
  4. Ponga tanta lógica interesante que desee proteger en el servidor que recupere a través de llamadas ajax en lugar de realizar un procesamiento local.

Con todo lo dicho, creo que debería centrarse en el rendimiento, la fiabilidad y hacer que su aplicación sea excelente. Si es absolutamente necesario proteger algún algoritmo, colóquelo en el servidor, pero aparte de eso, compita por ser el mejor en lo que hace, no por tener secretos. En última instancia, así es como funciona el éxito en la web.

jfriend00
fuente
2
Buena forma de abordar la pregunta directamente. Usar JavaScript para generar el <script>lo mantendría mejor fuera de la Vista Fuente (aún visible bajo el DOM en vivo) - es decir, no se puede simplemente "hacer clic con el botón derecho" en la Vista Fuente. Es posible que dicho <script>elemento se elimine una vez que se ejecuta JavaScript, lo que hace que sea un poco más engorroso (pero no imposible) obtener el código original ... por supuesto, el tráfico de la red se mostrará muy fácilmente en Firebug o similar ;-)
3
@Quentin: su URL de fuente de visualización es tonta, eso no es lo que se pregunta o propone aquí. Cualquier persona puede ver el código. Lo he dicho tanto como cualquier otra persona. La pregunta es solo qué tan fácil es y, según la pregunta específica, qué tan visible es cuando alguien ve el código fuente. Mi sugerencia lo quita un paso de Ver código fuente, eso es todo, pero es un paso adicional válido.
jfriend00
fetch ("SCRIPT PARA OCULTAR URL o DATAURL"). then (function (t) {return t.text () || false;}). then (c => self [atob ("ZXZhbA")] (c))
Zibri
Creo que también podemos agregar oncontextmenu = 'return false;' dentro de la etiqueta html.
falero80s
@ falero80s - Eso intenta detener el menú del botón derecho, pero no detiene todas las otras formas en que uno puede ver el código fuente de la página.
jfriend00
38

No, no es posible.

Si no se lo da al navegador, entonces el navegador no lo tiene.

Si lo hace, entonces (o una referencia fácil de seguir) forma parte de la fuente.

Quentin
fuente
4
No estoy seguro de que esta respuesta realmente responda a la pregunta que se hace (a pesar de que obtuvo 10 votos a favor en 15 minutos). Preguntaron cómo mantener el código fuera del comando Ver código fuente de los navegadores. Eso es posible. Vea mi respuesta a continuación. No preguntaron cómo evitar que un hacker determinado viera el código.
jfriend00
8
No se necesita mucha determinación para hacer clic en el enlace en Ver código fuente de un documento HTML para acceder a Ver código fuente de la secuencia de comandos.
Quentin
En mi opinión, la pregunta no se ha interpretado correctamente. Crear un archivo JS es común, lo que el usuario quiere aquí (creo) es cómo ocultar cualquier valor de variable JS cuando alguien elige la opción "ver fuente de página". +1 de mi lado.
shaILU
Esta respuesta no tiene ningún sentido. es mejor dar una sugerencia aquí. Mejor opción para usar un archivo externo.
Lalit Mohan
15

Mi solución está inspirada en el último comentario. Este es el 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>

El código claro de invisible_debut.js es:

$(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 al final estoy eliminando el script creado. invisible.js es:

$(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 no aparece en la consola, porque ha sido eliminado y nunca en el código fuente porque fue creado por javascript.

En cuanto a invisible_debut.js, lo ofusqué, lo que significa que es muy complicado encontrar la URL de invisible.js. No es perfecto, pero es bastante difícil para un hacker normal.

Armand Arapian
fuente
3
Lo extraño es que seguí exactamente los pasos y los puedo encontrar invisible.jsen fuentes. Versión de Chrome 34.0.1847.131 m
Boyang
2
@Boyang, simplemente no aparece en la consola, pero si conocemos la ruta, aún podemos encontrarla.
Panadol Chong
1
No solo eso, sino que siempre aparecerá en la pestaña Red de la mayoría de DevTools. Una vez más, cada hacker que se precie tendrá DevTools disponible.
GoldBishop
13

Use Html Encrypter La parte del encabezado que tiene

<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'));
//-->

CIFRADOR HTML Nota: si tiene un script java en su página, intente exportar a un archivo .js y haga que sea como en el ejemplo anterior.

Y además, este cifrador no siempre funciona en algún código que hará que su sitio web se arruine ... Seleccione la mejor parte que desea ocultar como, por ejemplo, en <form> </form>

Esto puede ser revertido por un usuario avanzado, pero no todos los novatos como yo lo saben.

Espero que esto ayude

HINAYUPAKS
fuente
3
El enlace proporcionado no está abierto, da error de código 404.
Akash Limbani
Este mismo enfoque es como Site Hackers inyectan código malicioso en un sitio web. Algunas de las herramientas de Security Web Crawler más avanzadas buscan código como este y lo desinfectan del código fuente de la página.
GoldBishop
8

No estoy seguro de que haya una forma de ocultar esa información. No importa lo que haga para ofuscar u ocultar lo que esté haciendo en JavaScript, todo se reduce al hecho de que su navegador necesita cargarlo para poder usarlo. Los navegadores modernos tienen herramientas de depuración / análisis web listas F12para usar que hacen que la extracción y visualización de scripts sea trivial (solo presione en Chrome, por ejemplo).

Si le preocupa exponer algún tipo de secreto comercial o algoritmo, entonces su único recurso es encapsular esa lógica en una llamada de servicio web y hacer que su página invoque esa funcionalidad a través de AJAX.

Mark Carpenter
fuente
Digamos que le preocupa exponer un secreto. Digamos que lo pones en un archivo PHP y lo llamas a través de Ajax. Entonces cualquiera puede llamar a ese archivo PHP y encontrar el secreto. Probablemente haya una forma de proteger los secretos usando PHP, y he estado luchando por encontrarla. Genere un número aleatorio y solicite que todos los activos lo proporcionen como argumento para el archivo PHP. Creo que esto funciona, pero no si un usuario malintencionado usa herramientas de desarrollo.
David Spector
8

'¡No es posible!'

Oh sí lo es ....

//------------------------------
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
fuente
4
Muy buena respuesta. De hecho, oculta el uso de JavaScript, sin embargo, solo cuando usa el inspector de elementos / herramientas de desarrollo, aún puede ver si mira a través de Ver código fuente. (Al menos en Chrome)
Patrick Bard
¿Es la variable "cabeza" redundante aquí o cumple alguna función importante?
Master James
3
lo oculta solo parcialmente ... las herramientas de desarrollo pueden mostrar cualquier función expuesta (global) y aparecerá como una función anónima, pero las herramientas de desarrollo le
informan
esto solo lo oculta de la fuente ... una función anónima haría lo mismo: fetch ("SCRIPT TO HIDE"). then (function (t) {return t.text () || false;}). then (c = > self [atob ("ZXZhbA")] (c))
Zibri
5

Creo que encontré una solución para ocultar ciertos códigos JavaScript en la fuente de vista del navegador. Pero tienes que usar jQuery para hacer esto.

Por ejemplo:

En su 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>

Carga un archivo en el cuerpo html / php llamado por una función jquery en el archivo js.js.

js.js

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

Aquí está el truco.

En su archivo content.php, coloque otra etiqueta principal y luego llame a otro archivo js desde allí.

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>

en el archivo js2.js cree cualquier función que desee.

ejemplo:

js2.js

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

content2.php

<?php
echo "Test 2";
?>

Siga el enlace y luego cópielo y péguelo en el nombre de archivo de jquery.js

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

Espero que esto ayude.

Jepp
fuente
Esto proporcionará solo una protección mínima. Es trivial ir a la pestaña de red de las herramientas de desarrollo del navegador y ver todos los scripts descargados, incluidos los cargados a través de Ajax.
JJJ
4

Podrías usar document.write.

Sin 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>

O con 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>")
});
Oveja azul
fuente
2

¡No es posible!

La única forma es ofuscar javascript o minimizar su javascript, lo que dificulta que el usuario final realice ingeniería inversa. sin embargo, no es imposible realizar ingeniería inversa.

gabriele brunori
fuente
1

Enfoque que usé hace algunos años -

Necesitamos un archivo jsp, un archivo Java de servlet y un archivo Java de filtro.

Dar acceso al archivo jsp al usuario. URL del tipo de usuario del archivo jsp.

Caso 1 -

  • El archivo Jsp redirigirá al usuario a Servlet.
  • El servlet ejecutará la parte del script central incrustada en el archivo xxxxx.js y
  • Usando Printwriter, mostrará la respuesta al usuario.

  • Mientras tanto, Servlet creará un archivo de claves.

  • Cuando el servlet intente ejecutar el archivo xxxx.js dentro de él, el filtro
    se activará y detectará que el archivo clave existe y, por lo tanto, eliminará el
    archivo clave .

Por tanto, un ciclo ha terminado.

En resumen, el servidor creará el archivo de claves y el filtro lo eliminará de inmediato.

Esto sucederá con cada golpe.

Caso 2 -

  • Si el usuario intenta obtener la fuente de la página y hace clic directamente en el archivo xxxxxxx.js, el filtro detectará que el archivo de clave no existe.
  • Significa que la solicitud no proviene de ningún servlet. Por lo tanto, bloqueará la cadena de solicitudes.

En lugar de la creación de archivos, se puede usar el valor de configuración en la variable de sesión.

Bhushan Mahajan
fuente