El uso de http://localhost para el desarrollo local es adecuado la mayor parte del tiempo, excepto en algunos casos especiales. En esta publicación, se explica cuándo debes ejecutar tu sitio de desarrollo local con HTTPS.
Consulta también Cómo usar HTTPS para el desarrollo local.
En esta publicación, las afirmaciones sobre localhost
también son válidas para 127.0.0.1
y [::1]
, ya que ambas describen la dirección de la computadora local, también llamada "dirección de bucle invertido". Además, para simplificar, no se especifica el número de puerto.
Por lo tanto, cuando veas http://localhost
, léelo como http://localhost:{PORT}
o http://127.0.0.1:{PORT}
.
Resumen
Cuando desarrolles de forma local, usa http://localhost
de forma predeterminada. Los trabajadores del servicio, la API de Web Authentication y mucho más funcionarán.
Sin embargo, en los siguientes casos, necesitarás HTTPS para el desarrollo local:
- Cómo depurar problemas de contenido mixto
- Usa HTTP/2 y versiones posteriores
- Usar bibliotecas o APIs de terceros que requieran HTTPS
Usa un nombre de host personalizado
✨ Esto es todo lo que necesitas saber. Si te interesa obtener más detalles, sigue leyendo.
Por qué tu sitio de desarrollo debe comportarse de forma segura
Para evitar problemas inesperados, debes asegurarte de que tu sitio de desarrollo local se comporte lo más parecido posible a tu sitio web de producción. Por lo tanto, si tu sitio web de producción usa HTTPS, debes hacer que tu sitio de desarrollo local se comporte como un sitio HTTPS.
Usar http://localhost
de forma predeterminada
Los navegadores tratan http://localhost
de una manera especial: aunque es HTTP, se comporta principalmente como un sitio HTTPS.
En http://localhost
, se admiten los trabajadores de servicio, las APIs de sensores, las APIs de autenticación, los pagos y otras funciones que requieren ciertas garantías de seguridad, y se comportan exactamente como en un sitio HTTPS.
Cuándo usar HTTPS para el desarrollo local
Es posible que encuentres casos especiales en los que http://localhost
no se comporte como un sitio HTTPS, o simplemente quieras usar un nombre de sitio personalizado que no sea http://localhost
.
Debes usar HTTPS para el desarrollo local en los siguientes casos:
- Debes depurar de forma local un problema que solo ocurre en un sitio web HTTPS, pero no en un sitio HTTP, ni siquiera en
http://localhost
, como un problema de contenido mixto. - Debes probar o reproducir de forma local un comportamiento específico de HTTP/2 o versiones posteriores. Por ejemplo, si necesitas probar el rendimiento de carga en HTTP/2 o versiones posteriores. No se admite HTTP/2 no seguro ni versiones posteriores, ni siquiera en
localhost
. - Debes probar de forma local las bibliotecas o APIs de terceros que requieren HTTPS (por ejemplo, OAuth).
No estás usando
localhost
, sino un nombre de host personalizado para el desarrollo local, por ejemplo,mysite.example
. Por lo general, esto significa que anulaste tu archivo hosts local:En este caso, Chrome, Edge, Safari y Firefox no consideran que
mysite.example
es seguro de forma predeterminada, a pesar de que es un sitio local. Por lo tanto, no se comportará como un sitio HTTPS.Otros casos Esta no es una lista exhaustiva, pero si encuentras un caso que no aparece aquí, sabrás que se producirán errores en
http://localhost
o que no se comportará como tu sitio de producción. 🙃
En todos estos casos, debes usar HTTPS para el desarrollo local.
Cómo usar HTTPS para el desarrollo local
Si necesitas usar HTTPS para el desarrollo local, consulta Cómo usar HTTPS para el desarrollo local.
Sugerencias si usas un nombre de host personalizado
Si usas un nombre de host personalizado, por ejemplo, editando el archivo hosts, haz lo siguiente:
- No uses un nombre de host sin formato, como
mysite
, porque si hay un dominio de nivel superior (TLD) que tiene el mismo nombre (mysite
), tendrás problemas. Y no es tan improbable: en 2020, hay más de 1,500 TLD, y la lista sigue creciendo.coffee
,museum
,travel
y muchos nombres de empresas grandes (¡tal vez incluso la empresa en la que trabajas!) son TLD. Consulta la lista completa aquí. - Usa solo dominios que sean tuyos o que estén reservados para este fin. Si no tienes tu propio dominio, puedes usar
test
olocalhost
(mysite.localhost
).test
no tiene un tratamiento especial en los navegadores, perolocalhost
sí: Chrome y Edge admitenhttp://<name>.localhost
de forma predeterminada, y se comportará de forma segura cuando lo haga localhost. Pruébala: ejecuta cualquier sitio en localhost y accede ahttp://<whatever name you like>.localhost:<your port>
en Chrome o Edge. Es posible que pronto también sea posible en Firefox y Safari. La razón por la que puedes hacer esto (tener subdominios comomysite.localhost
) es porquelocalhost
no es solo un nombre de host: también es un TLD completo, comocom
.
Más información
Muchas gracias a todos los revisores por sus contribuciones y comentarios, en especial a Ryan Sleevi, Filippo Valsorda, Milica Mihajlija, Rowan Merewood y Jake Archibald. 🙌
Imagen hero de @moses_lee en Unsplash, editada.