Cuándo usar HTTPS para desarrollo local

Usar http://localhost para el desarrollo local está bien la mayoría de las veces, excepto en algunos casos especiales. En esta entrada, se explica cuándo necesitas ejecutar tu sitio de desarrollo local con HTTPS.

Maud Nalpas

Consulta también Cómo usar HTTPS para el desarrollo local.

En esta publicación, las declaraciones sobre localhost también son válidas para 127.0.0.1 y [::1], ya que ambos describen la dirección de la computadora local, también llamada "dirección de bucle invertido". Además, para simplificar las cosas, 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 Service Workers, la API de Web Authentication y otros elementos 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 APIs o bibliotecas de terceros que requieren HTTPS

  • Usa un nombre de host personalizado

    Lista de casos en los que debes usar HTTPS para el desarrollo local.
    Cuándo usar HTTPS para el desarrollo local.

✨ Esto es todo lo que necesitas saber. Si te interesa obtener más información, sigue leyendo.

Por qué tu sitio de desarrollo debe comportarse de forma segura

Para evitar problemas inesperados, es conveniente 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, querrás que tu sitio de desarrollo local se comporte como un sitio HTTPS.

Usar http://localhost de forma predeterminada

Los navegadores tratan a http://localhost de una manera especial: aunque es HTTP, se comporta principalmente como un sitio HTTPS.

En http://localhost, se admiten los Service Workers, las APIs de Sensor, las APIs de Authentication, los pagos y otras funciones que requieren ciertas garantías de seguridad, y se comportan exactamente igual que 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 bien que simplemente quieras usar un nombre de sitio personalizado que no sea http://localhost.

Debes usar HTTPS para el desarrollo local en los siguientes casos:

  • Necesitas 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.
  • Necesitas 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.
  • Necesitas probar de forma local las bibliotecas o APIs de terceros que requieren HTTPS (por ejemplo, OAuth).

  • No usas localhost, sino un nombre de host personalizado para el desarrollo local, por ejemplo, mysite.example. Por lo general, esto significa que anulaste tu archivo de hosts local:

    Captura de pantalla de una terminal que edita un archivo hosts
    Edición de un archivo hosts para agregar un nombre de host personalizado.

    En este caso, Chrome, Edge, Safari y Firefox no consideran que mysite.example sea seguro de forma predeterminada, aunque sea un sitio local. Por lo tanto, no se comportará como un sitio HTTPS.

  • ¡Otros casos! Esta no es una lista exhaustiva, pero, si te encuentras con un caso que no se menciona aquí, sabrás que las cosas no funcionarán 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, si editas tu archivo de hosts, haz lo siguiente:

  • No uses un nombre de host simple, 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 (quizás incluso la empresa en la que trabajas) son TLD. Consulta la lista completa aquí.
  • Usa solo los dominios que te pertenecen o que están reservados para este propósito. Si no tienes tu propio dominio, puedes usar test o localhost (mysite.localhost). test no recibe un tratamiento especial en los navegadores, pero localhost sí: Chrome y Edge admiten http://<name>.localhost de forma predeterminada, y se comportará de forma segura cuando lo haga localhost. Pruébalo: ejecuta cualquier sitio en localhost y accede a http://<whatever name you like>.localhost:<your port> en Chrome o Edge. Pronto, esto también será posible en Firefox y Safari. El motivo por el que puedes hacer esto (tener subdominios como mysite.localhost) es que localhost no es solo un nombre de host, sino también un TLD completo, como com.

Más información

Agradecemos las contribuciones y los comentarios de todos los revisores, en especial de Ryan Sleevi, Filippo Valsorda, Milica Mihajlija, Rowan Merewood y Jake Archibald. 🙌

Imagen hero de @moses_lee en Unsplash, editada.