CODEWITHSUNDEEP
httpsbrowser-sync
wheleph
wheleph

Reputation: 8354

browser-sync cannot proxy https-websites

I use browser-sync 2.11.1 with OS X Chrome 48.0.2564.97 (64-bit)

When I use it as a proxy for http-website:

browser-sync start --proxy http://example.com

it works great and I can point multiple browsers to localhost:3000 so that actions done in one of them are replicated in others.

However when I use it for https-website:

browser-sync start --proxy https://twitter.com

it doesn't work. When I point browsers to localhost:3000 they do not show up in "Current Connections" of browser-sync UI and also the actions are not replicated between them.

Maybe it has something to do with my browser complaining about https: https-error

Is there a bug in browser-sync or am I missing something?

Upvotes: 8

Views: 8824

Answers (3)

Ryan
Ryan

Reputation: 24073

How to get secure gray lock icon in Chrome when using BrowserSync and xip.io and Wamp

First, generate .key and .crt files for localhost by running this in WSL or whatever you use for Bash:

cd /mnt/c/wamp64/certs/
openssl req -x509 -out localhost.crt -keyout localhost.key \
  -newkey rsa:2048 -nodes -sha256 \
  -subj '/CN=localhost' -extensions EXT -config <( \
   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

Use PowerShell to tell Chome to trust that .crt file:

PS C:\wamp64\certs> certutil -addstore -enterprise -f "Root" .\localhost.crt

Completely exit Chrome (not just some tabs) by clicking ⋮ > Exit.

My BrowserSync options:

{
    proxy: {
        target: "https://myapp.192.168.1.113.xip.io" // Proxy an EXISTING vhost. Browsersync will wrap your vhost with a proxy URL to view your site.
    },
    host: "localhost", //the crt must have been created to match this (probably)
    https: {            //https://browsersync.io/docs/options/#option-https        
        key: "C:\\wamp64\\certs\\localhost.key", 
        cert: "C:\\wamp64\\certs\\localhost.crt"
    },
    port: 3000
}

Now https://localhost:3000/ works with a gray lock icon in the top left, as it should.

Upvotes: 3

Kareem
Kareem

Reputation: 5422

You might need to set https to true

browserSync({
    proxy: "http://example.com/",
    https: true
});

if that doesn't work try to append the https url to browserSync

browserSync.init({
    socket: {
              domain: "https://example.com" //with port if any => localhost:3000
            },
    proxy: 'http://example.com'
});

Upvotes: 3

wheleph
wheleph

Reputation: 8354

Apparently https://twitter.com is just a bad example. When I try https://about.gitlab.com/ the synchronization between my browsers does work:

browser-sync start --proxy https://about.gitlab.com/ --logLevel debug

According to the maintainer of browser-sync:

any large site like twitter has multiple techniques in place to prevent proxing like this - and rightly so.

Browsersync is a development tool to be used on local addresses that you're working on - in those cases it will work fine with HTTPS - you'll just have to click accept on the warning about self-signed certs :)

Upvotes: 5

Related Questions