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».
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.


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
- Abre el bloc de notas (o cualquier editor de texto plano) como administrador.
- Edita C:\Windows\System32\drivers\etc\hosts (el archivo no tiene extensión)
- 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
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/
Esta solución puede servir para probar ejercicios como: Flutter + WordPress y ponerle fin al error de la uri sin https.
Buenísimo el articulo. Reciba un cordial saludo.
Me aparece como no seguro después de realizar estos pasos, cómo podría solucionarlo?
¿Aun te aparece? Esto normalmente se soluciona reiniciando el navegador. Asegurate de que se instaló correctamente el certificado.
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.
Listo. Intenta ahora de nuevo.
A mi tampoco me ha funcionado. Sigue mostrando no seguro.
Hola. Perdón por la demora. ¿Lograste resolverlo?
Excelente tutorial. Me ayudo gracias.
Genial. Gracias comentar, es bueno saber que el tutorial está vigente.
Hola. no he podido. Me sigue saliendo no seguro.
whatsapp: 506-88177575 (Costa Rica)
¡ 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
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
Muchas gracias Futurista por tu valiosa información.
Recibe un cordial saludo
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?
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
A mi me da este error al ejecutar el archivo bat:
El sistema no puede encontrar la ruta especificada.
haz revisado que las rutas coincidan con las de tu equipo?
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.
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.
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.
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
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.
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.
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!
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.