Server showing non-secure SSL connection

Support
1

I’m using Local with Gulp and Browsersync to live reload pages when I make code changes.

I’ve set the SSL certificate to trusted in Local, and in the gulpfile.js I’ve specified the proxy URL to be https. When the Gulp script runs it loads the site on https://localhost:3000 via the Local proxy.

Everything loads and seems to work OK except the site displays a not secure warning. See screenshot. I’m using Local v2.2.1.

Does anyone know how I can make the connection accept the SSL certificate generated by Local?

wp-https
wp-https1014×890 62.3 KB

2

Does anyone have any insight as to why the SSL certificate generated by Local is being rejected when using the proxy URL in Browsersync (and Gulp).

Another side effect of this issue is that because the page is not secure it’s causing the customizer to refuse to display the preview pane.

customizer-pane-not-showing
customizer-pane-not-showing1014×890 41.3 KB

3

I think you have to manually create a self-signed SSL certificate for localhost, because at the moment you only have one for the .local URL.

Then once you have created the certificate, edit your gulpfile.js:

    browserSync( {
    proxy: "https://mysite.local",
    https: {
        key: "/path/to/localhost.key",
        cert: "/path/to/localhost.crt"
        }
    } );
1 Like
4

Ah, good point. That’s probably it.

Although it looks a really drawn out process for creating your own certificate! And I’m on Windows.

Thanks anyway, I’ll take a look and see if I can get it to work.

5

I’ve had issues like this with BrowserSync and SSL Certs for the local proxy url.

Ultimately I just decided to do my BrowserSync deving over HTTP since I was really only doing styling work that didn’t require me to have the content served of HTTPS.

That may not be an option for you, but I definitely was banging my head on the issue for a while before throwing my hands up and moving on!

– Ben

6

Yeah it does indeed, but I think you’ll have to do it only once, then you can use the same cert for all your projects as they all work behind the same proxy (//localhost).

I’m also on Windows and I’m gonna try this maybe over the weekend…

7

I didn’t realise it would only have to be done once. That changes things a bit.

I’d be interested to hear how you get on if you’re trying to make it work on Windows.

8

Apparently, from version 2.2 onwards, BrowserSyncs automatically generates a self-signed certificate for localhost, as long as you either set https: true, or specify https:// in the address for the proxy option. So no need to generate it, nor to provide its .crt and .key in the gulpfile.js.

In fact, after upgrading to the latest version, the cert is indeed in place:

image

it’s just that it’s invalid, because it’s self-signed, so Chrome won’t display a green lock. But the cert is there, and it should not give any problems, except for an annoying red triangle in the address bar, and an initial warning that once skipped shouldn’t appear anymore.

One more useful step would be the option in Chrome to Allow invalid certificates for resources loaded from localhost.
To enable this, paste this in your address bar: chrome://flags/#allow-insecure-localhost and enable the first option.
In my case it looks like it will still show a red lock, but it shouldn’t be blocking HTTPS resources.

TLDR;

  • Update BS to the latest version

  • Set up your gulpfile like this (Note: You don’t need to provide the https option here, as it’s inferred from the proxy target) :

      var projectURL = 'https://mysite.dev.cc';

  browserSync.init({
        proxy: projectURL,
        host: '192.168.0.143'
      });

  • In Chrome, Allow invalid certificates for resources loaded from localhost

More info about it here

Now the last one step to turn the green light on, would be for our Windows machine to trust this already existing certificate, but I still have to find a solution to this, sadly.

1 Like
9

Thanks for that. It made me realise I too had the certificate installed just that it wasn’t valid either.

I’ve tried a few things to get the certificate to be recognised but haven’t got it to work.

A better approach might be to generate a new certificate using something like OpenSSL and getting Browsersync to use this one instead. See the https settings here: Browsersync options

However I couldn’t get this to work either. But I did come across a Windows utility to generate the SSL via a UI rather than the command line which is a bit easier.

10

Thanks for the tool @dgwyer, here are the steps I went through:

  • Generated a cert with the GUI tool

  • Set the BS settings like this:

      browserSync.init({
      proxy: projectURL,
      host: '192.168.0.143',
      https: {
          key: "C:\\yourcertpath\\key-20180307-111414.pem",
          cert: "C:\\yourcertpath\\cert-20180307-111414.crt"
      }
  });

  • Trusted the certificate (Right click on the .crt, Install, Next, Place all certificates in Trusted Root Certification Authorities)

The certificate seems to work, but only Edge shows it as trusted. Both Chrome and FireFox are still throwing warnings :frowning:

Windows does indeed trust the cert now:
image
image

But Chrome says “Invalid”.

As a side note, if you are looking for the cert generated by BrowserSync, you can find it here: C:\Users\YOURUSERNAME\AppData\Roaming\npm\node_modules\browser-sync\certs
So maybe the same steps above can be reproduced on this cert instead of creating a new one with the tool.

I’m a bit lost now, I don’t know what else I could do, I’ve trusted the certificate and still no positive results. What else does Chrome want? :cry:

11

Although I feel like we’re probably both wasting our time, as even though the lock isn’t green, all HTTPS resources are being loaded correctly, at least on my end!

12

Thanks for trying at least and reporting back your results. Looks like I’m going to have to get used to that ugly red triangle! :frowning:

13

I recently gave this in-depth article a go, but came up short with an error message at the end in my WSL App. But maybe someone here will have better luck.

This is specifically for Windows OS.

https://creativelogic.biz/https-ssl-local-dev-windows/

For MacOS users you can try this step-by-step guide:

If anyone has success with either article, please post back your results and any insights.

Cheers.

1 Like
14

For anyone banging their heads for hours on how to get Browser-Sync to use the certificate that Local created:

  1. Locate and copy the .crt and .key file that Local has created for your project
  2. Locate the server.crt and server.key that Browser sync creates in your project modules
  3. Delete both
  4. Paste the .crt and .key files you copied from Local
  5. Rename them as server.crt and server.key
  6. Get a coffee and smile at the green lock

Btw, I use Webpack. With the following settings:

new BrowserSyncPlugin({
        files: '**/*.php',
        open: 'external',
        host: 'mydomain.local',
        proxy: 'https://mydomain.local',
        port: 3000
    })
2 Likes
15

Web-Tailer you are a gem! Thank you so much for posting this. Smiling with my coffee now.

1 Like