Cabeceras de seguridad X-Content, X-Frame y X-XSS

Aquí vamos a explicar que son las cabeceras x-content-type-options, x-frame y x-xss y como podemos utilizarlas para mejorar la seguridad de un sitio web, tanto si utilizas WordPress como CMS como si no.

1. Cabecera X-Content-Type-Options

¿Qué son las cabeceras X-Content-Type-Options?

Las cabeceras de seguridad son unos códigos que establecen unas directivas que afectan al comportamiento del navegador cuando el servidor abre una página web, para mejorar la seguridad debemos enviar el encabezado «X-Content-Type-Options: nosniff» en las respuestas cuando se solicite cualquier url del sitio web.

¿Qué problemas de seguridad resuelve la cabecera x-content-type-options establecida en «nosniff»?

Con esta cabecera, se reduce el riesgo de que se produzca un ataque basado en confusión de tipos mime.

Si se recibe la directiva «nosniff» en una respuesta recibida por una referencia de hoja de estilo , el navegador no cargará el archivo «hoja de estilo» a menos que el tipo MIME coincida con «texto / css».

Si se recibe la directiva «nosniff» en una respuesta recuperada por una referencia de script, el navegador no cargará el archivo «script» a menos que el tipo MIME coincida con uno de los siguientes valores:

• «aplicación / ecmascript»
• «aplicación / javascript»
• «aplicación / x-javascript»
• «texto / ecmascript»
• «texto / javascript»
• «texto / jscript»
• «texto / x-javascript»
• «texto / vbs»
• «texto / vbscript»

En general con la Cabecera X-Content-Type-Options evitaremos que se carguen hojas de estilo o scripts maliciosos.

Más información en las páginas de ayuda de Microsoft MSDN.

¿Cómo establecer la cabecera X-Content-Type-Options en «nosniff» utilizando WordPress?

Independientemente del tipo de servidor (Apache o Ngix)

Si la web está montada sobre WordPress podemos añadir una función que añade la cabecera X-Content-Type-Options establecida en «nosniff» en el archivo functions.php del tema principal pero ese cambio se perdería si se actualizase el tema y habría que volver a hacerlo, por lo tanto lo más recomendable en nuestra opinión es crear un plugin únicamente con esa función, de este modo podemos activarla y desactivarla cuando queramos.

Aquí está el código :

add_action('send_headers', 'add_header_x_content_type');
function add_header_x_content_type() {
   header('X-Content-Type-Options: nosniff');
}

Aquí un plugin para WordPress que añade este código y nada más:

DESCARGAR PLUGIN SIAICA-CABECERA-X-CONTENT-TYPE-OPTIONS"

¿Cómo hacerlo en un servidor con Apache?

Independientemente de si utilizas un CMS u otro si trabaja sobre un servidor con Apache deberíamos tener un archivo llamado ,htaccess en la raíz de la web. Si no existe deberíamos crear un archivo de tipo texto con el nombre «.htaccess»

Notaréis que antes de la palabra hay un punto, eso no es un error, es correcto, el archivo no tiene nombre solo extensión. En algunos servidores ese archivo está oculto y deberemos activar la opción ver archivos ocultos en el Gestor de archivos para poder editarlo. Una señal inequívoca de que el archivo .htaccess está oculto es que nos lance mensaje parecido a «el archivo ya existe» cuando intentemos crearlo.

Cuando hayamos conseguido abrir el archivo y podamos editarlo habrá que añadir la siguiente línea para establecer la cabecera X-Content-Type-Options en «nosniff» al principio o al final del archivo .htaccess

Header set X-Content-Type-Options nosniff

2. Cabecera X-Frame

La cabecera X-Frame-Options mejora la seguridad web

¿Qué son las cabeceras X-Frame-Options y qué problemas de seguridad resuelve?

Las cabecera X-Frame-Options es una directriz que afecta al comportamiento de un visor web de modo que impide que una web o una parte se muestre en frames incrustados en otros sitios web.

Hay que tener en cuenta que si necesitamos que alguna parte de la web se muestre en dominios externos en un <frame> o <iframe> habría que modificar el código excluyendo un dominio concreto al que se le permitiría mostrar iframes de la web o desactivar totalmente esta cabecera

La cabecera X-Frame-Options sirve para prevenir que la página pueda ser abierta en un frame, o iframe. De esta forma se pueden prevenir ataques de clickjacking sobre tu web.

¿Qué directrices tiene la cabecera X-Frame-Options? ¿Cómo se establecen?

Estos son los valores que acepta:

• DENY
  La página no podrá ser mostrada en un frame/iframe.
• SAMEORIGIN
  Solo podrá ser mostrada en un frame/iframe desde su propio dominio.
• ALLOW-FROM uri
  Solo podrá ser mostrada en un frame/iframe desde las url’s indicadas.

Se puede establecer la cabecera con alguna de estas directrices de varias formas…

1. Añadiendo una función al tema de WordPress (en caso de utilizar WordPress como CMS)
2. instalando y activando un plugin que añade la función establecida en SAMEORIGIN
3. Añadiendo una línea nueva en el archivo .htaccess como hemos mencionado anteriormente en caso de que que el servidor sea Apache

FUNCIÓN PARA WORDPRESS

add_action('send_headers', 'add_header_x_frame_options');
function add_header_x_frame_options() {
   header('X-Frame-Options: SAMEORIGIN');
}

PLUGIN DE WORDPRESS QUE AÑADE LA FUNCIÓN

DESCARGAR PLUGIN SIAICA-X-FRAME-OPTIONS

CÓDIGO PARA EL .HTACCESS

Header always append X-Frame-Options SAMEORIGIN

Ejemplo de X-FRAME-OPTIONS con ALLOW-FROM para permitir frames desde un dominio determinado

Ejemplo de función para WordPress que añade la cabecera X-FRAME-OPTIONS establecida con ALLOW-FROM para el archivo functions.php del tema o para modificar el plugin de WordPress

add_action('send_headers', 'add_header_x_frame_options'); 
function add_header_x_frame_options() { 
   header('X-Frame-Options: ALLOW-FROM http://siaica.boostersite.es');
}

O en caso de no tener WordPress pero si un servidor Apache añadiendo una línea de código en el archivo .htaccess como por ejemplo:

Header always append X-Frame-Options ALLOW-FROM url-dominio-con-http-o-https-incluido

3. Cabecera X-XSS-Protection para evitar ataques XSS en IE y Chrome

La cabecera X-XSS-Protection se utiliza para activar el filtro XSS que tienen habilitado IE y Chrome.

Se trata de una capa de seguridad adicional que bloquea ataques XSS. Internet Explorer lo implementa desde la versión 8. Puedes leer más sobre el filtro XSS de IE en el IEBlog de Microsoft.

Más información sobre cabeceras HTTP.

Si utilizamos WordPress una forma de añadir esta cabecera sería añadiendo unas líneas de código al archivos functions.php del tema de WordPress que estemos usando pero como ya hemos mencionado antes no creemos que sea la mejor

add_action( 'send_headers', 'add_header_x_xss_protection' );
function add_header_x_xss_protection() {
   header( 'X-XSS-Protection: 1;mode=block' );
}

Aquí dejamos un plugin para WordPress que añade solo esa función que no se verá afectada por cambio de tema o actualización, con la ventaja añadida de que podemos activarlo y desactivarlo cuando queramos

DESCARGAR PLUGIN SIAICA-CABECERA-X-XSS

¿Cómo podemos hacerlo con cualquier CMS o WEB montada sobre un servidor Apache?

Independientemente de si utilizamos WordPress o no podemos añadir cabeceras siempre que la web trabaje sobre un sistema Apache.

Como hemos dicho anteriormente añadiendo una fila código en el archivo .htaccess en la raíz de la web. El código es el siguiente:

Header set X-XSS-Protection "1; mode=block"

Con estos 3 plugins tendríamos las cabeceras de seguridad y una mejor protección del sitio web

También podríamos hacer un plugin la las tres funciones juntas pero no podríamos desactivarlas una a una, serían todas o ninguna. El código del plugin sería el siguiente:

add_action('send_headers', 'cabeceras_de_seguridad');
function cabeceras_de_seguridad() {
   header('X-Content-Type-Options: nosniff');
   header('X-Frame-Options: SAMEORIGIN');
   header('X-XSS-Protection: 1;mode=block');
}

Otra opción si no tienes WordPress pero si un servidor con Apache es poner las tres líneas de la 3 cabeceras en el archivo .htaccess y quedaría algo así:

Header set X-Content-Type-Options nosniff
Header always append X-Frame-Options SAMEORIGIN
Header set X-XSS-Protection "1; mode=block"

Esperamos que esta publicación ayude a nuestros clientes y usuarios a mejorar la seguridad de sus sitios web, si siguiendo alguno de estos pasos encontráis que el sitio web deja de funcionar no desesperéis, bastará con eliminar las líneas de código del .htaccess y vaciar el cache para que todo vuelva a la normalidad

Si necesitas ayuda para mejorar la seguridad de tu sitio web o del de tu empresa contacta con nosotros y analizaremos las opciones contigo para ayudarte de la mejor manera posible