0

En HTML tenemos el atributo global hidden que sirve para ocultar elementos en una página cualquiera.

La documentación de MDN dice lo siguiente:

El explorador no dibujará dichos elementos .

La afirmación es ambigua y confusa.

¿Significa que un elemento que sea hidden no podrá verse de ninguna manera del lado del cliente?

¿O podrá verse por ejemplo examinando el código fuente de la página?

La documentación no dice ni advierte nada al respecto, y uno podría estar guardando datos sensibles con un atributo hidden pensando que nadie podrá verlo.

Me gustaría saber si realmente el atributo hidden sirve para ocultar datos sensibles que no queremos que sean vistos bajo ningún concepto, por ejemplo una API-KEY o cosas de ese tipo.

3
  • Se seguirá viendo en la herramienta de desarrolladores
    – Yikarus
    Commented el 9 nov. 2017 a las 20:00
  • @Yikarus agradecería una respuesta con prueba y documentación si es posible. No comprendo cómo MDN no dice nada al respecto. Lo que se afirma de ese atributo es confuso. ¿Por qué no dicen que se seguirá viendo?
    – A. Cedano
    Commented el 9 nov. 2017 a las 20:01
  • En realidad ni siquiera los input de tipo password son realmente seguros. Es cosa de editar su tipo a text en la consola para ver su contenido
    – ffflabs
    Commented el 10 nov. 2017 a las 15:59

4 respuestas 4

2

Para que el navegador puede mostrar cualquier documento HTML, tiene que tener acceso al mismo. Por tanto, todo lo que hayas incluido en el documento es accesible para el navegador y, por tanto para el usuario.

Puedes comprobarlo simplemente pulsando Crtl+U en cualquier navegador, lo que te mostrará el código recibido. Por supuesto, mediante Javascript se pueden añadir o quitar elementos que no están presentes en el código HTML recibido, pero el estado actual de la página también puede ser accedido (y modificado) desde las herramientas para desarrolladores que todos los navegadores modernos incluyen y que se pueden activar pulsando F12 o Crtl+Shift+I.

Cualquier medida de seguridad que se use para evitar el acceso de los usuarios a información reservada ha de tomarse siempre del lado del servidor. Cualquier medida realizada en el lado del cliente es siempre evitable y púramente cosmética.

¿Entonces, para qué sirve el <input> de tipo hidden? Pues para guardar información útil de una manera cómoda. Hay que recordar que el protocolo HTTP es stateless, es decir, no tiene memoria. Por tanto, o mantienes desde el lado del servidor una sesión con la información del usuario, u obligas al usuario a mandarte en cada petición todos los datos necesarios.

La sesión es tentadoramente fácil de usar, pero tiene una pega: si guardamos X cantidad de información sobre cada usuario, si tienes N usuarios con sesiones abiertas, necesitas NX espacio de memoria para guardar información. La alternativa sencilla es que cada usuario mantenga esa información desde el cliente. Y ahí entran los input hidden: si en un formulario guardas el ID del usuario en campo hidden, al enviar dicho formulario (al hacer una acción "submit"), dicho campo se enviará junto con cualquier otro campo visible.

2

Sí se puede ver, y lo puedes comprobar viendo el código de stackoverflow

introducir la descripción de la imagen aquí

hidden se utiliza generalmente para almacenar valores de datos NO SENSIBLES, la documentación dice que no serán dibujados en otras palabras es como si un elemento tuviera display:none, mas el elemento y su valor siempre se verá en el código fuente

2

Siempre se puede ver ¿por qué? por que lo que hace el hidden es simplemente ocultarlo mas no lo elimina del DOM, algo así como un display:none en css, incluso al tener un input de tipo hidden se puede acceder a su valor por medio de JavaScript para enviar peticiones etc.

Es por todo esto que un dato sensible NUNCA podrá ocultarse en un input de ese tipo, incluso existe código JavaScript para bloquear el clic derecho en el sitio y que un usuario "no pueda acceder al inspector"...se puede bloquear el click, si !! pero al inspector se puede acceder por medio de atajos de teclado inclusive por medio del menú de herramientas de Google Chrome.

2

Veamos: Suponiendo que quiera guardar un dato sensible como un ID:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hidden</title>
	<span hidden="hidden">Id</span></head>
</head>
<body>
	
</body>
</html>

Ciertamente no lo muestra,pero,si accedemos desde un navegador los datos quedan expuestos al inspeccionar código:

introducir la descripción de la imagen aquí

Consideraría que tiene que ver mas con la estética y presentación de una pagina, pero para mi gusto utilizaría mejor la propiedad display de CSS.

En cuanto a seguridad de datos siempre sera mejor que estén del lado del servidor, oculto a la vista del usuario.

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.