Cómo Configurar HTTPS en Local para Tu Proyecto

Configurar HTTPS en el entorno local es una práctica recomendada para simular el entorno de producción, evitar errores de contenido mixto y habilitar funciones avanzadas. En esta guía, te mostraré cómo configurar HTTPS para tu proyecto local utilizando mkcert.

Ventajas de Usar HTTPS en Localhost

1. Simula el Entorno de Producción

Usar HTTPS en desarrollo te ayuda a detectar problemas relacionados con seguridad, como contenido mixto o configuraciones erróneas, antes de llegar a producción.

2. Habilita Funciones Avanzadas

Algunas APIs y navegadores requieren HTTPS para funciones como:

Service Workers y PWA (Aplicaciones Web Progresivas).
Geolocalización.
WebRTC.
Notificaciones Push.

3. Evita Dependencias Inseguras

Forzar HTTPS previene errores relacionados con contenido mixto al asegurar que todos los recursos se carguen de manera segura.

4. Mejora la Seguridad Local

Aunque en localhost el riesgo es bajo, HTTPS protege datos sensibles contra posibles ataques en redes compartidas.

5. Cumple con Normativas y Buenas Prácticas

Configurar HTTPS desde el inicio asegura que tu proyecto siga estándares modernos desde el principio.

Requisitos Previos

Antes de empezar, necesitas lo siguiente:

mkcert instalado: Puedes encontrar las instrucciones de instalación en su página oficial aquí.
Permisos de administrador: Necesarios para configurar la autoridad de certificación local.

Pasos para Configurar HTTPS

1. Instala la Autoridad de Certificación Local

Después de instalar mkcert, ejecuta el siguiente comando para crear una autoridad de certificación local:

mkcert - install

2. Genera Certificados

Dentro de tu proyecto, crea una carpeta llamada ssl:

mkdir ssl 
cd ssl

2. Genera los certificados para localhost:

mkcert localhost

Esto generará dos archivos:

localhost.pem (Certificado).
localhost-key.pem (Clave privada).

3. Configura Angular para HTTPS

Abre el archivo angular.json en la raíz de tu proyecto.

2. Busca la sección serve y agrega la configuración para habilitar HTTPS:

"serve": {
  "options": {
    "ssl": true,
      "sslCert": "./ssl/localhost.pem",
        "sslKey": "./ssl/localhost-key.pem"
  }
}

4. Inicia el Proyecto con HTTPS

Ejecuta tu proyecto con el siguiente comando:

ng serve

Ahora podrás acceder a tu aplicación en https://localhost:4200

Solución de Problemas Comunes

Certificado No Confiable: Al instalar la autoridad de certificación local, tu navegador debería confiar automáticamente en los certificados generados. Si ves advertencias, verifica que mkcert -install se ejecutó correctamente.
Errores de CORS: Asegúrate de que las direcciones HTTP y HTTPS estén configuradas correctamente en el servidor y en las políticas CORS.
Alternativa a HTTPS: Si encuentras problemas que no puedes solucionar, ejecutar el proyecto en HTTP sigue siendo válido para la mayoría de las pruebas locales.

Conclusión

Configurar HTTPS en local no solo mejora la seguridad, sino que también prepara tu proyecto para entornos de producción más robustos. Con herramientas como mkcert, el proceso es rápido y accesible, incluso para desarrolladores principiantes.