internet screen security protection

Cómo crear SSL válido en localhost para XAMPP + red local

Las actualizaciones del navegador Chrome se han convertido en un obstáculo para el desarrollo local. No solo decidieron deshabilitar el dominio .dev para el desarrollo local, sino que también tienen una configuración específica en el certificado SSL para mostrar el sitio como seguro. Y otros frameworks y aplicaciones ya no establecen conexiones con http sin ssl.

En este tutorial paso a paso, intentaré explicar como crear un certificado SSL localmente para usarlo en XAMPP, probado en Windows 7 y Windows 10.

En mi instalación de XAMPP, básicamente tengo un clon de todos los sitios que administro. Y todos ellos (por supuesto) usan SSL / HTTPS.

Aquí está la guía paso a paso:
En este paso vamos a crear SSL y configurar el sitio web «site.test».

1. Navega al directorio de Apache en XAMPP.

En una instalación normal, está en C:\xampp\apache.

2. Crea una carpeta nueva

Aquí es donde almacenaremos nuestro certificado. En este ejemplo, crearé la carpeta «crt».
Entonces tendremos C:\xampp\apache\crt

3. Agrega estos archivos

Descarga estos archivos a la carpeta que hemos creado «C:\xampp\apache\crt«.

4. Edita cert.conf y ejecuta make-cert.bat

Abre el archivo cert.conf en un editor de texto plano o block de notas. Cambia el campo o texto de {{DOMAIN}} usando el dominio que queremos, en este caso site.test o el que prefieras y guardar.

Haz doble clic en make-cert.bat e ingresa el dominio site.test cuando se te solicite. Y simplemente dale ENTER en las preguntas, ya que ya configuramos el valor predeterminado en el archivo cert.conf.

Generando ssl para Localhost

5. Instala el certificado en windows

Después de eso, verás la carpeta «site.test» creada en C:\xampp\apache\crt. En esa carpeta tendremos server.crt y server.key. Este es nuestro certificado SSL.

Haz doble clic en server.crt para instalarlo en Windows para que Windows pueda confiar en él. (Da igual si es windows 7 o Windows 10)

Y luego selecciona Equipo local como Ubicación del almacenamiento. (en algunos equipos no aparece la siguiente ventana, pasas a la siguiente)

Y luego selecciona «Colocar todos los certificados en el siguiente almacén» y haz clic en Examinar y selecciona Entidades de certificación raiz de confianza.

Haz clic en Siguiente y finalizar.

Y ahora este certificado está instalado y es de confianza en Windows. Puedes hacer esto con todos los dominios de prueba que necesites tener en local con ssl.

A continuación, se explica cómo usar este certificado en XAMPP.

6. Agrega el sitio en hosts de Windows

  1. Abre el bloc de notas (o cualquier editor de texto plano) como administrador.
  2. Edita C:\Windows\System32\drivers\etc\hosts (el archivo no tiene extensión)
  3. Agrega esto en una nueva línea:
127.0.0.1 site.test

Esto le dirá a Windows que cargue 127.0.0.1, localhost (XAMPP) cuando visitemos https://site.test. Puedes probar y mostrará la página del panel de XAMPP.

En red: Además, puedes configurar estos dominios para una IP de red, por ejemplo 192.168.1.4 y en este caso instale ssl en ambos ordenadores (servidor y cliente).

192.168.1.4 site.test

7. Agrega el sitio en XAMPP conf.

Necesitamos habilitar SSL para este dominio y dejar que XAMPP sepa dónde almacenamos el certificado SSL. Entonces necesitamos editar C:\xampp\apache\conf\extra\httpd-xampp.conf

Si estas instalando un servidor local en red, esta configuración será necesaria hacerla en equipo que funciona como servidor y no en los ordenadores cliente (pero en los ordenadores clientes si debes instalar el certificado).

Y agregue este código en la parte inferior:

## site.test
 <VirtualHost *:80>
     DocumentRoot "C:/xampp/htdocs"
     ServerName site.test
     ServerAlias *.site.test
 </VirtualHost>
 <VirtualHost *:443>
     DocumentRoot "C:/xampp/htdocs"
     ServerName site.test
     ServerAlias *.site.test
     SSLEngine on
     SSLCertificateFile "crt/site.test/server.crt"
     SSLCertificateKeyFile "crt/site.test/server.key"
 </VirtualHost>

Después de eso, deberás reiniciar Apache en XAMPP. Es muy simple, abre el Panel de control de XAMPP y STOP/START y así se reinicia el módulo Apache.

Consejo: en XAMPP conf, como habrás notado, puedes especificar el directorio raíz del dominio si es necesario. P.ej. como subdirectorio dentro de htdocs.

Así puedes tener varios dominios si lo necesitas

8. Reinicia tu navegador y listo.

Esto es necesario para cargar el certificado.
Ahora puedes visitar el dominio en tu navegador y verás un candado verde.

¡Espero que este tutorial te sea útil!

Si ya usas otro método, avísame en el comentario 🙂

fuente: https://shellcreeper.com/how-to-create-valid-ssl-in-localhost-for-xampp/

Notas:

Si estas usando Google Chrome en algunos casos no reconoce el certificado, puedes usar esta linea en el navegador, pega en la barra de direcciones:

chrome://flags/#allow-insecure-localhost

Esta solución puede servir para probar ejercicios como: Flutter + WordPress y ponerle fin al error de la uri sin https.


Publicado

en

, ,

Etiquetas:

Comentarios

44 respuestas

  1. Avatar de Carol
    Carol

    Buenísimo el articulo. Reciba un cordial saludo.

  2. Avatar de Daniel
    Daniel

    Me aparece como no seguro después de realizar estos pasos, cómo podría solucionarlo?

    1. Avatar de unFuturista

      ¿Aun te aparece? Esto normalmente se soluciona reiniciando el navegador. Asegurate de que se instaló correctamente el certificado.

  3. Avatar de German Jurado Cano
    German Jurado Cano

    No se puede visualizar los contenidos para modificar el C:\xampp\apache\conf\extra\httpd-xampp.conf, podrias colocarlos de otra manera para poderlos ver.

    1. Avatar de unFuturista

      Listo. Intenta ahora de nuevo.

  4. Avatar de Sergi
    Sergi

    A mi tampoco me ha funcionado. Sigue mostrando no seguro.

    1. Avatar de unFuturista

      Hola. Perdón por la demora. ¿Lograste resolverlo?

  5. Avatar de Marvin Calvo Acuña
    Marvin Calvo Acuña

    Excelente tutorial. Me ayudo gracias.

    1. Avatar de unFuturista

      Genial. Gracias comentar, es bueno saber que el tutorial está vigente.

  6. Avatar de Jorge Arias

    Hola. no he podido. Me sigue saliendo no seguro.
    whatsapp: 506-88177575 (Costa Rica)

  7. Avatar de Antonio
    Antonio

    ¡ Excelente !
    Lo explicas tan bien que me ha salido a la primera.
    ¿ Podría acceder al Xampp (servidor web local y al servidor local MySQL), desde una aplicación en un teléfono móvil con sistema Android ?
    Muchas gracias

    1. Avatar de unFuturista

      Si, debes habilitar la conexión para red en xamp.
      luego en tu aplicación probablemente deberás agregar «usesCleartextTraffic» al AndroidManifest.xml a menos que logres instalar el certificado en tu dispositivo. En otros PC de la red te funcionará sin problemas.

      info: https://stackoverflow.com/questions/45940861/android-8-cleartext-http-traffic-not-permitted

      1. Avatar de Antonio
        Antonio

        Muchas gracias Futurista por tu valiosa información.
        Recibe un cordial saludo

  8. Avatar de Andres
    Andres

    hola me podía conectar a la BD pero no podía generar esquemas de las tablas, hice lo que mencionas y ahora no me puedo siquiera conectar al servidor…podrías ayudarme a restablecer?

    1. Avatar de unFuturista

      Hola, porfavor revisa que no hayas comentado o descomentado alguna linea.
      Si esto persiste, se debe a corrupción en los archivos, te recomendaría reinstalar xampp

  9. Avatar de victor
    victor

    A mi me da este error al ejecutar el archivo bat:
    El sistema no puede encontrar la ruta especificada.

    1. Avatar de unFuturista

      haz revisado que las rutas coincidan con las de tu equipo?

      1. Avatar de zoe
        zoe

        C:\xampp\apache\crt pues si esta en la ruta del tutorial y a mi me marcó lo mismo

  10. Avatar de Daniel
    Daniel

    No consigo ingresar vía https, me aparece no disponible y haciendo los pasos 1 por 1 perfectamente. Cómo podría resolverlo?
    Yo utilizo tanto ip local cómo pública, ya que accedo a través de otros sitios.

    1. Avatar de unFuturista

      Hola. Esto se resuelve instalando el certificado en la maquina del cliente. Intenta instalar el certificado que haz creado en el servidor. Si sigue sin resolver, genera un certificado en la maquina del cliente hacia la IP.

      1. Avatar de Daniel
        Daniel

        El caso és que no está funcionando ni en servidor, ni en cliente.
        Al entrar en https://site.test desde el servidor, aparece ERR_CONNECTION_REFUSED

        Esto habiendo intentado en varias ocasiones su instalación.

        1. Avatar de Donald Cho

          Hola. No se si aun tienes estos inconvenientes. Parece ser más un tema de configuración de la red. Revisa que tengas activos los permisos Allow en apache

  11. Avatar de Jose
    Jose

    Tengo instalado en una computadora Windows 10 el certificado y configurado un host, necesito acceder desde otra compu al host, lo que estoy haciendo es configurar el host a la ip de la que funciona como servidor sin embargo el ssl no lo reconoce cuando trato de acceder desde otra.

    1. Avatar de iimm

      hola, debes instalar el certificado también en el otro pc.
      si esto no funciona, genera un certificado en el otro pc para la ip del pc principal.

  12. Avatar de Alejandro
    Alejandro

    Hola! Esto sirve para conectarse con ssl entre pcs de una misma red? tengo una maquina con tomcat en un servidor y queremos que las demas se conecten por el broser a la aplicación y se mantenga segura… Va a servir? Gracias!

    1. Avatar de iimm

      Si. Solo deben instalar el certificado generado en los PCs de la red. O pueden crear un certificado en cada PC, apuntando a la IP del servidor.

  13. Avatar de Eäreddhel
    Eäreddhel

    Al hacerlo tal cual indica la guía al reiniciar Apache Xampp da un error. La solución fue la siguiente: en lugar de agregar el host virtual en el paso 7 a «httpd-xampp.conf» lo agregué en el archivo «httpd-vhosts». Reiniciar apache luego de esto no lo habilita (al menos en mi caso) y fue necesario reiniciar el pc. Y listo. A disfrutar.

    1. Avatar de iimm

      Excelente, agregaré esta sugerencia al post.

  14. Avatar de andres

    me ha funcionado perfecto para la fecha 29/04/2023 gracias!

    1. Avatar de iimm

      me alegra saber que te ha funcionado!

  15. Avatar de Kenneth
    Kenneth

    Buenas! por si alguno tuvo problemas con chrome o sus derivados (de chromium en realidad) y en firefox si les funciona bien, les dejo un flag que tienen que habilitar

    chrome://flags/#allow-insecure-localhost

    Saludos!

    1. Avatar de iimm

      Gracias por el dato Kenneth!

  16. Avatar de Devivan
    Devivan

    Segui los pasos, paso a paso, pero no logro hacer que se pueda navegar con SSL, en el navegador me sigue apareciendo que no es seguro, cuando trato de ver el certificado me dice «El certificado no es válido» ¿Cómo puedo solicionarlo?

    1. Avatar de iimm

      que navegador estas usando?

  17. Avatar de Eric
    Eric

    Perfecto, muchas gracias. tenía muchos problemas con chrome.

  18. Avatar de Alfredo
    Alfredo

    Hola, el enlace para descarga del archivo make-cert.bat no funciona y no lo descarga. Me puedes ayudar por favor.
    Gracias

    1. Avatar de datogedon
      datogedon

      Hola. Solo debes copiar el codigo y pegarlo en un archivo make-cert.bat. Puedes hacerlo con el block de notas.

  19. Avatar de A Salas
    A Salas

    como puedes hacer que los equipos en red acepten el certificado sin necesidad de instalarlo

    1. Avatar de datogedon
      datogedon

      No puedes hacer eso en una red local. Pero puedes considerar estas opciones:

      a) Utilizar un certificado de entidad certificadora interna:
      Puedes configurar tu propia Autoridad de Certificación (CA) interna y emitir certificados para tu red local. Luego, puedes distribuir la clave pública de tu CA a todos los equipos en la red. Los certificados firmados por tu CA serán automáticamente confiables para todos los equipos que confíen en tu CA.

      b) Política de grupo (Group Policy):
      Si estás en un entorno empresarial, puedes utilizar la Política de Grupo para distribuir automáticamente el certificado raíz a todos los equipos en la red. Esto garantiza que todos los equipos confíen en el certificado sin intervención manual.

  20. Avatar de Catalina O
    Catalina O

    Gracias, me ha funcionado perfecto para la fecha 17/03/2024!

    1. Avatar de Datogedon

      Excelente! Gracias por comentar.

  21. Avatar de Marcos
    Marcos

    hola, quiero instalar el certificado en android pero me tira error en instalacion, adjunte ambos archivos el server y la key en un archibo bat pero me tira error, que hago :((

  22. Avatar de Alan Dev
    Alan Dev

    Fua hermano, me funcionó todo a la primera.
    Me perdi cuando quise instalar el certificado en otra PC que esta conectada localmente al servidor. No podia pq tengo w11 en dicha pc, entonces no me dejaba avanzar en el paso 4.
    Entonces se me ocurrio copiar y pegar el certificado en la otra pc, instalarlo asi y funciono jajajajajjaj. Saludos a todos, prueben que funciona todo!

    1. Avatar de Datogedon

      Excelente aporte. Gracias.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *