Usa HTTPS para el desarrollo local

Maud Nalpas

La mayoría de las veces, http://localhost se comporta como HTTPS para el desarrollo. comerciales. Sin embargo, hay algunos casos especiales, como nombres de host personalizados o usar cookies seguras en los navegadores, cuando necesites configurar explícitamente tu sitio de desarrollo para que se comporte como HTTPS a fin de representar el funcionamiento del sitio en producción. (Si tu sitio web de producción no tiene usar HTTPS, haz que sea prioridad cambiar a HTTPS).

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

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

Ejecuta tu sitio de forma local con HTTPS con 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ía su dispositivo y su navegador, llamada autoridad certificadora (AC). El navegador comprueba si el certificado de tu servidor de desarrollo está firmado por un de confianza antes de crear una conexión HTTPS.

Recomendamos usar mkcert, un AC multiplataforma, para crear y firmar tu certificado. Para obtener información útil consulta Ejecuta tu sitio de manera local con HTTPS: otras opciones.

Muchos sistemas operativos incluyen bibliotecas para crear certificados, como openssl. Sin embargo, son más complejos y menos confiables que mkcert y no son necesariamente multiplataforma, por lo que menos accesibles para equipos de desarrolladores 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:

   brew install mkcert
   brew install nss # if you use Firefox
   

2. Agrega mkcert a tus AC raíz locales.

   En tu terminal, ejecuta el siguiente comando:

   mkcert -install
   

   Esto genera una autoridad certificadora (AC) local. La AC local generada por mkcert solo será de confianza de forma local 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 lo que sea en el que quieres guardar el certificado.

   Luego, ejecuta lo siguiente:

   mkcert localhost
   

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

   mkcert mysite.example
   

   Este comando realiza dos acciones:

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

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

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

   Los detalles de cómo hacerlo dependen de tu servidor. Estos son algunos ejemplos:

   👩 💻 Con el 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 tu 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 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 la carpeta de directorio raíz:

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

   Entonces, tu secuencia de comandos start debería verse de la siguiente manera:

   "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 asegúrate de ejecutar tu sitio de manera local con HTTPS. No verás advertencias del navegador porque tu navegador confía en mkcert como certificado local autoridad.

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 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}

   De esta manera, se crea un certificado válido que mkcert firma automáticamente.

3. Configura tu servidor de desarrollo para que use HTTPS y el certificado que creada 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, te mostramos otras formas de configurar tu certificado. Estas suelen ser puede ser más complicado o arriesgado que usar mkcert.

Certificado autofirmado

También puedes optar por no utilizar una autoridad de certificación local, como mkcert, En su lugar, firma el certificado por tu cuenta. Este enfoque presenta algunos errores:

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

Si no especificas un certificado, React's y los de Vue Las opciones HTTPS del servidor de desarrollo crean un certificado autofirmado en el de un vehículo. Esto es rápido, pero incluye las mismas advertencias del navegador y otras errores de los certificados autofirmados. Por suerte, puedes usar frontend frameworks opción HTTPS integrada y especificar un certificado de confianza local usando mkcert o uno similar. Para obtener más información, consulta la Ejemplo de mkcert con React.

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

Si abres tu sitio que se ejecuta localmente en tu navegador con HTTPS, tu el navegador verifica el certificado de tu servidor de desarrollo local. Cuando ve que tú firmaste el certificado, comprueba si Debe estar registrado como autoridad certificadora de confianza. Porque eres no, el navegador no puede confiar en el certificado y muestra una advertencia indicando que tu conexión no es segura. Sigue creando el protocolo HTTPS conexión si continúas, pero lo haces bajo tu propio riesgo.

Certificado firmado por una autoridad certificadora común

También puedes usar un certificado firmado por una AC oficial. Esto viene con el las siguientes complicaciones:

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

Proxy inverso

Otra opción para acceder a un sitio que se ejecuta localmente 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 desarrollo local. . Esto puede ser útil para demostrar tu proyecto a los clientes, pero también y permitir que personas no autorizadas compartan información sensible.
• Algunos servicios de proxy inverso cobran por el uso, así que el precio puede ser un factor en tu elección de servicio.
• Las nuevas medidas de seguridad en los navegadores pueden afectar la cómo funcionan estas herramientas.

Marca (no recomendado)

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

• Debes estar 100% seguro de que mysite.example siempre se resuelva a una ubicación local web. De lo contrario, corres el riesgo de filtrar las credenciales de producción.
• Esta función solo funciona en Chrome, de modo que no puedes depurar en todos los navegadores.

Agradecemos las contribuciones y los comentarios a todos los revisores y colaboradores, especialmente Ryan Sleevi, Filippo Valsorda, Milica Mihajlija y Rowan Merewood. 🙌

Fondo de la imagen hero de @anandu en Unsplash, editada.