Índice
El funcionamiento de la web
Al final de esta sala, sabrás cómo se han creado los sitios web y se te introducirá en algunos problemas básicos de seguridad.
Cuando visitas un sitio web, tu navegador (ya sea Safari o Google Chrome) realiza una petición a un servidor web pidiendo información acerca de la página que estás visitando. Éste responderá con datos que tu navegador utiliza para mostrarte la página; un servidor web es tan solo un ordenador dedicado en algún otro lugar del mundo que maneja tus peticiones.
Hay dos componentes principales que conforman un sitio web:
- Front End (lado del cliente) – La forma en que tu navegador renderiza un sitio web.
- Back End (lado del servidor) – Un servidor que procesa tu petición y devuelve una respuesta.
Existen algunos otros procesos involucrados en el hecho de que tu navegador haga una petición al servidor web, pero por ahora, solo necesitas entender que haces una petición a un servidor web, y este responde con datos que tu navegador utiliza para renderizar la información para ti.
Contesta las preguntas
- ¿Qué término describe mejor el lado en el que tu navegador renderiza un sitio web?
Cómo funcionan los sitios web – HTML
Los sitios web se crean usando principalmente:
- HTML, para construir los sitios web y definir su estructura
- CSS, para mejorar el aspecto de los sitios web añadiendo opciones de estilo
- JavaScript, implementando características complejas a las páginas usando interactividad
HyperText Markup Language (HTML) es el lenguaje en el que están escritos los sitios web. Los elementos (también conocidos como etiquetas) son los bloques de construcción de las páginas HTML y le dicen al navegador cómo mostrar el contenido. El fragmento de código que hay a continuación muestra un documento HTML simple, la estructura del cual es la misma para cada sitio web:
La estructura HTML (como se muestra en la captura) tiene los siguientes componentes:
- El <!DOCTYPE html> define que la página es un documento HTML5. Esto ayuda con la estandarización en los distintos navegadores y le dice al navegador que use HTML5 para interpretar la página.
- <html> es el elemento raíz de la página HTML – todos los demás elementos vienen después de este elemento.
- <head> contiene información acerca de la página (como el título de la página).
- <body> define el cuerpo del documento HTML; solo el contenido dentro del cuerpo se mostrará en el navegador.
- <h1> define un encabezado grande.
- <p> define un párrafo.
- Hay otros elementos (etiquetas) usadas para distintos propósitos. Por ejemplo, hay etiquetas para botones, imágenes, listas y mucho más.
Las etiquetas contienen atributos como el atributo “class” que se puede usar para dar estilo a un elemento (por ejemplo, hacer que esa etiqueta tenga un color distinto) <p class=”bold-text”>, o el atributo “src” que se usa para especificar la ubicación de una imagen: <img src=”img/cat.jpg”>. Un elemento puede tener múltiples atributos, cada uno con un único propósito:
<p attribute1=”value1” attribute2=”value2”>
Los elementos también pueden tener un atributo id (<p id=”example”>), el cuál es único para ese elemento. A diferencia del atributo clase, donde múltiples elementos puedes usar la misma clase, un elemento debe tener distintos id’s para identificarlo de forma única. Los id’s de los elementos se utilizan para darles estilo y para identificarlos por parte de JavaScript.
Puedes ver el HTML de cualquier sitio web haciendo clic derecho y seleccionando “Ver el código fuente” (Chrome) / “Mostrar el código fuente” (Safari).
Contesta las preguntas
- ¡Vamos a jugar con un poco de HTML! A la derecha debería aparecerte una caja que renderiza HTML – Si escribes algo de HTML en la caja y haces clic en el botón verde “Render HTML Code”, renderizará tu HTML en una página; deberías ver una imagen de unos gatos.
- Una de las imágenes en el sitio web de los gatos está rota – ¡arréglala, y la imagen revelará la respuesta oculta a esta pregunta!
- Añade una imagen de un perro a la página añadiendo otra etiqueta de imagen (<img>) en la línea 11. La localización de la imagen del perro es img/dog-1.png
Cómo funcionan los sitios web – JAVASCRIPT
JavaScript (JS) es uno de los lenguajes de programación más populares en el mundo que permite hacer que las páginas web sean interactivas. HTML se usa para crear la estructura y el contenido, mientras que JavaScript se usa para controlar la funcionalidad de las páginas web – sin JavaScript una página no tendría elementos interactivos y siempre sería estática. JS puede actualizar dinámicamente la página en tiempo real, dándole funcionalidad para cambiar el estilo de un botón cuando ocurre un evento particular en la página (como cuando un usuario hace clic en un botón) o para mostrar animaciones en movimiento.
JavaScript se añade dentro del código fuente de la página y se carga mediante la etiqueta <script> o puede incluirse de forma remota con el atributo src:
<script src=”/location/of/javascript_file.js”></script>
El siguiente código JavaScript encuentra un elemento HTML en la página con el id “demo” y cambia el contenido del elemento por “Hack the Planet”:
document.getElementById(“demo”).innerHTML = “Hack the Planet”;
Los elementos HTML también pueden tener eventos, como el “onclick” u “onhover” que ejecutas JavaScript cuando ocurre el evento. El siguiente código cambia el texto de un elemento con el id “demo” a botón pulsado:
<button onclick=’document.getElementById(“demo”).innerHTML = “Button Clicked”;’>Click Me!</button>
Los eventos onclick también pueden definirse dentro de etiquetas script de JavaScript, y no solo en elementos directamente.
Contesta las preguntas
- Haz clic sobre el botón “View Site” de esta tarea. A la derecha, añade JavaScript que cambie el contenido del elemento demo a “Hack the Planet”.
- Añade el botón HTML de esta tarea que cambia el texto del elemento a “Button Clicked” en el editor de la derecha, actualiza el código clicando en el botón “Render HTML+JS Code” y haz clic en el botón.
EXPOSICIÓN SENSIBLE DE DATOS
La Exposición Sensible de Datos tiene lugar cuando un sitio web no protege (o elimina) adecuadamente la información sensible en texto claro al usuario final; normalmente se encuentra en el código fuente del frontend del sitio.
Sabemos que los sitios web están construidos usando varios elementos HTML (etiquetas), las cuales podemos ver simplemente “viendo el código fuente de la página”. Un desarrollador de sitios web podría haber olvidado de eliminar las credenciales de acceso, ocultar enlaces a partes privadas del sitio web u otros datos sensibles que se muestren en HTML o JavaScript.
La información sensible puede aprovecharse para facilitar el acceso a un atacante dentro de distintas partes de la aplicación web. Por ejemplo, puede haber comentarios HTML con credenciales de acceso temporales, y si has visto la página y encontrado eso, puedes usar esas credenciales para iniciar sesión en cualquier parte de la aplicación (o peor, usarlas para acceder a otros componentes del backend del sitio web).
Cuando asesores sobre problemas de seguridad a una aplicación web, una de las primeras cosas que has de revisar es el código fuente de la página, por si puedes encontrar expuestas algunas credenciales o enlaces ocultos.
Contesta las preguntas
- Mira el sitio web de esta tarea. ¿Cuál es la contraseña oculta en el código fuente?
INYECCIÓN HTML
La Inyección de HTML es una vulnerabilidad que ocurre cuando la entrada sin filtrar de un usuario se muestra en la página. Si un sitio web falla a la hora de desinfectar la entrada del usuario (filtrando cualquier texto “malicioso” que el usuario pueda introducir en un sitio web), y esa entrada se usa en la página, un atacante podría inyectar código HTML en un sitio web vulnerable.
La desinfección de la entrada es muy importante para mantener seguro un sitio web, ya que la información que un usuario introduce en un sitio web a menudo se usa en otras funcionalidades del frontend y el backend. Una vulnerabilidad que explorarás en otro laboratorio será la inyección en bases de datos, donde puedes manipular la apariencia de una consulta a la base de datos para acceder como otro usuario controlando la entrada que se usa directamente en la consulta – pero por ahora, centrémonos en la inyección HTML (lado del cliente).
Cuando un usuario tiene control de cómo se muestra su entrada, puede enviar código HTML (o JavaScript), y el navegador lo usará en la página, permitiendo al usuario controlar la apariencia de la página y su funcionalidad.
La imagen superior muestra cómo un formulario manda texto a la página. Sea lo que sea que el usuario escriba en el campo “What’s your name” se pasa a una función JavaScript y se muestra en la página, lo que significa que, si el usuario añade su propio HTML o JavaScript en el campo, éste se usará en la función sayHi y se añadirá a la página – esto significa que puedes añadir tu propio HTML (como una etiqueta <h1>) y se mostrará como HTML puro.
La norma general es que nunca se debe confiar en la entrada de un usuario. Para prevenir las entradas maliciosas, el desarrollador del sitio web debería desinfectar todo lo que el usuario introduzca antes de usarlo en la función JavaScript; en este caso, el desarrollador podría eliminar cualquier etiqueta HTML.
Contesta las preguntas
- Mira el sitio web de esta tarea e inyecta HTML para que se muestre un enlace malicioso que envíe a http://hacker.com.
Esta es una traducción de la sala How websites work de la ruta de aprendizaje Pre-Security Path de TryHackMe.
It is really a great and helpful piece of information. I’m glad
that you shared this useful info with us. Please keep us informed like this.
Thanks for sharing.