Cómo añadir cabeceras de seguridad HTTP en WordPress

¿Sabías que tu sitio WordPress puede estar enviando información sensible a los navegadores de tus visitantes sin que tú lo sepas? Cada vez que alguien entra a tu web, tu servidor responde con una serie de cabeceras HTTP. Estas cabeceras son como etiquetas que le dicen al navegador cómo comportarse con el contenido que recibe.

Si no configuras correctamente estas cabeceras, estás dejando la puerta abierta a ataques como el clickjacking (secuestro de clics), la inyección de scripts maliciosos (XSS) o la descarga de contenido no deseado. Por suerte, añadir cabeceras de seguridad en WordPress es un proceso sencillo si sabes dónde mirar y qué pegar.

En esta guía extensa y paso a paso, voy a explicarte, sin tecnicismos innecesarios, cómo proteger tu web con cabeceras como X-Frame-Options, Content-Security-Policy (CSP) y Strict-Transport-Security (HSTS). Al final, tendrás un checklist claro para blindar tu proyecto.

¿Qué son exactamente las cabeceras de seguridad HTTP?

Cuando tu navegador (Chrome, Firefox, Safari) solicita una página, el servidor responde no solo con el HTML, sino también con una serie de líneas de metadatos llamadas cabeceras HTTP. Piensa en ellas como las instrucciones de envío de un paquete: le dicen al navegador qué puede hacer con el contenido, de dónde viene y cómo debe tratarlo.

Las cabeceras de seguridad son un subconjunto de estas instrucciones que se centran en prevenir vulnerabilidades conocidas. Por ejemplo, la cabecera X-Frame-Options le dice al navegador si tu página puede ser incrustada dentro de un iframe en otro sitio. Si no la configuras, un atacante podría poner tu web (por ejemplo, tu página de login) dentro de un iframe invisible y engañar a un usuario para que haga clic sin saberlo. Eso es clickjacking.

Otras cabeceras como Content-Security-Policy (CSP) son más avanzadas y te permiten controlar exactamente qué scripts, estilos o imágenes puede cargar tu página. Esto bloquea de raíz muchos ataques de inyección de código.

La buena noticia es que no necesitas ser un gurú de la programación para implementarlas. Solo tienes que añadir unas líneas de código al archivo .htaccess de tu hosting o usar un plugin. Vamos a ver ambas opciones.

Antes de empezar: prepara tu entorno de trabajo

Antes de tocar nada, es fundamental que hagas una copia de seguridad completa de tu sitio. Aunque los cambios que vamos a hacer son pequeños, un error de sintaxis en el archivo .htaccess puede tumbar tu web.

Además, necesitarás acceso al panel de control de tu hosting. Si usas un panel como Syspanel (recuerda, el puerto de acceso es el 2106), podrás gestionar los archivos desde el administrador de archivos sin necesidad de FTP. Si no, también puedes usar un cliente FTP como FileZilla.

[WARNING] No edites el archivo .htaccess directamente desde el editor de WordPress si no sabes lo que haces. Un fallo al guardar puede bloquear todo el sitio. Siempre edita desde el panel de control o FTP, y guarda una copia del archivo original antes de modificar.

Otra opción es usar un plugin de seguridad como Wordfence o Sucuri, que añaden estas cabeceras automáticamente. Pero si quieres control total y aprender de verdad, te recomiendo hacerlo manualmente. Es más limpio y no añade peso extra a tu web.

Método 1: Añadir cabeceras de seguridad WordPress mediante .htaccess

El archivo .htaccess es el archivo de configuración principal del servidor Apache (el más común en hosting compartido). Es donde puedes definir reglas de reescritura y, lo que nos interesa, cabeceras HTTP personalizadas.

Para empezar, entra a tu panel de control (Syspanel, puerto 2106) y busca la carpeta public_html o www. Dentro, localiza el archivo .htaccess. Si no lo ves, activa la opción de "mostrar archivos ocultos".

Abre el archivo con el editor de texto del panel y añade el siguiente bloque al final, justo después de la línea # END WordPress si existe, o simplemente al final del archivo:

<IfModule mod_headers.c>
    # Proteger contra clickjacking (secuestro de clics)
    Header always set X-Frame-Options "SAMEORIGIN"

    # Prevenir ataques XSS (Cross-Site Scripting)
    Header set X-XSS-Protection "1; mode=block"

    # Evitar que el navegador detecte el tipo de archivo automáticamente
    Header set X-Content-Type-Options "nosniff"

    # Forzar HTTPS (Redirige a conexión segura)
    Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"

    # Política de Seguridad de Contenido (CSP) básica
    Header set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://code.jquery.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:;"
</IfModule>

Guarda los cambios y sube el archivo si lo editaste localmente. Ahora, recarga tu web y verifica que funciona correctamente. Si algo falla, revierte el cambio.

[INFO] La directiva Header always set es clave. Asegura que la cabecera se envíe en todas las respuestas, incluidas las de error (404, 500, etc.). La directiva Header set solo aplica a respuestas exitosas (200 OK).

Explicación de las cabeceras que acabas de añadir

Vamos a desglosar cada línea para que sepas qué estás protegiendo:

X-Frame-Options: Con el valor SAMEORIGIN, le dices al navegador que solo permita que tu página sea mostrada dentro de un iframe si el sitio que la contiene es el mismo (mismo dominio). Esto bloquea el clickjacking desde otros dominios.
X-XSS-Protection: Esta cabecera activa el filtro de scripts entre sitios de los navegadores. El valor 1; mode=block hace que, si se detecta un ataque XSS, el navegador bloquee la página por completo en lugar de intentar limpiarla.
X-Content-Type-Options: Con nosniff, evitas que el navegador "adivine" el tipo de contenido de un archivo. Esto previene que, por ejemplo, un archivo .jpg sea interpretado como HTML y ejecute scripts maliciosos.
Strict-Transport-Security (HSTS): Esta es la cabecera que fuerza a los navegadores a usar siempre HTTPS. El valor max-age=31536000 significa que durante un año (31536000 segundos), el navegador solo usará conexión segura con tu dominio. El parámetro includeSubDomains aplica la regla a todos los subdominios, y preload permite que tu dominio sea incluido en la lista de precarga de HSTS de los navegadores (esto requiere registro adicional, pero es buena práctica).
Content-Security-Policy (CSP): Esta es la más compleja. La configuración que te he dado es un punto de partida seguro. Permite cargar scripts desde tu propio dominio ('self'), desde code.jquery.com (para jQuery) y permite estilos en línea ('unsafe-inline'). Es posible que necesites ajustar esta lista si usas muchos plugins o scripts externos.

[WARNING] La cabecera CSP puede romper funcionalidades de tu web si no está bien configurada. Por ejemplo, si usas un reproductor de video de YouTube, necesitarás añadir frame-src https://www.youtube.com a la política. Si ves que algo no carga después de añadirla, revisa la consola del navegador (F12) para ver qué recurso está siendo bloqueado y ajústala en consecuencia.

Método 2: Añadir cabeceras de seguridad WordPress mediante funciones.php

Si tu hosting no usa Apache (por ejemplo, si usas Nginx) o si prefieres centralizar la configuración en el tema de WordPress, puedes añadir las cabeceras usando PHP. Este método es igual de válido y a veces más fácil de mantener.

Para ello, ve a Apariencia > Editor de archivos de tema en tu panel de WordPress y selecciona el archivo functions.php de tu tema hijo (si no usas tema hijo, te recomiendo que crees uno para no perder los cambios al actualizar el tema).

Añade el siguiente código al final del archivo:

// Añadir cabeceras de seguridad HTTP
function agregar_cabeceras_seguridad() {
    header('X-Frame-Options: SAMEORIGIN');
    header('X-XSS-Protection: 1; mode=block');
    header('X-Content-Type-Options: nosniff');
    header('Strict-Transport-Security: max-age=31536000; includeSubDomains; preload');
    header("Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://code.jquery.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:;");
}
add_action('send_headers', 'agregar_cabeceras_seguridad');

Guarda los cambios. Este código se ejecuta en cada carga de página y envía las cabeceras correspondientes.

[TIP] Si usas un plugin de caché (como W3 Total Cache o WP Rocket), asegúrate de vaciar la caché después de añadir estas cabeceras. De lo contrario, las versiones cacheadas de tus páginas no incluirán las nuevas cabeceras y no verás el efecto deseado.

Cómo verificar que tus cabeceras de seguridad están activas

No basta con añadir el código; debes comprobar que funciona. Hay varias formas de hacerlo:

Usa las herramientas de desarrollo del navegador: Abre tu web en Chrome o Firefox, pulsa F12 para abrir la consola de desarrollador, ve a la pestaña "Red" (Network) y recarga la página. Haz clic en la petición principal (la del documento HTML) y en la sección "Cabeceras" (Headers) verás todas las que se están enviando. Busca las que acabamos de configurar.
Usa una herramienta online: Hay servicios como SecurityHeaders.com que analizan tu web y te dan una nota de A a F según la configuración de tus cabeceras. Es una forma rápida y visual de comprobar tu nivel de seguridad.
Usa la línea de comandos (si eres más técnico): Puedes usar el comando curl -I https://tudominio.com en tu terminal para ver las cabeceras de respuesta.

Errores comunes y cómo solucionarlos

Al implementar estas cabeceras, es normal encontrarse con algunos problemas. Aquí te dejo los más frecuentes y sus soluciones:

Mi web se ve "rota" o algunos estilos no cargan

Esto suele ser culpa de la cabecera CSP. El navegador está bloqueando recursos que antes cargaba libremente. La solución es revisar la consola de desarrollador (F12) y ver qué recursos están siendo bloqueados. Luego, añade los dominios o esquemas necesarios a la política CSP.

Por ejemplo, si usas Google Fonts, tendrás que añadir style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; a tu política.

Recibo un error de "Too Many Redirects" tras activar HSTS

Esto ocurre si tu servidor no está realmente sirviendo HTTPS correctamente o si tienes un bucle de redirección. La cabecera HSTS fuerza al navegador a usar HTTPS, pero si tu hosting no tiene el certificado SSL bien instalado o si tienes una regla de redirección mal configurada, puedes crear un bucle infinito.

Solución: Accede a tu hosting (Syspanel, puerto 2106) y verifica que el certificado SSL está activo. Después, revisa tus reglas de redirección en .htaccess. Asegúrate de que solo hay una redirección HTTP → HTTPS y no varias anidadas.

Los cambios en .htaccess no tienen efecto

Si has editado el archivo y no ves cambios, puede ser que tu hosting no use Apache o que el módulo mod_headers no esté habilitado. En ese caso, prueba el método con functions.php. Si tampoco funciona, es probable que tu hosting use Nginx y necesites modificar el archivo de configuración del servidor (algo que suele requerir acceso SSH).

Preguntas frecuentes (FAQ)

¿Puedo añadir estas cabeceras sin tocar código?

Sí, existen plugins como "Headers Security Advanced HSTS WP" o "WP Security Headers" que te permiten activar estas cabeceras desde un panel gráfico. Son ideales para principiantes, aunque añaden algo de peso a tu instalación.

¿Estas cabeceras afectan al rendimiento de mi web?

No, el impacto es mínimo. El servidor solo añade unas pocas líneas de texto a la respuesta HTTP. De hecho, la cabecera HSTS puede mejorar el rendimiento al evitar redirecciones innecesarias en visitas recurrentes.

¿Qué pasa si uso un CDN como Cloudflare?

Si usas un CDN, es recomendable configurar las cabeceras a nivel de CDN, ya que este actúa como intermediario. Cloudflare tiene opciones específicas para cabeceras de seguridad en su panel de control. Si las configuras solo en tu servidor, el CDN podría sobrescribirlas o ignorarlas.

¿Es obligatorio tener todas estas cabeceras?

No es obligatorio, pero es altamente recomendable. Sitios como bancos, tiendas online o webs que manejan datos de usuarios deberían tenerlas todas activas. Para un blog personal, al menos X-Frame-Options y X-Content-Type-Options son un buen comienzo.

Cada cuánto tiempo debo revisar mi configuración de seguridad HTTP?

Te recomiendo hacer una auditoría cada 3-6 meses. Los estándares de seguridad evolucionan y pueden surgir nuevas cabeceras recomendadas (como Permissions-Policy que está ganando popularidad). Usa herramientas como SecurityHeaders.com para monitorizar tu puntuación.

Conclusión: Blinda tu WordPress hoy mismo

Añadir cabeceras de seguridad HTTP en WordPress es una de las mejores inversiones de tiempo que puedes hacer para proteger tu proyecto. No solo previenes ataques comunes como el clickjacking o el XSS, sino que además mejoras la confianza de tus usuarios y tu posicionamiento SEO, ya que Google valora positivamente los sitios seguros.

Hemos visto dos métodos claros: editar el .htaccess o usar functions.php. Ambos son válidos, pero te recomiendo el primero si tu hosting usa Apache, ya que es más directo y no depende del tema que uses.

Recuerda siempre hacer una copia de seguridad antes de modificar archivos de configuración, y verifica los cambios con una herramienta online. Si tienes dudas, empieza con lo básico: X-Frame-Options y X-Content-Type-Options. Luego, cuando te sientas cómodo, añade la CSP y HSTS.

La seguridad web no es un destino, sino un proceso continuo. Cada capa que añades hace más difícil la vida a los atacantes. Y lo mejor de todo es que, con estas pocas líneas de código, has dado un paso gigante hacia adelante.

Ahora te toca a ti. ¿Te animas a probarlo en tu sitio? Cuéntame en los comentarios qué tal te ha ido o si has encontrado alguna dificultad. ¡Estoy aquí para ayudarte!