Https dev server locks mobile Safari in infinite redirect loop

[Trevald]

Describe the bug

Using https causes infinite redirecting behaviour in iOS Safari

Reproduction

1. Set the server to use https
2. Visit the dev site using iOS Safari and one of the network IPs
3. Confirm the "Visit unsecure web site"
4. Site keeps re-loading rapidly, switching between site URL and certificate warning URL

System Info

• vite version: 2.0.4
• Operating System: MacOS 11.2.1, iOS 14.4
• Node version: 14.0.0
• Package manager (npm/yarn/pnpm) and version: Yarn 1.22.5

Logs (Optional if provided reproduction)

1. Run yarn dev using https

[airhorns]

I think #1992 will fix this

[Kashuab]

Can confirm this is still an issue @ 2.3.6. I've tried the latest as well as 2.2.4 (which seems to the the version that included #1992 ?) and both are affected.

Here's my vite.config.ts if it helps at all:

import { defineConfig, PluginOption, ViteDevServer } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import reactRefresh from '@vitejs/plugin-react-refresh';
import replace from '@rollup/plugin-replace';
import { config as loadEnvironment } from 'dotenv';

loadEnvironment();

export default defineConfig({
  build: {
    outDir: __dirname + '/dist',
    // Keep the /dist folder clean by purging it before each compilation
    emptyOutDir: true,
  },
  publicDir: '../public',
  root: 'src',
  plugins: [
    // enable hmr for react components
    reactRefresh(),
    // resolve tsconfig paths
    tsconfigPaths({ root: __dirname }),
    // replace node env vars with import.meta env vars
    replace({
      'process.env.VITE_USE_MSW': 'import.meta.env.VITE_USE_MSW',
      preventAssignment: true,
    }) as PluginOption,
  ],
  esbuild: {
    // esbuild does not transpile React 17 style yet, so we just add an import
    // statement everywhere automatically.
    // https://github.com/evanw/esbuild/issues/334
    jsxInject: "import React from 'react'",
  },
  server: {
    port: 4000,
    host: '0.0.0.0',
    https: true,
    proxy: {
      '^/api/.*': {
        target: process.env.VITE_API_URL,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        secure: false,
      },
    },
  },
});

Unfortunately I can't do any sort of debugging, because the Safari inspector doesn't show any activity while the loop is occurring.

[speigg]

Also can confirm, this was NOT fixed by #1992

[Kashuab]

Here's a workaround (Mac specific instructions):

1. Install mkcert
2. Generate a cert $ mkcert localhost <your local IP, i.e. 192.168.1.51>
3. Point vite to the generated key and cert .pems:

{
  // ... your other config ...
  server: {
    https: {
      key: './key.pem',
      cert: './cert.pem',
    },
    host: '0.0.0.0',
  }
}

4. Locate mkcert's rootCA.pem file by running the following command:

$ mkcert -CAROOT

5. Copy the outputted path, open finder, go to Go > Go to folder, paste in the path and hit "Go"
6. Unlock your iDevice
7. Airdrop the rootCA.pem file to your iDevice
8. Open your settings app, at the top you should see an option to install the downloaded profile
9. When done, go to Settings > General > About > Certificate Trust Settings (at the bottom) > Toggle full trust for the mkcert root certificate

You should now be able to view your local app by entering your local IP in safari, i.e. https://192.168.1.51:4000

[airhorns]

@speigg were you using a self signed SSL cert?

[speigg]

@airhorns yes

[jzs11]

It happens to asp.net core web as well.

[sapphi-red]

I confirmed this still happens.
I tested with 2.0.4 and 2.3.0 and 2.9.9 and 3.0.0-alpha.7.

[timothyallan]

Still happens with 3.0.0-beta.2, cannot debug/run on iOS over https with Charles Proxy at all without the infinite redirect loop. Works fine on desktop browsers.

.

[bluwy]

I can't reproduce this with iOS 15.5. Connecting the web inspector to macos didn't show anything different. My repro is:

pnpm create vite vite-ios-https
cd vite-ios-https
pnpm i
pnpm update vite@beta
pnpm dev --host --https
# then visit the network url on mobile

[nichita-pasecinic]

Still reproducible on IOS 14.8.1

[sapphi-red]

Closing as I believe #9007 will fix this.
If you still have this issue happening after upgrading to v3.0.0-beta.10+, please create a new issue.