Añadir cabeceras de seguridad en PrestaShop | HSTS y X-Frame

¿Por qué tu tienda PrestaShop necesita cabeceras de seguridad?

Cuando hablamos de proteger una tienda online, lo primero que pensamos es en un buen antivirus o en un cortafuegos. Pero hay una capa de protección que ocurre a un nivel mucho más básico: la comunicación entre el navegador del cliente y tu servidor. Ahí es donde entran las cabeceras de seguridad PrestaShop.

Piensa en las cabeceras HTTP como en la etiqueta de envío de un paquete. Antes de que el contenido de tu web (textos, imágenes, formularios) llegue al navegador, el servidor envía una serie de instrucciones. Esas instrucciones le dicen al navegador cómo debe comportarse. Si configuramos bien esas instrucciones, podemos evitar ataques muy comunes como el clickjacking o las conexiones inseguras.

Muchos clientes nos preguntan: "¿Mi tienda es segura si tengo SSL?". La respuesta es que SSL es solo el primer paso. Sin las cabeceras correctas, tu tienda sigue siendo vulnerable a ciertos trucos de ingeniería social y a la interceptación de datos en redes intermedias. En este artículo te voy a explicar, paso a paso y sin tecnicismos innecesarios, cómo activar dos de las más importantes: HSTS PrestaShop y X-Frame-Options PrestaShop.

¿Qué son exactamente las cabeceras de seguridad?

Antes de ponernos manos a la obra, vamos a entender qué son y por qué son tan importantes para la seguridad tienda online.

Cada vez que un usuario visita tu tienda, su navegador envía una petición HTTP a tu servidor. El servidor responde con el contenido de la página, pero también con una serie de metadatos llamados "cabeceras". Estas cabeceras son invisibles para el usuario, pero el navegador las lee y actúa en consecuencia.

Por ejemplo, una cabecera puede decirle al navegador: "No guardes esta página en caché" o "Solo permites que esta página se muestre dentro de un marco de mi propio dominio".

Configurar estas cabeceras es como ponerle un cinturón de seguridad a tu tienda. No lo ves, pero te salva la vida en un accidente.

Requisitos previos antes de empezar

Para configurar las cabeceras seguridad PrestaShop, necesitarás:

Acceso al panel de control de tu hosting (cPanel, Plesk o similar).
Acceso al administrador de archivos de tu hosting o a un cliente FTP (como FileZilla).
Un editor de texto plano (como el Bloc de notas o Sublime Text). No uses Word, ya que añade caracteres invisibles que rompen el código.
Tu tienda debe tener SSL activado (https://). Esto es imprescindible para que HSTS funcione.

[INFO] Si tu hosting utiliza el panel "Syspanel", recuerda que el acceso se realiza a través del puerto 2106. Si no sabes qué panel usas, contacta con tu proveedor antes de continuar.

Método 1: Configurar cabeceras desde el archivo .htaccess (Apache)

El método más común y recomendado para añadir cabeceras seguridad PrestaShop es modificar el archivo .htaccess. Este archivo controla la configuración del servidor Apache, que es el más utilizado en el hosting compartido.

Paso 1: Localizar el archivo .htaccess

Conéctate a tu hosting mediante FTP o al administrador de archivos.
Busca la carpeta raíz de tu tienda. Normalmente se llama public_html, www o es directamente la raíz del dominio.
Busca el archivo .htaccess. Es un archivo oculto, así que en el administrador de archivos es posible que tengas que activar la opción "Mostrar archivos ocultos".

[WARNING] Si no encuentras el archivo .htaccess, no lo crees todavía. Primero verifica que tu servidor usa Apache. Si tu hosting usa Nginx (muy común en servidores VPS), este método no funcionará y tendrás que usar el Método 3.

Paso 2: Hacer una copia de seguridad

Antes de tocar nada, descarga una copia del archivo .htaccess a tu ordenador. Así, si algo sale mal, podrás restaurarlo fácilmente.

Paso 3: Añadir las cabeceras

Abre el archivo .htaccess con tu editor de texto plano.
Al principio del archivo, justo después de la línea que dice # ~~~start~~ Do not remove this comment..., añade el siguiente bloque de código:

# Cabeceras de seguridad para PrestaShop
<IfModule mod_headers.c>
    # HSTS (Strict-Transport-Security)
    Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
    
    # X-Frame-Options para evitar clickjacking
    Header always set X-Frame-Options "SAMEORIGIN"
    
    # X-Content-Type-Options (opcional pero recomendado)
    Header always set X-Content-Type-Options "nosniff"
    
    # Referrer-Policy (opcional)
    Header always set Referrer-Policy "strict-origin-when-cross-origin"
</IfModule>

Paso 4: Guardar y probar

Guarda el archivo .htaccess y súbelo de nuevo a tu servidor si lo estabas editando localmente.
Borra la caché de tu navegador o usa una ventana de incógnito.
Visita tu tienda y luego abre las herramientas de desarrollador de tu navegador (F12). Ve a la pestaña "Red" (Network) y recarga la página. Haz clic en la petición inicial (documento) y busca la sección de "Cabeceras de respuesta". Deberías ver las nuevas cabeceras.

Método 2: Usar el panel de administración de PrestaShop

PrestaShop tiene un panel de administración muy completo, pero la configuración de cabeceras no está incluida de forma nativa en versiones antiguas. Sin embargo, a partir de PrestaShop 8, no hay una opción directa. Por eso, este método es menos común, pero te lo explico por si tu versión lo permite.

Paso 1: Acceder a la configuración avanzada

Inicia sesión en tu panel de administración de PrestaShop.
Ve a Configuración avanzada > Rendimiento.
Busca la sección de "Cabeceras HTTP" (si tu versión la tiene). En versiones más recientes, esta opción se ha movido o eliminado.

Paso 2: Añadir las cabeceras

Si tu versión tiene el campo, simplemente pega el siguiente código en el área de texto:

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-Frame-Options: SAMEORIGIN
X-Content-Type-Options: nosniff

[INFO] Si no encuentras esta opción en tu versión de PrestaShop, no te preocupes. El método del .htaccess es mucho más fiable y funciona en todas las versiones.

Método 3: Configurar cabeceras en servidores Nginx

Si tu tienda está alojada en un servidor VPS o dedicado con Nginx, el proceso es diferente. No uses .htaccess porque Nginx no lo lee.

Paso 1: Acceder al archivo de configuración

Conéctate a tu servidor por SSH.
Busca el archivo de configuración del sitio. Normalmente está en /etc/nginx/sites-available/tu-dominio.com.

Paso 2: Añadir las cabeceras en el bloque server

Dentro del bloque server { ... }, añade las siguientes líneas:

add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;

Paso 3: Recargar Nginx

Guarda el archivo y ejecuta el siguiente comando para aplicar los cambios:

sudo nginx -t
sudo systemctl reload nginx

Método 4: Usar un módulo de PrestaShop

Si no te sientes cómodo editando archivos, existe una alternativa más sencilla: usar un módulo de seguridad. Hay varios módulos gratuitos y de pago en el marketplace de PrestaShop que te permiten configurar estas cabeceras con solo marcar unas casillas.

Ventajas de usar un módulo

No necesitas tocar código.
Las actualizaciones de PrestaShop no sobrescribirán tu configuración.
Algunos módulos añaden cabeceras adicionales que no hemos mencionado.

Desventajas

Puede ralentizar ligeramente tu tienda si el módulo está mal optimizado.
Algunos módulos gratuitos son de baja calidad y pueden generar conflictos.

Explicación detallada de cada cabecera

Ahora que ya sabes cómo implementarlas, vamos a entender qué hace cada una. Esto es importante para que puedas explicarlo a tu equipo o a tu cliente.

HSTS PrestaShop (Strict-Transport-Security)

Esta cabecera le dice al navegador: "A partir de ahora, solo te comuniques conmigo a través de HTTPS. Ni se te ocurra usar HTTP".

¿Por qué es tan importante?

Imagina que un cliente está en un café con WiFi público. Un atacante en la misma red podría interceptar la conexión y redirigirlo a una versión falsa de tu tienda. Con HSTS, el navegador del cliente se niega a cargar cualquier versión HTTP de tu sitio, incluso si el atacante intenta redirigirlo.

El parámetro max-age indica durante cuánto tiempo (en segundos) el navegador debe recordar esta orden. 31536000 equivale a un año.

includeSubDomains aplica la regla también a todos los subdominios (tienda.tudominio.com, blog.tudominio.com, etc.).

preload es un paso adicional. Si incluyes esta palabra, puedes enviar tu dominio a una lista pública de navegadores que la incluyen de forma permanente. Esto es opcional, pero muy recomendable.

[WARNING] Si activas preload, asegúrate de que TODOS tus subdominios tienen HTTPS activo. Si tienes un subdominio que no lo tiene, dejará de funcionar.

X-Frame-Options PrestaShop

Esta cabecera previene un ataque llamado clickjacking. Este ataque consiste en que un tercero crea una página web maliciosa que carga tu tienda dentro de un iframe invisible. El usuario cree que está haciendo clic en un botón de la página maliciosa, pero en realidad está haciendo clic en un botón de tu tienda (como "Comprar ahora" o "Añadir al carrito").

Los valores posibles son:

DENY: La página no puede mostrarse en ningún iframe, ni siquiera en tu propio dominio.
SAMEORIGIN: La página solo puede mostrarse en iframes de tu propio dominio. Este es el valor recomendado para PrestaShop, ya que algunos módulos (como los de pago) pueden necesitar cargar tu tienda en un iframe.
ALLOW-FROM uri: Permite mostrar la página solo en iframes de una URL específica. Este valor está obsoleto en navegadores modernos, así que no lo uses.

X-Content-Type-Options

Esta cabecera evita que el navegador "adivine" el tipo de contenido de un archivo. Por ejemplo, si un atacante sube un archivo PHP disfrazado de imagen, sin esta cabecera el navegador podría ejecutarlo. Con nosniff, el navegador se niega a interpretar un archivo como algo que no es.

Cómo verificar que las cabeceras están funcionando

Después de aplicar los cambios, es fundamental verificar que todo funciona correctamente. Hay varias formas de hacerlo:

Método 1: Herramientas de desarrollador del navegador

Abre tu tienda en Chrome o Firefox.
Pulsa F12 para abrir las herramientas de desarrollador.
Ve a la pestaña "Red" (Network).
Recarga la página (F5).
Haz clic en la primera petición (la del documento HTML).
Busca la sección "Cabeceras de respuesta" (Response Headers).
Verifica que aparecen strict-transport-security y x-frame-options.

Método 2: Herramientas online

Existen herramientas gratuitas como SecurityHeaders.com o SSL Labs que analizan tu sitio y te dan una nota de seguridad. Solo tienes que introducir tu dominio y esperar unos segundos.

[TIP] La nota de SecurityHeaders.com es una buena métrica para mostrar a tus clientes. Una puntuación A o A+ indica que tu tienda está bien protegida.

Errores comunes y cómo solucionarlos

Error 1: Las cabeceras no aparecen

Causa: El módulo mod_headers no está activado en Apache.

Solución: Contacta con tu proveedor de hosting y pide que activen mod_headers. Si usas un VPS, ejecuta:

sudo a2enmod headers
sudo systemctl restart apache2

Error 2: La tienda se rompe después de añadir HSTS

Causa: Tienes contenido mixto (recursos cargados por HTTP en una página HTTPS) o algún subdominio sin SSL.

Solución: Revisa que todos los recursos (imágenes, scripts, CSS) se carguen por HTTPS. En PrestaShop, ve a Parámetros avanzados > Rendimiento y activa la opción "Forzar SSL". También puedes usar un plugin para detectar contenido mixto.

Error 3: X-Frame-Options bloquea un módulo de pago

Causa: Algunos pasarelas de pago cargan tu tienda en un iframe para mostrar el formulario de pago.

Solución: Cambia el valor a SAMEORIGIN en lugar de DENY. Si el problema persiste, tendrás que usar un método más avanzado como Content-Security-Policy frame-ancestors.

Preguntas frecuentes (FAQ)

¿Puedo añadir cabeceras de seguridad PrestaShop sin conocimientos técnicos?

Sí, si usas un módulo de PrestaShop o sigues el método del .htaccess copiando y pegando el código que te he dado. Eso sí, siempre haz una copia de seguridad antes.

¿Estas cabeceras afectan al rendimiento de mi tienda?

No, el impacto es imperceptible. Las cabeceras son solo texto que se envía junto con la respuesta del servidor. Ocupan unos pocos bytes adicionales.

¿Cuánto tiempo tarda en hacer efecto HSTS?

Los navegadores respetan el max-age que hayas configurado. Si pones 31536000, el efecto dura un año. Si necesitas desactivarlo temporalmente, cambia el valor a 0 y espera a que los navegadores actualicen.

¿Qué pasa si mi tienda tiene varios dominios?

Debes configurar las cabeceras en cada dominio por separado. Si usas un hosting compartido, puedes usar el .htaccess de cada dominio. Si usas Nginx, tendrás que editar cada archivo de configuración.

¿Es necesario configurar `Content-Security-Policy`?

No es obligatorio, pero es muy recomendable. Esta cabecera es más compleja y puede romper tu tienda si no la configuras bien. Te sugiero que primero implementes HSTS y X-Frame-Options, y luego investigues sobre CSP si quieres una protección más avanzada.

¿Puedo usar estas cabeceras en otras plataformas como WooCommerce?

Sí, los mismos conceptos aplican a cualquier plataforma web. De hecho, estas cabeceras son estándares de la industria y funcionan en WordPress, Magento, Drupal, etc.

Conclusión y próximos pasos

Añadir cabeceras seguridad PrestaShop como HSTS y X-Frame-Options es un paso fundamental para proteger tu tienda online. No es complicado, solo requiere un poco de cuidado y seguir los pasos que te he explicado.

Resumen rápido:

HSTS obliga a los navegadores a usar HTTPS siempre.
X-Frame-Options previene el clickjacking.
X-Content-Type-Options evita ataques de tipo MIME sniffing.
Puedes configurarlas en .htaccess (Apache), en la configuración de Nginx, o usando un módulo.
Verifica siempre con herramientas como SecurityHeaders.com.

Si tienes alguna duda o tu caso es más complejo (por ejemplo, si