search

BrowserSync / browser-sync

Keep multiple browsers & devices in sync when building websites. https://browsersync.io
https://discord.gg/2d2xUThp
Apache License 2.0
12.17k stars 756 forks source link

Make UI also use HTTPS settings for it's server #1762

Open chrisspiegl opened 4 years ago

chrisspiegl commented 4 years ago

Issue details

Trying to use BrowserSync with HTTPS for development and noticed that it works great as long as I don't try to access the UI.

I found in other issues that the UI does not run on HTTPS (also indicated by the output in the Console:

[Browsersync] Access URLs:
 ----------------------------------------
       Local: https://localhost:8080
    External: https://192.168.178.37:8080
 ----------------------------------------
          UI: http://localhost:8081
 UI External: http://localhost:8081
 ----------------------------------------

However, now with HSTS and things like the strict-transport-security header, it also inforces the HTTPS on the 8081 port that is used for my UI.

I believe that the easiest fix would be to make the UI also run on HTTPS or at least provide the option to do so?

Steps to reproduce/test case

Created certificate and key file with mkcert to easily have it accepted by the browser. (note: I also tried this with a simple self signed certificate, and trusting it by adding it to the keychain and such, the same situation happened).

Configure browser sync via gulp with options (also see full gulp task at the end):

{
      proxy: 'localhost:3000',
      port: 8080,
      https: {
        key: './assets/localhost-ssl-certificate/localhost.key',
        cert: './assets/localhost-ssl-certificate/localhost.crt',
      },
      ui: {
        port: 8081,
      },
}

Start Node Application that should be proxied by browser-sync.

It automatically opens the port 8080 with https and it's all green and working (even reload data like css, etc.).

Opening http://localhost:8081 immediately redirects to https://localhost:8081 and the browser message is shown:

This site can’t provide a secure connection
localhost sent an invalid response.
ERR_SSL_PROTOCOL_ERROR

NOTE: opening http://127.0.0.1:8081 does load, however all socket.io requests are showing the ERR_CERT_COMMON_NAME_INVALID error in the console.

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

Affected platforms

Browsersync use-case

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

gulp.task('buildServer', (cb) => {
  if (!browserSync.active) {
    return browserSync.init({
      proxy: 'localhost:3000',
      port: 8080,
      https: {
        key: './assets/localhost-ssl-certificate/localhost.key',
        cert: './assets/localhost-ssl-certificate/localhost.crt',
      },
      ui: {
        port: 8081,
      },
    }).emitter.on('init', function () {
      console.log('Browsersync is running!')
      return cb()
    })
  } else {
    return pump([
      gulp.src(paths.server),
      gif(browserSync.active, browserSync.stream()),
      notify('Build Server Reloading')
    ], cb)
  }
})
michaelalhilly commented 4 years ago

i'm having the same issue over http. The app is loading fine I just can't access the Browsersync UI because the host is set to localhost and not the host I set in the proxy option. I'm using the following:

Mac OS: 10.15.6 Docker: 19.03.12 Node.js 12.18.3 Webpack 4.44.1 Browsersync: 2.26.12 browser-sync-webpack-plugin: 2.2.2.2

Browsersync options:

host: "0.0.0.0", port: 3000, proxy: "http://0.0.0.0:3100/", open: false,

alexkuc commented 3 years ago

There is undocumented parameter listen:

https://github.com/BrowserSync/browser-sync/blob/d7cdcec3148265b1012765763ce8c8db9c26240d/packages/browser-sync-ui/lib/async.js#L71-L74

To use it, simply do:

module.exports = {
  listen: 'my-domain.com'
}

Unfortunately, it is hard-coded to use http.

If you are curious, listenHost comes from here:

https://github.com/BrowserSync/browser-sync/blob/d7cdcec3148265b1012765763ce8c8db9c26240d/packages/browser-sync-ui/lib/async.js#L65

Note that using listen parameter disables local access completely!:

[02:21:55] Starting 'watch'...
[Browsersync] Proxying: <domain>
[Browsersync] Access URLs:
 ------------------------------------
 Local: <domain>:3000
 ------------------------------------
    UI: <domain>:3001
 ------------------------------------