Usa HTTPS para el desarrollo local

Maud Nalpas

La mayoría de las veces, http://localhost se comporta como HTTPS para fines de desarrollo. Sin embargo, existen algunos casos especiales, como los nombres de host personalizados o el uso de cookies seguras en todos los navegadores, en los que debes configurar explícitamente tu sitio de desarrollo para que se comporte como HTTPS y represente con precisión cómo funciona tu sitio en producción. (Si tu sitio web de producción no usa HTTPS, prioriza el cambio a HTTPS).

En esta página, se explica cómo ejecutar tu sitio de forma local con HTTPS.

Para obtener instrucciones breves, consulta la referencia rápida de mkcert.**

Ejecuta tu sitio de forma local con HTTPS usando mkcert (recomendado)

Para usar HTTPS con tu sitio de desarrollo local y acceder a https://localhost o https://mysite.example (nombre de host personalizado), necesitas un certificado TLS firmado por una entidad en la que confíen tu dispositivo y tu navegador, llamada autoridad certificada (CA) de confianza. El navegador verifica si el certificado de tu servidor de desarrollo está firmado por una AC de confianza antes de crear una conexión HTTPS.

Te recomendamos que uses mkcert, una CA multiplataforma, para crear y firmar tu certificado. Para conocer otras opciones útiles, consulta Ejecuta tu sitio de forma local con HTTPS: otras opciones.

Muchos sistemas operativos incluyen bibliotecas para crear certificados, como openssl. Sin embargo, son más complejas y menos confiables que mkcert, y no necesariamente son multiplataforma, lo que las hace menos accesibles para los equipos de desarrollo más grandes.

Configuración

1. Instala mkcert (solo una vez).

   Sigue las instrucciones para instalar mkcert en tu sistema operativo. Por ejemplo, en macOS, haz lo siguiente:

   brew install mkcert
   brew install nss # if you use Firefox
   

2. Agrega mkcert a las entidades certificadoras raíz locales.

   En tu terminal, ejecuta el siguiente comando:

   mkcert -install
   

   Esto genera una autoridad certificadora (CA) local. Tu CA local generada por mkcert solo es de confianza localmente, en tu dispositivo.

3. Genera un certificado para tu sitio, firmado por mkcert.

   En la terminal, navega al directorio raíz de tu sitio o al directorio en el que quieras guardar el certificado.

   Luego, ejecuta lo siguiente:

   mkcert localhost
   

   Si usas un nombre de host personalizado, como mysite.example, ejecuta el siguiente comando:

   mkcert mysite.example
   

   Este comando realiza dos acciones:

   • Genera un certificado para el nombre de host que especificaste.
   • Permite que mkcert firme el certificado.

   Tu certificado ya está listo y firmado por una autoridad certificadora en la que tu navegador confía de forma local.

4. Configura tu servidor para que use HTTPS con el certificado TLS que acabas de crear.

   Los detalles para hacerlo dependen de tu servidor. A continuación, se muestran algunos ejemplos:

   👩🏻‍💻 Con nodo:

   server.js (reemplaza {PATH/TO/CERTIFICATE...} y {PORT}):

   const https = require('https');
   const fs = require('fs');
   const options = {
     key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'),
     cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'),
   };
   https
     .createServer(options, function (req, res) {
       // server code
     })
     .listen({PORT});
   

   👩🏻‍💻 Con http-server:

   Inicia el servidor de la siguiente manera (reemplaza {PATH/TO/CERTIFICATE...}):

   http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
   

   -S ejecuta tu servidor con HTTPS, mientras que -C establece el certificado y -K establece la clave.

   👩🏻‍💻 Con un servidor de desarrollo de React:

   Edita tu archivo package.json de la siguiente manera y reemplaza {PATH/TO/CERTIFICATE...}:

   "scripts": {
   "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
   

   Por ejemplo, si creaste un certificado para localhost en el directorio raíz de tu sitio, haz lo siguiente:

   |-- my-react-app
       |-- package.json
       |-- localhost.pem
       |-- localhost-key.pem
       |--...
   

   Luego, tu secuencia de comandos de start debería verse así:

   "scripts": {
       "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
   

   👩🏻‍💻 Otros ejemplos:

   • Servidor de desarrollo de Angular
   • Python

5. Abre https://localhost o https://mysite.example en tu navegador para verificar que tu sitio se ejecute de forma local con HTTPS. No verás ninguna advertencia del navegador, ya que este confía en mkcert como una autoridad de certificación local.

Referencia rápida de mkcert

Referencia rápida de mkcert

Para ejecutar tu sitio de desarrollo local con HTTPS, haz lo siguiente:

1. Configura mkcert.

   Si aún no lo hiciste, instala mkcert, por ejemplo, en macOS:

   brew install mkcert
   
   
   

   Consulta install mkcert para obtener instrucciones para Windows y Linux.

   Luego, crea una autoridad certificadora local:

   mkcert -install

2. Crea un certificado de confianza.

   mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}

   Esto crea un certificado válido que mkcert firma automáticamente.

3. Configura tu servidor de desarrollo para que use HTTPS y el certificado que creaste en el paso 2.

Ahora puedes acceder a https://{YOUR HOSTNAME} en tu navegador sin advertencias.

</div>

Ejecuta tu sitio de forma local con HTTPS: otras opciones

A continuación, se indican otras formas de configurar tu certificado. Por lo general, son más complicados o riesgosos que usar mkcert.

Certificado autofirmado

También puedes decidir no usar una autoridad certificadora local, como mkcert, y, en su lugar, firmar tu certificado por tu cuenta. Este enfoque tiene algunas desventajas:

• Los navegadores no confían en ti como autoridad certificadora, por lo que mostrarán advertencias que deberás omitir de forma manual. En Chrome, puedes usar la marca #allow-insecure-localhost para omitir esta advertencia automáticamente en localhost.
• Esto no es seguro si trabajas en una red no segura.
• No es necesariamente más fácil ni más rápido que usar una CA local como mkcert.
• Los certificados autofirmados no se comportarán exactamente de la misma manera que los certificados de confianza.
• Si no usas esta técnica en el contexto de un navegador, debes inhabilitar la verificación de certificados para tu servidor. Si olvidas volver a habilitarla en producción, se generarán problemas de seguridad.

Si no especificas un certificado, las opciones HTTPS del servidor de desarrollo de React y Vue crean un certificado autofirmado de forma interna. Este método es rápido, pero incluye las mismas advertencias del navegador y otros inconvenientes de los certificados autofirmados. Afortunadamente, puedes usar la opción HTTPS integrada de los frameworks de frontend y especificar un certificado de confianza local creado con mkcert o una herramienta similar. Para obtener más información, consulta el ejemplo de mkcert con React.

¿Por qué los navegadores no confían en los certificados autofirmados?

Si abres tu sitio que se ejecuta de forma local en tu navegador a través de HTTPS, el navegador verificará el certificado de tu servidor de desarrollo local. Cuando ve que usted mismo firmó el certificado, verifica si está registrado como una autoridad certificadora de confianza. Como no lo eres, tu navegador no puede confiar en el certificado y muestra una advertencia que indica que tu conexión no es segura. Si continúas, se creará la conexión HTTPS, pero lo harás bajo tu propia responsabilidad.

Certificado firmado por una autoridad certificadora normal

También puedes usar un certificado firmado por una CA oficial. Esto conlleva las siguientes complicaciones:

• Tienes más trabajo de configuración que hacer que cuando usas una técnica de CA local como mkcert.
• Debes usar un nombre de dominio válido que controles. Esto significa que no puedes usar CA oficiales para lo siguiente:
  • localhost y otros nombres de dominio reservados, como example o test
  • Cualquier nombre de dominio que no controles
  • Dominios de nivel superior no válidos Para obtener más información, consulta la lista de dominios de nivel superior válidos.

Proxy inverso

Otra opción para acceder a un sitio que se ejecuta de forma local con HTTPS es usar un proxy inverso, como ngrok. Esto conlleva los siguientes riesgos:

• Cualquier persona con la que compartas la URL del proxy inverso podrá acceder a tu sitio de desarrollo local. Esto puede ser útil para mostrar tu proyecto a los clientes, pero también puede permitir que personas no autorizadas compartan información sensible.
• Algunos servicios de proxy inverso cobran por el uso, por lo que el precio puede ser un factor a tener en cuenta al elegir un servicio.
• Las nuevas medidas de seguridad en los navegadores pueden afectar el funcionamiento de estas herramientas.

Marcar (no recomendado)

Si usas un nombre de host personalizado, como mysite.example en Chrome, puedes usar una marca para forzar al navegador a considerar que mysite.example es seguro. Evita hacerlo por los siguientes motivos:

• Debes tener la certeza de que mysite.example siempre se resuelve en una dirección local. De lo contrario, corres el riesgo de filtrar credenciales de producción.
• Esta marca solo funciona en Chrome, por lo que no puedes depurar en diferentes navegadores.

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

Imagen de fondo de la imagen hero de @anandu en Unsplash, editada.