Running add-in locally no longer works, certificate invalid

[jasonjoh]

Even after adding the certificate to your Trusted Local Authorities, the add-in still won't load in Edge.

Browsersync is generating self-signed certificates with a Subject of "Internet Widgits Pty Ltd" instead of "localhost". This seems to be reported in BrowserSync/browser-sync#1362 but not yet fixed.

[jasonjoh]

So here's how I generated a certificate that would work. I had to install OpenSSL to do this.

1. Make a .\certs directory in the project

2. Copy openssl.cnf from whereever it lives into this directory (for me, using OpenSSL for Windows, this file was in C:\OpenSSL-Win64\bin\cnf).

3. Edit the .\certs\openssl.cnf file and add the following to the end:

   [ SAN ]
   subjectAltName=DNS:localhost

4. Open a command prompt in the .\certs directory.

5. Generate a private key with the following command:

   openssl genrsa -des3 -out server.key 2048
   

6. Generate a certificate request with the following command:

   openssl req -new -sha256 -key server.key -out server.csr -subj /CN=localhost -reqexts SAN -config openssl.cnf
   

7. Generate a certificate with the following command:

   openssl x509 -req -days 3650 -in server.csr -signkey server.key -out server.crt -extensions SAN -extfile openssl.cnf
   

8. Make a copy of the password-protected private key with the following command:

   copy server.key server.key.copy
   

9. Generate an unprotected private key with the following command:

   openssl rsa -in server.key.copy -out server.key
   

That should generate a certificate with the necessary subject and subjectAltName. Now you just need to tell browser-sync to use it instead of their default cert.

1. Open bsconfig.json in the project root.

2. Replace the line "https": true, with the following:

   "https": {
       "key": "./certs/server.key",
       "cert": "./certs/server.crt"
   },

[florianwachs]

@jasonjoh Thanks a lot!

[MIchaelMainer]

Task: create scripts to automate this scenario. (ref)

[WrathOfZombies]

@MIchaelMainer That automation will only work if you have openssl installed. If I'd suggest an alternative, it would be to generate certs for localhost domain and include it into the project as opposed to using browser-sync's.

[MIchaelMainer]

Thank you @WrathOfZombies. That's a better idea.

[sureshjoshi]

Just to throw my hat in the ring, when running locally (and I'm not recommending this part), you can just serve HTTP and it the plugin seems to load just fine (tested about 15 seconds ago).

I haven't dug into see what all the quirks are, but the generated 'Welcome' page loads.

[charly37]

I just spend quite some time trying to have the certificate installed because I was thinking I was doing something wrong or maybe something was not working with my computer before finding this issue :(
I think it will be very useful for newcomer to update the documentation with a warning ?

[charly37]

I made something similar to @jasonjoh (Thx a lot for your issue and workaround) . It may be easier for people that have git installed on windows since it includes openssl in it (thus I did not install anything except git for windows).
Just create a /certs folder at root project and then run:

User@WinDev1706Eval MINGW64 /c/Code/cryptocurrenciestracker/MicrosoftPlugin/certs (master) 
$ openssl req -x509 -sha256 -newkey rsa:2048 -days 24855 -nodes -subj "//C=US\CN=localhost" -keyout localhost.key -out localhost.crt 

(More info about the command: https://www.h3xed.com/programming/create-a-self-signed-ssl-certificate-using-openssl-on-windows)

Then modified the bsconfig.json file as Jason explained and it works just fine both locally and also when importing the add-in in online office.

I also made a PR that was merged (THX) to update the readme to mention this ticket.

[PaulDMendoza]

Please at least link to this issue and resolution from the tutorial on this page. I spent 2 hours today messing around trying to get the certificate issue resolved. https://docs.microsoft.com/en-us/outlook/add-ins/addin-tutorial

[jasonjoh]

Thanks @PaulDMendoza for the suggestion, and I'm sorry for your frustration. I'll add a note to the tutorial, at least until this is resolved.

[jasonjoh]

@PaulDMendoza the note has been added. Thanks again!

[aloncatz]

Based on @charly37 and @jasonjoh answers, here's the list of steps that worked for me:

1. In the project folder, create folder "certs" and open admin command prompt from it
2. Use openssl from Git installation to create the certificate "c:\Program Files\Git\mingw64\bin\openssl.exe" req -x509 -sha256 -newkey rsa:2048 -days 24855 -nodes -subj "/C=US/CN=localhost" -keyout localhost.key -out localhost.crt
3. Right click localhost.crt, "Install Certificate", place the certificate in "Trusted Root Certification Authorities"
4. Edit bsconfig.json as @jasonjoh described. Replace the line "https": true, with the following:

"https": {
    "key": "./certs/localhost.key",
    "cert": "./certs/localhost.crt"
},

5. Restart npm server

[rheajt]

I have tried all of the steps from @jasonjoh , @charly37 , and @olegoga but I am still running into a Privacy error page.

I also tried installing the certificate into the Google Chrome settings. Can anyone help me figure out what I am missing here? I am very unfamiliar with this aspect of development.

Your connection is not private

Attackers might be trying to steal your information from localhost (for example, passwords, messages, or credit cards). Learn more
NET::ERR_CERT_AUTHORITY_INVALID
Subject: Internet Widgits Pty Ltd
Issuer: Internet Widgits Pty Ltd
Expires on: Apr 8, 2027
Current date: Oct 28, 2017
PEM encoded chain:
-----BEGIN CERTIFICATE-----
MIID...
-----END CERTIFICATE-----

[testLit]

i have this error:

NET::ERR_CERT_AUTHORITY_INVALID

i have followed @jasonjoh and @charly37 instructions but the issue still persist with Chrome.

BTW, i encountered this error

unable to write 'random state'

when running steps 5 & 7.

[neso613]

Hi

I am also getting this error
NET::ERR_CERT_COMMON_NAME_INVALID
in chrome.

[akrantz]

@nehasoni3 Yo Office has been updated to use office-addin-dev-certs package to create a non-self-signed certificate which will work. I'm unclear if you're using the latest version of generator-office, and if so, it should work in Chrome. You might need to restart Chrome.