Certificado SSL y HTTPS en Localhost (XAMPP)

Desarrollar proyectos web en un entorno local sin cifrado suele provocar bloqueos de APIs modernas (como geolocalización o pagos), errores en el almacenamiento de cookies seguras y el molesto aviso de "La conexión no es privada" en los navegadores. Por defecto, Apache se ejecuta bajo el protocolo HTTP en el puerto 80, pero es posible configurar un entorno seguro con cifrado TLS/SSL. En esta guía técnica paso a paso aprenderás cómo habilitar HTTPS en Localhost con XAMPP, generar un certificado SSL autofirmado de confianza y eliminar las alertas de seguridad en Google Chrome y Microsoft Edge.

¿Por qué es indispensable trabajar con HTTPS en Localhost?

Hace unos años bastaba con programar bajo http://localhost, pero los estándares modernos de desarrollo web exigen conexiones seguras incluso en entornos de desarrollo local:

• APIs de JavaScript restringidas: Tecnologías como Service Workers (para Progressive Web Apps), Web Bluetooth, acceso a cámara/micrófono y ciertas funciones de autenticación OAuth requieren obligatoriamente un contexto seguro (HTTPS).
• Cookies con atributo SameSite y Secure: Si pruebas pasarelas de pago, inicios de sesión o tiendas online en local, los navegadores rechazan las cookies de sesión si el protocolo no es HTTPS.
• Evitar inconsistencias al pasar a producción: Detectar problemas de contenido mixto (Mixed Content) en local antes de publicar la web evita que imágenes o fuentes no carguen en el servidor real.

Paso 1: Crear el archivo de configuración para el certificado local

Para evitar que el navegador marque el certificado como inválido por falta de nombres alternativos del sujeto (SAN), crearemos una plantilla de configuración:

1. Navega hasta la carpeta de instalación de Apache en XAMPP, habitualmente en: C:\xampp\apache\.
2. Crea un nuevo archivo de texto y nómbralo cert-localhost.conf.
3. Pega dentro la siguiente configuración técnica:

[req]
default_bits = 2048
prompt = no
default_md = sha256
x509_extensions = req_ext
req_extensions = req_ext
distinguished_name = dn

[dn]
C = ES
ST = Madrid
L = Madrid
O = JCWeb Entorno Local
OU = Desarrollo
CN = localhost

[req_ext]
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost
IP.1 = 127.0.0.1

Paso 2: Generar el certificado SSL mediante OpenSSL

XAMPP incluye el binario de OpenSSL listo para usar dentro de su propia instalación:

1. Abre el Símbolo del sistema (CMD) o PowerShell como administrador.
2. Sitúate en el directorio de Apache ejecutando:

   cd C:\xampp\apache

3. Genera la clave privada y el certificado autofirmado con validez para 365 días ejecutando este comando en una sola línea:

   bin\openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout conf\ssl.key\server.key -out conf\ssl.crt\server.crt -config cert-localhost.conf

4. Esto creará dos archivos listos en las carpetas de XAMPP:
   • conf/ssl.key/server.key (Tu clave privada)
   • conf/ssl.crt/server.crt (Tu certificado público)

Paso 3: Instalar el certificado en Windows para que sea de confianza

Aunque el certificado ya está generado, los navegadores seguirán marcando alerta roja porque no reconocen a tu ordenador como una autoridad certificadora oficial. Para validar la firma:

1. Abre el explorador de Windows y ve a la ruta C:\xampp\apache\conf\ssl.crt\.
2. Haz doble clic sobre el archivo server.crt.
3. En la ventana emergente, pulsa en el botón "Instalar certificado...".
4. Selecciona la opción "Equipo local" y pulsa en Siguiente.
5. Marca la casilla "Colocar todos los certificados en el siguiente almacén" y haz clic en Examinar.
6. Selecciona la carpeta: "Entidades de certificación raíz de confianza" y pulsa en Aceptar.
7. Completa el asistente pulsando en Siguiente y luego en Finalizar. Aparecerá un mensaje confirmando que la importación se completó correctamente.

Paso 4: Activar el VirtualHost SSL en Apache

Comprueba que la configuración de Apache apunta correctamente a los nuevos archivos de certificado:

1. Abre el panel de XAMPP y haz clic en el botón Config junto a Apache.
2. Selecciona Apache (httpd-ssl.conf).
3. Verifica que las siguientes directivas apuntan a tus archivos recién creados (o descoméntalas si tienen un # al inicio):

   SSLCertificateFile "conf/ssl.crt/server.crt"
   SSLCertificateKeyFile "conf/ssl.key/server.key"

4. Guarda el archivo y, en el panel de XAMPP, pulsa en Stop y luego en Start en el módulo Apache para reiniciar el servidor.

Paso 5: Comprobar el candado seguro en el navegador

1. Cierra todas las ventanas de tu navegador para limpiar la memoria de certificados previos.
2. Abre tu navegador y entra en: https://localhost.
3. Verás que el aviso en rojo desaparece y en su lugar se muestra el candado cerrado o el indicador de conexión segura sin advertencias.

Preguntas frecuentes

¿Por qué Google Chrome sigue mostrando "No seguro" tras instalar el certificado?

Si tras instalar el certificado en Windows, Chrome sigue mostrando la advertencia, suele deberse a que el navegador almacena en caché las respuestas SSL anteriores. Reinicia el navegador por completo escribiendo chrome://restart en la barra de direcciones o comprueba que en el paso 1 definiste correctamente el bloque [alt_names] con DNS.1 = localhost.

¿Puedo utilizar este certificado para subirlo a mi página web en internet?

No. Los certificados autofirmados solo son válidos para pruebas en tu propio ordenador donde tienes acceso para instalar la autoridad raíz. En un servidor web público en internet debes utilizar siempre certificados emitidos por autoridades reconocidas mundialmente, como Let's Encrypt, DigiCert o Sectigo.

Si quieres conocer otros artículos parecidos a Certificado SSL y HTTPS en Localhost (XAMPP) puedes visitar la categoría Desarrollo y Programación.