auto generated certs cannot be used for cross site requests in chrome

michealroberts commented 8 months ago

Environment

Operating System: Darwin
Node Version: v20.9.0
Nuxt Version: -
CLI Version: 3.10.0
Nitro Version: 2.8.1
Package Manager: pnpm@8.10.3
Builder: -
User Config: -
Runtime Modules: -
Build Modules: -

Reproduction

Serve a nitro server over https using:

npx nitropack dev --host --https`

Generate certificates in root folder of Vite powered web app with:

rm -rf .cert && mkdir -p .cert && mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem 'localhost'

Serve a Vue app over https with the following vite configuration:

const getSecureCertificates = () => {
  try {
    return {
      key: readFileSync('./.cert/key.pem'),
      cert: readFileSync('./.cert/cert.pem')
    }
  } catch (error) {
    console.warn('No secure certificates found. Running in insecure mode.')
  }
}

server: {
    port: 3011,
    ...((mode.toLocaleLowerCase() === 'development' || command !== 'build') && {
      https: getSecureCertificates()
    }),

Make a request from web app to the server, and receive net::ERR_CERT_AUTHORITY_INVALID

Describe the bug

Essentially, the certificate generate from using the --https flag is not really good enough for development.

Additional context

No response

Logs

No response

michealroberts commented 8 months ago

I'm wondering if I should generate certs also for the backend server with mkcert, and then pass these in on the dev command with the -ssl-* flags?

pi0 commented 8 months ago

Hi, dear @michealroberts. The lifespan of auto-generated certificates is intentionally small and also they get regenerated every time because by nature, they are unsecure certificates.

One way for better development experience, is that you use a single port and proxy the API requests.

Also you can generate a self-signed pair and manually trust it in your keychain as you suggested 👍🏼

Listhen also provides --tunnel that listens with an actual valid certificate chain for when trusting a self-generated certificate is not possible.

michealroberts commented 8 months ago

@pi0 Cool, that all makes sense. Thank you for that reply.

RE: Adding a vite Proxy for the API, can I configure it to pass credentials through. That's what I currently do...no headers are passed across.

That also rules out the --tunnel option, for now.

pi0 commented 8 months ago

You might try using Nitro server (the one behind listhen) as your main proxy. Using routeRules or devProxy you can pass /** requests to the vite instance.

michealroberts commented 8 months ago

@pi0 I'm pretty sure I would need to proxy requests to the API from the web app, so I would need to configure the proxy from within the vite.config file of the web app (correct me if I am wrong).

pi0 commented 8 months ago

Nitro server can both API routes, terminate SSL and also proxy other routes (back to the!) vite frontend server. This is also almost same as how Nuxt works.

Not sure about the issue with vite proxy not passing headers but this should work.

michealroberts commented 8 months ago

@pi0 Appreciate guidance in this.

I have managed to proxy requests from the web app to the nitro server.

Also, I feel like the help section here could also be useful. (Courtesy of @danielroe)

If you are using a self-signed certificate in development, you will need to set NODE_TLS_REJECT_UNAUTHORIZED=0 in your environment.

unjs / listhen