Cómo evitar ataques XSS

En este post veremos cómo evitar ataques XSS, veremos como evitar en parte ataques de esta característica en el Front-End y veremos que debemos hacer en la parte del Back-End.

Introducción

¿Qué es un ataque XSS?

Las siglas XSS viene de cross site scripting, ¿qué es esto? Se puede decir que es un tipo de inyección muy parecida a la inyección SQL excepto que esta vez trataran de guardar código de tipo script en nuestra página web. Generalmente, este código está escrito en JavaScript o también puede ser HTML que redirija a otra web para realizar phishing.

Algunos ejemplos de ataques que pueden hacerle a tu sitio:

<script>
   window.location.href = 'http://sitio-malicioso.com';
</script>

<script>
   var cookies = document.cookie;
   // Enviar cookies a un servidor controlado por el atacante
</script>

<script>
   document.onkeypress = function(e) {
       // Enviar las teclas presionadas a un servidor controlado por el atacante
   };
</script>

<script>
   document.getElementById('elemento').innerHTML = 'Contenido malicioso';
</script>

Hay otros ataques como el phishing y el de poner publicidad en tu sitio sin tu consentimiento.

Front-End

En el Font-End lo que se recomienda es separar tu HTML de tu JavaScript, por lo que no debería haber inline-codes de JavaScript

<button onclick="miFuncion()">Haz clic</button>

<script>codigo de javascript</script>

En cambio, se recomienda algo parecido a lo siguiente.

<button id="miBoton">Haz clic</button>

<script>
  document.getElementById("miBoton").addEventListener("click", miFuncion);
</script>

Ahora lo que deberías hacer es configurar tu CSP para que no permita inline-code y otras configuraciones que desees, por ejemplo que no permita la ejecución de scripts de otras páginas, excepto las de Google, ya que necesitaremos que este registre nuestra página.

Puedes ver sobre nas sobreContent Security Policy en CSP en PHP

Back-End

En el Back-End, sin embargo, aunque hemos prácticamente evitado que nos hagan el ataque, deberíamos de escapar lo ingresado por el usuario, en PHP por ejemplo utilizando la función htmlspecialchars(), aunque es aún más recomendable utilizar los filtros

$user_input = $_POST['user_input'];

// Escapar los datos ingresados por el usuario utilizando el filtro FILTER_SANITIZE_SPECIAL_CHARS
$escaped_input = filter_var($user_input, FILTER_SANITIZE_SPECIAL_CHARS);


// Sanitizar los datos ingresados por el usuario(eliminara los caracteres no seguros)
$sanitized_input = filter_var($user_input, FILTER_SANITIZE_STRING);

Aunque puedes hacer esto, es aún más recomendable crear una clase validation para así poder validar que lo que se ingrese cumpla con los requisitos, por ejemplo verificar si es un correo, si es un número, etc y además de eso sanitizar con los filtros anteriormente vistos