Haz inexpugnables tu web configurando correctamente los headers
Si quieres ir al turrón clic aquí
Quien quita la piedra, evita el tropezón.
Te voy a contar cómo evitar que tu web o APP sean vulnerables a ataques de Cross-Site Scripting (XSS) y Clickjacking entre otros.
Concretamente, te voy a explicar en el siguiente artículo a pasar de esto:
A esto:
Diagnosticando una web
Hay varias herramientas en línea para combrobar tu web, yo uso observatory de la fundación Mozilla
Escribes tu web y obtienes la calificación.
¿Qué cosas puedes hacer para mejorar la calificación?
Activar la navegación HTTPS y redirigir todo el tráfico HTTP a HTTPS.
Mi web la tengo alojada en Cloudflare Pages, te cuento cómo se configura el HSTS en Cloudflare pages.
Configurando HSTS (HTTP Strict Transport Security) en Cloudflare pages
Ve a la pestaña SSL/TLS de la barra lateral.
Desplázate hacia abajo hasta que encuentre un botón azul que pone Change HSTS Setting
Configura los parámetros de HSTS:
- Max-Age: Define el tiempo (en segundos) durante el cual los navegadores deben recordar que el sitio solo permite conexiones HTTPS. Para un entorno de producción, un valor de 6 meses es común.
- Apply HSTS policy to subdomains: Marca esta opción si también deseas que los subdominios usen HTTPS estrictamente.
- Preload: Permite incluir tu sitio en la lista de precarga de HSTS de navegadores. Solo habilita esta opción si estás seguro de que todas las páginas y subdominios usarán HTTPS.
Creando el fichero _headers
Content-Security-Policy
El fichero _headers es un archivo que se encuentra en la raíz de tu sitio web.
El propósito del fichero _headers es configurar los headers de tu sitio web.
Esto condicionará el comportamiento de tu web o aplicación web.
Te dejo una configuración detallada con valores de ejemplos del CSP:
/*
Content-Security-Policy: default-src 'self';
script-src 'self' https://apis.google.com;
style-src 'self' 'unsafe-inline';
img-src 'self' https://example.com;
font-src 'self' https://fonts.googleapis.com;
connect-src 'self' https://api.example.com;
frame-src https://youtube.com;- default-src 'self'; Permite que los recursos provengan solo de la propia aplicación.
- script-src; Especifica de dónde pueden cargarse los scripts, permitiendo solo los de la propia aplicación y los de https://apis.google.com en este caso.
- style-src; Permite estilos internos ('unsafe-inline') y de la propia aplicación ('self').
- img-src; Limita las imágenes a cargarse solo desde la aplicación y un dominio específico.
- font-src; Permite cargar fuentes solo desde el propio dominio y fonts.googleapis.com.
- connect-src; Permite conexiones a la API de la aplicación (api.example.com).
- frame-src; Permite la inclusión de frames solo desde youtube.com.
X-Frame-Options
El encabezado X-Frame-Options se utiliza para controlar si una página puede ser cargada dentro de un iframe, lo cual protege contra ataques de "Clickjacking".
Este encabezado tiene tres valores posibles:
- DENY; Impide que la página se muestre en un iframe, independientemente del origen.
- SAMEORIGIN; Permite que la página se muestre en un iframe, pero solo si es desde el mismo dominio.
- ALLOW-FROM URL; Permite la carga desde un dominio específico (aunque este valor no es ampliamente compatible en navegadores modernos y está en desuso).
/*
X-Frame-Options: SAMEORIGINSi quieres un mayor control y evitar el uso de X-Frame-Options, usa la directiva frame-ancestors en el encabezado Content-Security-Policy (CSP) en tu archivo _headers.
Esto permitirá especificar qué dominios pueden cargar tu sitio en un iframe.
/*
Content-Security-Policy: frame-ancestors 'self' https://dominio-permitido.com;frame-ancestors 'self' https://dominio-permitido.com te permite que el sitio se cargue en un iframe solo en dominio-permitido.com y el propio dominio ('self').
Usando frame-ancestors en la CSP en lugar de X-Frame-Options es generalmente preferible y más compatible con los navegadores actuales, además de ofrecer más control sobre los dominios permitidos.
Hasta luego 🖖
