Browser-sync: Browsersync + Laravel Valet Secure

[matthewjumpsoffbuildings]

Im using browser-sync to serve up my local dev sites. Im also using Laravel Valet. When I use valet secure to serve a dev site over https, Im getting those ugly Chrome Privacy Error pages. Is there a way to stop this?

My browser-sync config is as follows:

    browserSync.init({
        host: "https://mysite.dev",
            proxy: "https://mysite.dev",
            ...

mysite.dev changes from site to site, I have a lot of local dev sites Im working on.

When I run npm start browser-sync outputs this:

    [BS] Proxying: https://mysite.dev
    [BS] Access URLs:
    ------------------------------------------
          Local: https://localhost:3000
       External: https://https://mysite.dev:3000
     ------------------------------------------
             UI: http://localhost:3001
    UI External: http://https:3001

As you can see its correctly mapping the URL, and if I ignore Chromes privacy error warnings I can see the website fine. Im just wondering why the https is not working properly.

If I access https://mysite.dev _without_ browser-syncs :3000 port, it works fine in Chrome, and says "Secure" on the address bar

[mikemartin]

@matthewjumpsoffbuildings This appears to be an issue with Chrome 58's removal of commonName matching in certificates.

You can generate your own certificates that include the SAN extension and pass them to browsersync to fix the security warning. But I think Browsersync needs to update their certs in https://github.com/BrowserSync/browser-sync/tree/master/lib/server/certs.

.browserSync({
      proxy: 'https://mysite.dev',
      https: {
        key: "/Users/mike/.localhost-ssl/key.pem",
        cert: "/Users/mike/.localhost-ssl/cert.pem"
      },
      ...

[matthewjumpsoffbuildings]

Thanks @mikemartin for the info, will your custom certs solution work as of now, or do i need to wait for browsersync to update their certs as you mentioned?

[mikemartin]

@matthewjumpsoffbuildings I'd recommend waiting for browsersync to update. In the meantime, I just sent you a DM on Slack. 👍

[matthewjumpsoffbuildings]

thanks, which slack?

[mikemartin]

@matthewjumpsoffbuildings Statamic

[mikemartin]

This is the same issue as: https://github.com/BrowserSync/browser-sync/issues/1362

[ruchern-chong]

@mikemartin For the code block that you have posted, is there a workaround to use ~ as the home directory?

Related issue: #1394

[glambert]

No updates on this? I have to switch to Safari for browser-sync development now ;) I can create my own self-signed SSLs, but the browser-sync options are commited to our repo, so I'd also need to put the .key and .crt files which is not a good idea I think 😉

[shakyShane]

@ls-guillaume-lambert I would take a PR for this for sure if someone could help out?

[glambert]

Yeah that'd be great, I'm not familiar at all with self-signed certs creation, in the mean time I've enabled chrome://flags/#allow-insecure-localhost to make it work.

[brianlarson]

Hope this is helpful to some: here's a great resource for issuing certs for local dev (particularly .dev and Chrome. Included a snippet below as well. https://deliciousbrains.com/ssl-certificate-authority-for-local-https-development

Anyone know if this is resolved with Browsersync to avoid having to create .key and .crt files for https://localhost?

## Become a (tiny) Certificate Authority First
## URL: https://deliciousbrains.com/ssl-certificate-authority-for-local-https-development

## Then you can create SSL certificates for local dev...


## Create private key
## --------------------------
openssl genrsa -out example.dev.key 2048



## Create CSR
## --------------------------
openssl req -new -key example.dev.key -out example.dev.csr



## Create and save config file to define the Subject Alternative Name (SAN) extension
## File name: example.dev.ext
## ----------------------------------------------------------------------------------
authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = example.dev



## Create certificate
## --------------------------
openssl x509 -req -in example.dev.csr -CA myCA.pem -CAkey myCA.key -CAcreateserial -out example.dev.crt -days 1825 -sha256 -extfile example.dev.ext

[vanderbake]

If you're using valet secure and want browserSync play nicely with your test domain, here is a snippet which will make it secure without any errors:

// At the top of you webpack.mix.js file
const domain = 'yourdomain.test'; // <== edit this one
const homedir = require('os').homedir();

// The mix script:
mix.browserSync({
      proxy: 'https://' + domain,
      host: domain,
      open: 'external',
      https: {
        key: homedir + '/.valet/Certificates/' + domain + '.key',
        cert: homedir + '/.valet/Certificates/' + domain + '.crt',
      },
  })

This will load "https://yourdomain.test:3000" with valid certificates.

Maybe this helps someone stumbling across this. :-)

[brianlarson]

Maybe it has to do with the version of Valet but on my setup (v 2.8.0) the location of the cert and key files is different. Works like a charm though! Goodbye SSL for friggin' localhost!

https: { key: homedir + '/.config/valet/Certificates/' + domain + '.key', cert: homedir + '/.config/valet/Certificates/' + domain + '.crt', },

[vanderbake]

@brianlarson I'm using Valet Plus and that one is using ~/.valet/.. and the default for Valet is using ~/.config/valet/.... Wasn't aware of that, so thanks for sharing!