Cuándo usar HTTPS para desarrollo local

El uso de http://localhost para el desarrollo local está bien la mayor parte del tiempo, excepto en algunos casos especiales. En esta publicación, se explica cuándo necesitas ejecutar tu sitio de desarrollo local con HTTPS.

Maud Nalpas
Maud Nalpas
X GitHub

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

En esta publicación, las sentencias 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 denominada "dirección de bucle invertido". Además, para simplificar el proceso, 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 realices desarrollos locales, usa http://localhost de forma predeterminada. Funcionarán los Service Workers, la API de Web Authentication y muchos más. Sin embargo, en los siguientes casos, necesitarás HTTPS para el desarrollo local:

  • Configurar cookies seguras de forma coherente en todos los navegadores
  • Cómo depurar problemas de contenido mixto
  • Usa HTTP/2 y versiones posteriores
  • Usar bibliotecas de terceros o APIs que requieran HTTPS

  • Usa un nombre de host personalizado

    Una lista de casos en los que necesitas usar HTTPS para el desarrollo local.
    Cuándo usar HTTPS para desarrollo local.

✨ Esto es todo lo que necesitas saber. Si quieres conocer más detalles, sigue leyendo.

Por qué tu sitio de desarrollo debería tener un comportamiento seguro

Para evitar problemas inesperados, recomendamos que tu sitio de desarrollo local se comporte tanto como sea posible como 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, los Service Workers, las APIs de Sensor, las APIs de Authentication, los Pagos y otras funciones que requieren ciertas garantías de seguridad son compatibles y se comportan exactamente como en un sitio HTTPS.

Cuándo usar HTTPS para desarrollo local

Es posible que encuentres casos especiales en los que http://localhost no se comporte como un sitio HTTPS, o bien tal vez solo quieras usar un nombre de sitio personalizado que no sea http://localhost.

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

  • Debes configurar una cookie localmente que sea Secure, SameSite:none o tenga el prefijo __Host. Las cookies de Secure se establecen solo en HTTPS, pero no en http://localhost para todos los navegadores. Además, dado que SameSite:none y __Host también requieren que la cookie sea Secure, configurar esas cookies en tu sitio de desarrollo local también requiere HTTPS.

  • 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 localmente un comportamiento específico en HTTP/2 o versiones posteriores. Por ejemplo, si necesitas probar el rendimiento de carga en HTTP/2 o versiones posteriores. No se admiten HTTP/2 o versiones posteriores no seguras, ni siquiera en localhost.

  • Debes 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 hosts locales:

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

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

  • Otros casos Esta lista no es exhaustiva, pero, si encuentras un caso que no se indica aquí, sabrás que el comportamiento no funciona el 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, para editar el archivo 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 TLD y la lista sigue creciendo. coffee, museum, travel y muchos nombres grandes de empresas (incluso la empresa en la que trabajas) son TLD. Consulte la lista completa aquí.
  • Usa solo dominios que sean tuyos o que estén reservados para este fin. Si no tienes un dominio propio, puedes usar test o localhost (mysite.localhost). test no tiene un tratamiento especial en navegadores, pero localhost sí lo tiene: Chrome y Edge admiten http://<name>.localhost de inmediato y se comportarán de forma segura cuando localhost lo haga. 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 pronto también sea 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: también es un TLD completo, como com.

Más información

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

Hero image de @moses_lee en Unsplash, editada.