in

ssl – Obtener angular-cli para ng servir a través de HTTPS

apple touch icon@2

SI desea crear su propio certificado y agregarlo al llavero de confianza en MAC

Usaremos OpenSSL para generar todos nuestros certificados.

Paso 1: certificado SSL raíz

Paso 2: confíe en el certificado SSL raíz

Paso 3: certificado SSL de dominio

Paso 4: use su nuevo certificado SSL

# Step 1: Root SSL certificate

    openssl genrsa -des3 -out rootCA.key 2048
    openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

ingrese la descripción de la imagen aquí

# Step 2: Trust the root SSL certificate

Antes de que pueda utilizar el certificado SSL raíz recién creado para comenzar a emitir certificados de dominio, hay un paso más. Debe decirle a su Mac que confíe en su certificado raíz para que todos los certificados individuales emitidos por él también sean confiables.

Acceda al llavero en su Mac y vaya a la categoría Certificados en su llavero del sistema. Una vez allí, importe el archivo rootCA.pem usando Archivo> Importar elementos. Haga doble clic en el certificado importado y cambie el menú desplegable «Al usar este certificado:» a Confiar siempre en la sección Confianza.

Su certificado debería tener un aspecto similar a este dentro de Keychain Access si ha seguido correctamente las instrucciones hasta ahora.

ingrese la descripción de la imagen aquí

# Step 3: Domain SSL certificate

El certificado SSL raíz ahora se puede usar para emitir un certificado específicamente para su entorno de desarrollo local ubicado en localhost.

Cree un nuevo archivo de configuración de OpenSSL server.csr.cnf para que pueda importar estas configuraciones al crear un certificado en lugar de ingresarlas en la línea de comando.

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn

[dn]
C=US
ST=RandomState
L=RandomCity
O=RandomOrganization
OU=RandomOrganizationUnit
emailAddress=hello@example.com
CN = localhost

Cree un archivo v3.ext para crear un certificado X509 v3. Observe cómo especificamos subjectAltName aquí.

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost

Cree una clave de certificado para localhost utilizando los valores de configuración almacenados en server.csr.cnf. Esta clave se almacena en server.key.

openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <( cat server.csr.cnf )

Se emite una solicitud de firma de certificado a través del certificado SSL raíz que creamos anteriormente para crear un certificado de dominio para localhost. La salida es un archivo de certificado llamado server.crt.

openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

ingrese la descripción de la imagen aquí

# Step 4 Use your new SSL certificate

Ahora está listo para proteger su localhost con HTTPS. Mueva los archivos server.key y server.crt a una ubicación accesible en su servidor e inclúyalos cuando inicie su servidor.

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "project-falcon:build",
            "ssl": true,
            "sslKey": "src/assets/sslcertificate/server.key",
            "sslCert": "src/assets/sslcertificate/server.crt"
          }
        }

Borre el caché en Google Chrome y reinicie el navegador, también elimine el caché y los archivos temporales en mac

Ahora podemos usar ng serve -o

Referencia

https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

ReactJS – Descripción general

DvgtK5eDzGtcv36TWEhob9 1200 80

Guía de Bayonetta 3: todo lo que sabemos hasta ahora