Running add-in locally no longer works, certificate invalid #244

Closed
jasonjoh opened this Issue Jun 6, 2017 · 14 comments

Comments

Projects
None yet
10 participants
@jasonjoh
Contributor

jasonjoh commented Jun 6, 2017

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

image

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

This comment has been minimized.

Show comment
Hide comment
@jasonjoh

jasonjoh Jun 6, 2017

Contributor

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"
    },
Contributor

jasonjoh commented Jun 6, 2017

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"
    },
@fexdev

This comment has been minimized.

Show comment
Hide comment
@fexdev

fexdev Jun 12, 2017

@jasonjoh Thanks a lot!

fexdev commented Jun 12, 2017

@jasonjoh Thanks a lot!

@MIchaelMainer

This comment has been minimized.

Show comment
Hide comment
@MIchaelMainer

MIchaelMainer Jun 12, 2017

Member

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

Member

MIchaelMainer commented Jun 12, 2017

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

@WrathOfZombies

This comment has been minimized.

Show comment
Hide comment
@WrathOfZombies

WrathOfZombies Jun 12, 2017

Member

@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.

Member

WrathOfZombies commented Jun 12, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@MIchaelMainer

MIchaelMainer Jun 12, 2017

Member

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

Member

MIchaelMainer commented Jun 12, 2017

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

@sureshjoshi

This comment has been minimized.

Show comment
Hide comment
@sureshjoshi

sureshjoshi Jul 4, 2017

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.

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

This comment has been minimized.

Show comment
Hide comment
@charly37

charly37 Jul 19, 2017

Contributor

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 ?

Contributor

charly37 commented Jul 19, 2017

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

This comment has been minimized.

Show comment
Hide comment
@charly37

charly37 Jul 20, 2017

Contributor

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.

Contributor

charly37 commented Jul 20, 2017

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

This comment has been minimized.

Show comment
Hide comment
@PaulDMendoza

PaulDMendoza Jul 27, 2017

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

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

This comment has been minimized.

Show comment
Hide comment
@jasonjoh

jasonjoh Jul 28, 2017

Contributor

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.

Contributor

jasonjoh commented Jul 28, 2017

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

This comment has been minimized.

Show comment
Hide comment
@jasonjoh

jasonjoh Jul 28, 2017

Contributor

@PaulDMendoza the note has been added. Thanks again!

Contributor

jasonjoh commented Jul 28, 2017

@PaulDMendoza the note has been added. Thanks again!

@aloncatz

This comment has been minimized.

Show comment
Hide comment
@aloncatz

aloncatz Aug 20, 2017

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"
},
  1. Restart npm server

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"
},
  1. Restart npm server
@rheajt

This comment has been minimized.

Show comment
Hide comment
@rheajt

rheajt Oct 28, 2017

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-----

rheajt commented Oct 28, 2017

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

This comment has been minimized.

Show comment
Hide comment
@testLit

testLit Feb 13, 2018

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.

testLit commented Feb 13, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment