0

I am building a Progressive Web Application for work, but I am having trouble testing it locally because of the SSL requirements.

Usually, it's simple to do because Chrome allows this to work if you are using localhost (even without SSL I believe). However, I am not using "localhost". We have an internal web application with a URL like this: "website.company.com". When logging into this site, authentication cookies are added for that sub-domain (company.com). For my local website to use these same cookies, I add an entry to the hosts file (Windows) like this "127.0.0.1 my-local-site.company.com". That way when I go to my local site (my-local-site.company.com), I have all the authentication cookies, and I can make CORS calls to my real deployed site.

This works perfectly except for the fact that service workers will not work now because the cert for "https://my-local-site.company.com" is not valid and the service worker doesn't load. I tried creating a self-signed certification and added it to the Trusted certs, but Chrome still says the site is not trusted and the service worker and manifest.json files don't load.

My question is does anyone know how to either: 1. Enable PWA to work fully locally without a valid cert... or 2. Make chrome recognize my self signed cert.

NOTE: I did find a flag in Chrome startup that allows service workers to function without a valid cert, which is great... however, it still does not load my manifest.json file. This is a problem because I really want to demo (to my team) the cool Add to Homescreen functionality of PWA.

Muhammad Dyas Yaskur
  • 6,914
  • 10
  • 48
  • 73
Peter Rumbles
  • 1
  • 1
    `I tried creating a self signed certification and added it to the Trusted certs`...`but Chrome still says the site is not trusted`. What is the exact error? If you've added it to your trusted or root certificate authorities on your computer, chrome should see it as a valid certificate. – Blue Dec 10 '17 at 05:11
  • I just noticed that Chrome gives more information. It says I am missing the Subject Alternative Name. I will fix that and try again, and let you know. Thanks for the quick response. – Peter Rumbles Dec 10 '17 at 05:41

1 Answers1

0

The solution was to recreate the cert and make sure it has a subject alternative name. I put the code below into a batch file and ran it. I had to first install openssl. After the certs were created, I added the .crt file to the Trusted Authorities certficates. Then I referenced both the .crt and .key files in my webpack dev server config.

REM PLEASE UPDATE THE FOLLOWING VARIABLES FOR YOUR NEEDS.
SET HOSTNAME=local-site.company
SET DOT=com
SET COUNTRY=US
SET STATE=WA
SET CITY=Seattle
SET ORGANIZATION=Company
SET ORGANIZATION_UNIT=IT
SET EMAIL=myemail@email.com

(
echo [req]
echo default_bits = 2048
echo prompt = no
echo default_md = sha256
echo x509_extensions = v3_req
echo distinguished_name = dn
echo:
echo [dn]
echo C = %COUNTRY%
echo ST = %STATE%
echo L = %CITY%
echo O = %ORGANIZATION%
echo OU = %ORGANIZATION_UNIT%
echo emailAddress = %EMAIL%
echo CN = %HOSTNAME%.%DOT%
echo:
echo [v3_req]
echo subjectAltName = @alt_names
echo:
echo [alt_names]
echo DNS.1 = *.%HOSTNAME%.%DOT%
echo DNS.2 = %HOSTNAME%.%DOT%
)>%HOSTNAME%.cnf

C:\"Program Files (x86)"\GnuWin32\bin\openssl req -new -x509 -newkey rsa:2048 -sha256 -nodes -keyout %HOSTNAME%.key -days 3560 -out %HOSTNAME%.crt -config %HOSTNAME%.cnf
pause
Peter Rumbles
  • 1