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, hay algunos casos especiales, como nombres de host personalizados o el uso de cookies seguras en navegadores, en los que debes configurar explícitamente tu sitio de desarrollo para que se comporte como HTTPS y para representar con precisión cómo funciona tu sitio en producción. (Si tu sitio web de producción no usa HTTPS, cambia a HTTPS como prioridad).

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

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

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

Recomendamos que uses mkcert, una AC multiplataforma, para crear y firmar tu certificado. Para ver otras opciones útiles, consulta Cómo ejecutar 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 el mkcert, y no son necesariamente multiplataforma, lo que las hace menos accesibles para equipos de desarrolladores más grandes.

Configuración

Instala mkcert (solo una vez).

Sigue las instructions para instalar mkcert en tu sistema operativo. Por ejemplo, en macOS:
```
brew install mkcert
brew install nss # if you use Firefox
```
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 CA local que genera mkcert solo es de confianza localmente en tu dispositivo.
Genera un certificado para tu sitio, firmado por mkcert.

En la terminal, navega al directorio raíz de tu sitio o a cualquier 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 lo siguiente:
```
mkcert mysite.example
```
Este comando realiza dos acciones:
- Genera un certificado para el nombre de host especificado.
- Permite que mkcert firme el certificado.
Tu certificado ya está listo y firmado por una autoridad certificadora en la que confías en tu navegador a nivel local.
Configura tu servidor para que use HTTPS, el certificado TLS que acabas de crear.

Los detalles para hacerlo dependen de tu servidor. A continuación, se incluyen 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});
```
👩 TeamYouTube 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.

👩 TeamYouTube Con un servidor de desarrollo de React ocurre lo siguiente:

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 el directorio raíz de tu sitio, haz lo siguiente:
```
|-- my-react-app
    |-- package.json
    |-- localhost.pem
    |-- localhost-key.pem
    |--...
```
La 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
Abre https://localhost o https://mysite.example en tu navegador para verificar que estés ejecutando tu sitio de forma local con HTTPS. No verás ninguna advertencia del navegador, ya que este confía en mkcert como una autoridad certificadora local.

Referencia rápida de mkcert

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

Configura el 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
```
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.
Configura tu servidor de desarrollo para usar HTTPS y el certificado que creaste en el paso 2.

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

Precaución: Haz esto solo con fines de desarrollo y nunca exportes ni compartas el archivo rootCA-key.pem. Si necesitas saber la ubicación de este archivo para asegurarte de que sea seguro, ejecuta mkcert -CAROOT.

</div>

Ejecuta tu sitio de manera local con HTTPS: otras opciones

Las siguientes son otras formas de configurar tu certificado. Por lo general, estos pasos 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. Este enfoque presenta algunos errores:

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

Capturas de pantalla de las advertencias que se muestran en los navegadores cuando se usa un certificado autofirmado. — Las advertencias que se muestran en los navegadores cuando se utiliza un certificado autofirmado.

Si no especificas un certificado, las opciones de HTTPS del servidor de desarrollo de React y Vue crean un certificado autofirmado de forma interna. Este proceso es rápido, pero incluye las mismas advertencias del navegador y otras dificultades que tienen los certificados autofirmados. Afortunadamente, puedes usar la opción HTTPS integrada de los frameworks de frontend y especificar un certificado de confianza local que se creó con mkcert o uno similar. Para obtener más información, consulta el ejemplo mkcert con React.

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

Si abres el sitio que se ejecuta de forma local en el navegador con HTTPS, este verificará el certificado del servidor de desarrollo local. Cuando detecta que tú firmaste el certificado, comprueba si estás registrado como una autoridad certificadora de confianza. Por otro lado, el navegador no puede confiar en el certificado y muestra una advertencia que te indica que la conexión no es segura. Si continúas, esto creará la conexión HTTPS, pero lo harás bajo tu propia responsabilidad.

Certificado firmado por una autoridad certificadora normal

También podrás usar un certificado firmado por una AC oficial. Esto incluye las siguientes complicaciones:

Tienes que hacer más trabajo de configuración que cuando usas una técnica de AC local como mkcert.
Debes usar un nombre de dominio válido que controles. Esto significa que no puedes usar AC oficiales para lo siguiente:
- localhost y otros nombres de dominio reservados, 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, 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 hacer una demostración de 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 en tu elección del servicio.
Las nuevas medidas de seguridad para navegadores pueden afectar el funcionamiento de estas herramientas.

Marca (no recomendado)

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

Debes estar 100% seguro de que mysite.example siempre se resuelve como una dirección local. De lo contrario, corres el riesgo de filtrar credenciales de producción.
Esta función experimental solo funciona en Chrome, por lo que no puedes realizar depuraciones en varios navegadores.

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

Fondo de hero image de @anandu en Unsplash, editado.