Cuándo usar HTTPS para desarrollo local

Usar http://localhost para el desarrollo local suele ser adecuado, excepto en algunos casos especiales. En esta entrada, se explica cuándo debes ejecutar tu sitio de desarrollo local con HTTPS.

Maud Nalpas

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

En esta entrada, las declaraciones 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 que sea sencillo, 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:

  • Depurar problemas de contenido mixto
  • Usar HTTP/2 y versiones posteriores
  • Usar APIs o bibliotecas de terceros que requieran HTTPS

  • Usar 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 detalles, sigue leyendo.

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

Para evitar problemas inesperados, te recomendamos que tu sitio de desarrollo local se comporte de la manera más similar posible a tu sitio web de producción. Por lo tanto, si tu sitio web de producción usa HTTPS, te recomendamos que tu sitio de desarrollo local se comporte como un sitio HTTPS.

Usa 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 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 te encuentres con casos especiales en los que http://localhost no se comporte como un sitio HTTPS, o 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 ni versiones posteriores no seguras, ni siquiera en localhost.
  • Necesitas probar de forma local APIs o bibliotecas de terceros que requieran 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 de 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 lista no es exhaustiva, pero, si te encuentras con un caso que no aparece aquí, lo sabrás: las cosas se interrumpirán en http://localhost o 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, editas tu archivo de hosts:

  • No uses un nombre de host simple como mysite ya que, 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 TLDs, y la lista sigue creciendo. coffee, museum, travel y muchos nombres de empresas grandes (quizás incluso la empresa en la que trabajas) son TLDs. Consulta la lista completa aquí.
  • Usa solo los dominios que sean tuyos o que estén reservados para este propósito. Si no tienes un dominio propio, puedes usar test o localhost (mysite.localhost). test no tiene un tratamiento especial en los navegadores, pero localhost sí: Chrome y Edge admiten http://<name>.localhost de inmediato, 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. Es posible que esto también sea posible en Firefox y Safari en breve. 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

Muchas gracias por sus contribuciones y comentarios a todos los revisores, en especial a Ryan Sleevi, Filippo Valsorda, Milica Mihajlija, Rowan Merewood y Jake Archibald. 🙌

Imagen hero de @moses_lee en Unsplash, editada.