Proxying server with https causes NET::ERR_CERT_COMMON_NAME_INVALID

[jakeNiemiec]

Issue details

Proxying server with https causes NET::ERR_CERT_COMMON_NAME_INVALID (Chrome).

When you proxy a server, the servers certificate is not provided, instead it uses incorrectly provides a certificate for localhost (see below).

Normally localhost would be fine, however, being able to access subdomains is critical for my current use-case.

I currently have /etc/hosts forwarding website.me to 127.0.0.1 along with the specific subdomains needed. I point the browser-sync proxy to https://www.website.me:3000 (the locally run, ssl enabled, dev server), set the host and port to https://www.website.me:8081.

Ideally browser-sync would a. serve the cert that https://www.website.me:3000 serves; or b. allow me to specify a certificate via the https config option , e.g.:

'https': {
   'key': 'ssllocal/server.key',
   'cert': 'ssllocal/server.crt'
}

Steps to reproduce/test case

1. Point the browser-sync proxy to https://www.website.me:3000 (a ssl enabled server),

"proxy": 'https://www.website.me:3000',

1. Set the host and port to https://www.website.me:8081.

    "port": 8081,
    "host": 'www.website.me',

Please specify which version of Browsersync, node and npm you're running

• Browsersync [2.14.0]
• Node [v5.12.0]
• Npm [3.10.5]

  Affected platforms

• [x] OS X

  Browsersync use-case

• [x] API
• [x] CLI

  for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync

$ browser-sync start --config bs-config.js

[BS] Proxying: https://www.website.me:3000
[BS] Access URLs:
 --------------------------------------------
       Local: https://localhost:8081
    External: https://www.website.me:8081
 --------------------------------------------
          UI: http://localhost:3001
 UI External: http://www.website.me:3001
 --------------------------------------------
[BS] Watching files...

[JodiWarren]

@jakeNiemiec I see you're on MacOS. A workaround may be to add the localhost cert to your keychain.

1. You can drag the cert file off the popup shown in your second image
2. Double click it to add it to your keychain. Make sure you add it to the System keychain.
3. In Keychain Access, you double-click to open it up, then pop down the Trust section and set it to Always Trust.

The next time you open your site, it should accept it as a valid certificate. 🔒

[jakeNiemiec]

@JodiWarren the localhost cert works fine. However, you cannot request subdomains when using the localhost method.

👉 Specifically I want to be able to access https://api.mylocalwebsite.me:3000, the best it seems browsersync can give me is https://localhost:3000, not allowing me to make requests via the subdomain, only the root domain.

Like I said above there seems to be an option to specify a custom certificate (which I have), but it does not work.

[shakyShane]

@jakeNiemiec running Browsersync instances are per-domain, so although what you are suggesting would be a great feature, it doesn't quite align with how the internals currently work.

[shakyShane]

@jakeNiemiec especially since you are setting the 'host' to one domain, and then expecting Browsersync to pick up requests on another

[jakeNiemiec]

@shakyShane Are you saying that I should be able to use "proxy": https://api.website.me:3000 to access the subdomain through https://localhost:3000? I'll take a second look at this a bit later and see if i can't get it working.

Thanks for getting to this, great work on BS so far!