WebpackDevServer + https + Safari mobile = Page reloads constantly

[mimshwright]

This issue was previously reported but the issue marked closed. I'm re-introducing it to hopefully bring it to your attention again. #868

• Operating System: MacOS 10.13.3 / iOS 11.3
• Node Version: 8.9.0
• NPM Version: 5.7.1
• webpack Version: 4.0.1
• webpack-dev-server Version: 3.1.0

• This is a bug
• This is a modification request

Code

https://github.com/mimshwright/wps-bug

Expected Behavior

When loading a page served by WebpackDevServer with https enabled in Safari, the page should load normally.

Actual Behavior

The page continuously reloads.

It appears the browser reloads as soon as the full content of the HTML is loaded. When I first discovered the bug in a rather substantial code-base, it was reloading every 3 or 4 seconds. However, when I run a barebones demo I see the page refresh several times per second and nothing ever gets drawn to the screen.

How can we reproduce the behavior?

Load a page served by WebpackDevServer with HTTPS enabled over a local network in Mobile Safari.

[dokkis]

I am experiencing the same issue on Safari mobile using the Safari of iOS simulator.
On desktop everything works fine in Safari and Chrome.
Were you able to solve it somehow?
Thanks!

[danilowanner]

I am running into the same issue. The log displays this error:

WebSocket network error: The operation couldn’t be completed. (OSStatus error -9807.)
close — client:170

As far as I can tell Safari does not accept the SSL certificate for the web socket connection. I have not found a workaround so far.

[44db]

+1

[ughitsaaron]

+1

[ughitsaaron]

It's not at all an ideal solution but I was able to at least stop the constant reloading by setting inline: false.

[LukeMizuhashi]

+1

[LukeMizuhashi]

For what it's worth--if you don't mind using an SSL certificate that requires a little sysops setup on your part, you can use https://letsencrypt.org/ to get free certificates for your dev environment that are trusted by most systems.

If you don't mind using certificates where your private key may or may not be private, try https://zerossl.com/ , an online tool that uses Let's Encrypt as a backend to generate valid certificates for SSL.

Once I had a valid SSL Certificate coming out of my Webpack Dev Server, this bug went away on iOS Safari.

// ...
devServer: {
    inline: true, // Yeah!
    https: {
        key: fs.readFileSync("< path to your private key >"),
        cert: fs.readFileSync("< path to your valid certificate >"),
    },
    public: '< your domain name for your development environment>',
    host: '< an ip address that works for you, maybe 0.0.0.0 >',
    port: 443,
    // and so on
},
// ...

[phil-lgr]

I think webpack-dev-server is fine, here is how I made it work:

• Install mkcert https://github.com/FiloSottile/mkcert
• Generate a CA and certificate for your project, make sure to include the external ip, e.g:

mkcert --install
mkcert 192.168.86.42 localhost 127.0.0.1 0.0.0.0

• on my iPhone I sent my certificate by email (the PEM file is fine) and accept it with the mail app
• on iOS, go in About > Certificate Trust Settings, toggle Enable Full Trust For Root Certificates
• make sure you start webpack with --host 0.0.0.0 --cert=./<your.pem> --key=./<your pem key> --https
• on Safari, navigate to https://192.168.86.42:9000

[alexander-akait]

Problem in Safari, we use node API for running server over https (https://github.com/webpack/webpack-dev-server/blob/master/lib/Server.js#L596). Looks this happens not only for webpack-dev-server https://stackoverflow.com/questions/18964175/how-to-fix-curl-60-ssl-certificate-invalid-certificate-chain. Some Safari version doesn't have good support for self-signed certificates and/or disable support self-signed certificates due security reasons. We can't solve this problem on our side. Feel free to experiment and feedback, also feel free to improve docs about this limitation.

Ref: https://www.osstatus.com/search/results?platform=all&framework=all&search=-9807

[philipbordallo]

I ran into this issue as well, usually when going between different projects that use webpack-dev-server and https. What worked for me, albeit a somewhat excessive solution, was clearing the iOS Safari browser data (Settings → Safari → Clear History and Website Data).

[Jianrong-Yu]

mkcert 192.168.86.42 localhost 127.0.0.1 0.0.0.0

This solution works, but the pem file mailed to the iPhone is not the pem file for webpack, but the CA pem file which you can find it by command:

mkcert -CAROOT

More details here: https://github.com/FiloSottile/mkcert#mobile-devices