Generar certificado SSL para desarrollo local de PWA en MacOS con Chrome

En estos días estoy trabajando en el desarrollo de una PWA (Progressive Web App), y uno de los requisitos que tienen es que debe ser HTTPS.

Aunque tengo un certificado para el servidor de testing, y otro para el de producción, el ciclo de desarrollar -> compilar -> desplegar -> testear no es muy dinámico cuando estamos desarrollando y queremos realizar pruebas cada 10 líneas de código escritas, o ver como quedó un cambio de estilos.

Entonces, el truco es generar un self-signed certificate, que obviamente Chrome va a rechazar porque no confié en el emisor, pero podemos utilizando el key-chain de MacOS indicar que es un certificado válido en el cual siempre hay que confiar.

Pero eso no es suficiente para Chrome, además, el certificado debe ser generado indicando en la sección subjectAltNames el nombre del dominio (o localhost) al cual aplica el certificado, en caso contrario, lo rechazará diciendo que no puede validar que el certificado sea del dominio que queremos acceder. [more info]

Entonces ¿Cómo generar un certificado que le guste a Chrome?

Primero creamos un archivo de texto, que yo le coloqué el nombre ssl.config, como el siguiente.


[ req ]
default_bits = 2048
default_keyfile = server.pem
distinguished_name = subject
req_extensions = req_ext
x509_extensions = x509_ext
string_mask = utf8only

# The Subject DN can be formed using X501 or RFC 4514 (see RFC 4519 for a description).
# Its sort of a mashup. For example, RFC 4514 does not provide emailAddress.
[ subject ]
countryName = Country Name (2 letter code)
countryName_default = AR

stateOrProvinceName = State or Province Name (full name)
stateOrProvinceName_default = BA

localityName = Locality Name (eg, city)
localityName_default = CABA

organizationName = Organization Name (eg, company)
organizationName_default = Test Company SRL

# Use a friendly name here because its presented to the user. The server's DNS
# names are placed in Subject Alternate Names. Plus, DNS names here is deprecated
# by both IETF and CA/Browser Forums. If you place a DNS name here, then you
# must include the DNS name in the SAN too (otherwise, Chrome and others that
# strictly follow the CA/Browser Baseline Requirements will fail).
commonName = Common Name (e.g. server FQDN or YOUR name)
commonName_default = Test Server

emailAddress = Email Address
emailAddress_default = test@example.com

# Section x509_ext is used when generating a self-signed certificate. I.e., openssl req -x509 ...
[ x509_ext ]

subjectKeyIdentifier = hash
authorityKeyIdentifier = keyid,issuer

# You only need digitalSignature below. *If* you don't allow
# RSA Key transport (i.e., you use ephemeral cipher suites), then
# omit keyEncipherment because that's key transport.
basicConstraints = CA:FALSE
keyUsage = digitalSignature, keyEncipherment
subjectAltName = @alternate_names
nsComment = "OpenSSL Generated Certificate"

# RFC 5280, Section 4.2.1.12 makes EKU optional
# CA/Browser Baseline Requirements, Appendix (B)(3)(G) makes me confused
# In either case, you probably only need serverAuth.
# extendedKeyUsage = serverAuth, clientAuth

# Section req_ext is used when generating a certificate signing request. I.e., openssl req ...
[ req_ext ]

subjectKeyIdentifier = hash

basicConstraints = CA:FALSE
keyUsage = digitalSignature, keyEncipherment
subjectAltName = @alternate_names
nsComment = "OpenSSL Generated Certificate"

# RFC 5280, Section 4.2.1.12 makes EKU optional
# CA/Browser Baseline Requirements, Appendix (B)(3)(G) makes me confused
# In either case, you probably only need serverAuth.
# extendedKeyUsage = serverAuth, clientAuth

[ alternate_names ]

DNS.1 = pwa.local

Y luego ejecutar el siguiente comando (posiblemente agregando sudo dependiendo en que carpeta se ejecute)


openssl req -new -x509 -days 365 -nodes -out server.crt -keyout server.key -config ssl.config

Esto creará dos archivos, server.crt y server.key, solo resta agregar server.crt al KeyChain e indicar que siempre confie en ese certificado y configurar apache para utilizar esos certificados en el sitio HTTPS


Discussion Area - Leave a Comment