-4

Le estoy diciendo que todos los div que tengan display: none los remueva del body, cosa que no se pueden ver si le doy en inspeccionar elemento, pero si doy en ver código fuente de la página me aparecen.

¿Cómo hago para ocultarlos del todo?

var body = document.getElementById("body-display");
var div = document.querySelectorAll("#body-display > div");

function remover() {

  for (var i = 0; i < div.length; i++) {

    if (div[i].style.display == "none") {
      body.removeChild(div[i]);
    }

  }

}
remover();
div {
  color: #fff;
  margin: 5px 0;
  padding: 10px;
  background-color: green;
}
<html>

<head>
  <style>
    div {
      color: #fff;
      margin: 5px 0;
      padding: 10px;
      background-color: green;
    }
  </style>
</head>

<body id="body-display">


  <div id="caja1">¡Caja 1 activa!</div>
  <div id="caja2" style="display: none;">¡Caja 2 activa!</div>
  <div id="caja3" style="display: none;">¡Caja 3 activa!</div>

</body>

</html>

13
  • Para ocultarlos del todo no los incluyas en el código fuente de tu página. Si requires una explicación mas amplia explica brevemente por qué los has incluido y por qué deseas que no se muestren cuando se muestre en el código fuente por quien navegue a tu página.
    – Rubén
    Commented el 14 feb. 2020 a las 3:44
  • 3
    No los incluyas en el fuente de la página y créalos después mediante javascript, cuando los vayas a mostrar, rellenándolos con los datos que pidas al servidor via ajax, por ejemplo.
    – abulafia
    Commented el 18 feb. 2020 a las 20:16
  • 9
    Hay una sola manera de que un código que debe estar en el cliente (navegador) no se vea: quitándolo. HTML no debe considerarse ni siquiera código, es contenido textual y siempre se podrá inspeccionar en el código fuente (esté visible o no mediante reglas CSS u otras). Es como un documento, no hay forma de ocultar del todo parte de un texto que le es propio. Puedes ponerlo del mismo color del fondo, darle un tamaño 0.000001 o lo que quieras, pero el texto estará siempre ahí.
    – A. Cedano
    Commented el 18 feb. 2020 a las 21:37
  • 2
    No es posible alterar el código fuente entregado por el servidor a través de javascript, por lo que la única forma de que ese código no aparezca al pulsar en Ver código fuente es omitirlo en el código del servidor. ¿Qué necesitas hacer realmente? ¿Para qué necesitas eliminarlo una vez cargado? ¿Lo vas a usar posteriormente? Si nos das más información del propósito de ese código que deseas eliminar podremos ayudarte con alguna solución alternativa. Commented el 20 feb. 2020 a las 8:44
  • 1
    Hola, recuerda que es importante siempre tratar de realizar pregunta en base a Cómo preguntar, de esta forma obtendrás la ayuda deseada de una forma más rápida, asegura agregar detalles e información que permitan a los miembros de la comunidad ayudarte de una mejor forma, saludos.
    – Jorgesys
    Commented el 25 feb. 2020 a las 23:16

5 respuestas 5

3

como bien debe saber al ser codigo que se ejecutar en el cliente (navegador) debe cargarse por completo, lo que ocultar informacion es bastante complicado (no me animo a decir imposible, pero...) Hay soluciones parciales y debiles como la encriptacion de codigo, que los servidores web entienden y procesan.

Una nota interesante a leer es: https://en.wikipedia.org/wiki/Percent-encoding

Pero que sepa que es reversible, usando el unescape()

Otra opcion es complementar su codigo con tecnicas aconsejadas, como Cifrado de JavaScript, poner algun relleno de codigo HTML,etc el siguiente link le sera de mucha ayuda https://www.htmlgoodies.com/beyond/article.php/3875651/Web-Developer-Class-How-to-Hide-your-Source-Code.htm

Si busca encontrara software para encriptar HTML, esto sera bajo su responsabilidad porque son desarrollados por terceros, algunos de pago y otros gratis. Le dejo la definicion para que pueda buscarlos:

https://en.wikipedia.org/wiki/Obfuscation_(software)

Espero que le sea de ayuda.-

1
  • Esto proporciona un nivel de protección muy pobre en el mejor de los casos. Lo comentado son técnicas de ofuscación y no de encriptación/cifrado.
    – Julio
    Commented el 24 feb. 2020 a las 12:51
3

No hay forma de ocultar elementos HTML de la función de inspeccionar código fuente del navegador ya que esto es parte de la funcionamiento básico de las páginas web.

Una alternativa es que en lugar de alojar tu archivo HTML en un servidor web uses un servicio de generación de páginas estáticas u otra tecnología similar que entregue sólo el HTML que desees mostrar.

Por ejemplo, usando Google Apps Script puedes poner el HTML en un archivo html, luego tomar ese HTML eliminar las etiquetas y después de ello enviar el HTML que sí deseas mostrar.

Otra alternativa es recurrir a la ofuscación de código fuente en la que en lugar de esconder el código lo que se hace es reemplazar la forma de representarlo por usando formas difíciles de interpretar a simple vista.

Ambas alternativas me parecen que sólo harán más compleja tu página y el proceso de desarrollarla lo cual difícilmente se puede justificar en páginas web "normales".

3

Lo que preguntas plantea varias puntos que creo se deben tener claros:

  • Código -> Cuando hablamos de "código" nos referimos a lo que ocurre en el servidor y no viaja al cliente (p.e. php). Una vez que se genera "código" css, html, etc. ten en cuenta que esto siempre, siempre, siempre, va a llegar a lado del cliente, va a ser cargado, capturado y puede ser visto por cualquier persona que entienda (o sepa pulsar F12).
  • Los elementos "ocultos" habitualmente son elementos que son necesarios, bien por estar a la espera de eventos o bien porque contienen datos necesarios en el front aunque el usuario como tal no necesite "visualizarlos". Si, una vez que llegan al cliente, los quieres borrar, es posible que estés modificando el funcionamiento de la propia página, y puede generar errores.
  • Tiempo de carga -> Si el problema que estás teniendo es que tu página web carga muy lento, no lo vas a solventar borrando el html/css/js que queda oculto para el usuario, porque, como hemos dicho antes, el código ya ha llegado al lado del usuario, se ha enviado y se ha leido. Lo único que haríamos al borrar parte del html es "dejarlo más limpio en el lado del usuario", pero para mi, no tiene sentido.

No obstante, si sigues necesitando que se borren tanto los elementos ocultos como los elementos con display:none (que no es lo mismo):

$('*').each(function(){
    if($(this).css('visibility') == 'hidden' || $(this).css('display') == 'none'){
        $(this).remove()
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<body>
<h1>Ejemplo elemento visible</h1>
<div style="display:none">ejemplo elemento oculto</div>
</body>

Ahora bien...

Leyendo tus comentarios indicas que aunque quieres "borrarlos" luego quieres recuperarlos. Eso no es posible (salvo que te guardes el código y posición borrado en javascript y luego los vuelvas a insertar, cosa que no tiene ni pies ni cabeza).

Viendo que tu objetivo es reducir tiempo de carga, te recomentaria que primero revisases exactamente qué es lo que te está tardando más en cargar y, si no es algo de lo que puedas prescindir, que intentes derivar la carga de este contenido por eventos o solicitudes AJAX.

Para decirte qué y cómo tendría que ver todo tu código y entender la lógica de lo que necesitas hacer, pero básicamente carga en tu web únicamente lo necesario para el usuario en un primer momento y, ya sea una "pagina 2" de un formulario o cualquier otro contenido que necesites a posteriori, que se cargue todo por método AJAX, así el usuario sólo tendrá que esperar según vaya solicitando/avanzando por el contenido, y tu web, de primeras, cargará más rápido.

Pero, insisto, revisa bien el motivo de la lentitud de tu página, habitualmente son imágenes demasiado pesadas (o demasiadas imágenes en tu web), excesivas peticiones al servidor, etc. Aunque sea pásale un GTMetrix o similar y revisa la cascada de elementos.

Espero haberte ayudado.

2

Hay una sola manera de que un código que debe estar en el cliente (navegador) no se vea: quitándolo.

HTML significa HyperText Markup Language (Lenguaje de marcas de HiperTexto). Es decir, HTML es contenido textual con marcas (que nosotros llamamos con frecuencia etiquetas). Pues eso, es texto, texto y siempre se podrá inspeccionar en el código fuente (esté visible o no mediante reglas CSS u otras).

Es como un documento, no hay forma de ocultar del todo parte de un texto que le es propio. Puedes ponerlo del mismo color del fondo, darle un tamaño 0.000001 o lo que quieras, pero el texto estará siempre ahí. Es una cuestión metafísica: para que algo no esté en el código fuente tendría que no existir en él.

De todos modos, ocultar el código que es servido en el cliente ha sido el sueño de muchos y se ha recurrido a técnicas variopintas para lograrlo.

Lo que sigue es una traducción de esta respuesta1 que ilustra alguna de esas técnicas:

Relleno de código fuente

Realmente, el truco más antiguo del libro. Implica agregar una tonelada de espacio en blanco antes del inicio de tu código para al intentar ver el código fuente la vista aparezca en blanco. Sin embargo, todas las personas notarán las barras de desplazamiento y se desplazarán para encontrar su código. Tan inútil y tonto como es este método, todavía hay algunos que lo usan.

Desactivar el clic derecho del ratón

Estas secuencias de comandos impiden que los usuarios hagan clic con el botón derecho, donde se encuentra la función "Ver código fuente". Contras: Notoriamente es difícil que trabaje en todos los navegadores. El menú contextual incluye muchas herramientas útiles para los usuarios, incluidos los botones de navegación y el botón "Página de marcador". La mayoría de los usuarios no tienen la amabilidad de deshabilitar la funcionalidad de tu navegador y se inclinan a no volver a visitar dichas páginas. La función "Ver fuente" también está disponible a través del menú superior. En la barra del menú principal en la parte superior de tu navegador, puedes seleccionr "Ver" y luego, en el submenú, verás "Ver código fuente" o algo similar. Además, hay atajos de teclado como Ctrl + U que se pueden usar para ver la fuente. Todo lo que este método hace es agregar un retraso de dos segundos a alguien que intenta ver el código fuente y eso irrita a los usuarios que no están tratando de ver tu código fuente.

Cifrado de JavaScript

Esta es, con mucho, la forma más popular de tratar de ocultar el código fuente. Implica tomar tu código, usar una función personalizada para "encriptarlo" de alguna manera, y luego ponerlo en un archivo HTML junto con una función que lo desencriptará para el navegador. Un usuario puede ver el código fuente, sin embargo, no es comprensible. Contras: tu sitio web solo será utilizable para usuarios con JavaScript habilitado. Esto descarta los motores de búsqueda, los usuarios que han elegido deshabilitar JavaScript y los usuarios que usan un navegador textual (como el oculto) que no tiene capacidades de JavaScript. Recuerda, JavaScript es un lujo, no una necesidad en la web. Debes incluir un medio para descifrar la página para que el navegador pueda mostrarla. Alguien que entienda JavaScript puede descifrar fácilmente la página. Muchos navegadores ofrecen formas alternativas de evitar esto. Algunos permiten guardar la página, descifrada para una fácil visualización posterior. Otros, como FireFox, incluyen herramientas como el DOM Inspector, que permite ver y copiar fácilmente el XML de la página, descifrado.

Software de protección HTML

Hay algunas personas menos honestas que querrán venderte software para "proteger" tu código fuente de manera rápida y conveniente. Este tipo de software generalmente emplea los métodos anteriores, de diferentes maneras, para ocultar tu código fuente. Muchas personas piensan que si lo están comprando, debe funcionar. Pero no funciona. Como hemos visto, los métodos anteriores se eluden fácilmente, y todo lo que hace este software es implementar estos métodos terriblemente defectuosos para ti y cobrar tu dinero. No te enamores de ellos, todavía no he visto ninguno que haya funcionado, y nunca lo harán.

Notas

  1. La respuesta enlaza a un artículo de htmlgoodies hoy no disponible que habría sido interesante leer.
1

Bueno, realmente eliminarlo de tu código fuente no es posible. dado que dichos elementos son existentes desde la carga inicial. Si analizas cuando agregas, modificas o eliminas un elemento que ha sido obtenido inicialmente, en el código fuente de tu proyecto, nada de esto se ve reflejado. te dejaré un ejemplo de como podrías dejar dichos elementos que los siga trayendo inicialmente si así los necesitas, para posteriormente borrarlos según desees. también puedes ajustarlo para que cree el elemento desde javascript solo cuando lo necesites.

function elementosIniciales() {
  var body = document.getElementsByTagName('body')[0];
  for (var idx = 0; idx < 2; idx++) {
    var div = document.createElement('div');
    div.style.display = 'none';
    div.innerHTML = 'caja oculta' + (idx + 1);
    body.appendChild(div);
  }
  remover();
}

function remover() {
  var body = document.getElementById("body-display");
  var div = document.querySelectorAll("#body-display > div");
  for (var i = 0; i < div.length; i++) {
    if (div[i].style.display == "none") {
      body.removeChild(div[i]);
    }
  }
}
div {
  color: #fff;
  margin: 5px 0;
  padding: 10px;
  background-color: green;
}
<body id="body-display" onload="elementosIniciales()">
  <div id="caja1">¡Caja 1 activa!</div>
</body>

Como puedes ver, he creado una funcion que se ejecuta cuando se carga inicialmente el body, al mismo tiempo hago que se remuevan los div que están con display none para desarrollar el ejemplo. realizandolo de esta forma. revisando en el inspeccionar elementos y en el código fuente, vas a observar que no existen dichos elementos.

2
  • Si creas elementos dinámicamente con javascript, serían visibles desde el inspeccionar elementos del navegador
    – Julio
    Commented el 24 feb. 2020 a las 12:52
  • @julio Es visible siempre y cuando se use, si no se desean usar se remueven o no se crean lo que se pide es que al remover del inspeccionar elementos no quede en el codigo fuente. obviamente se visualiza siempre y cuando el elemento agregado desde js no se borre.
    – jGomez
    Commented el 24 feb. 2020 a las 17:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.