TLS Certificate, FIXED BACKEND, Now Frontend | Bun | Page 1

inland lodge Sep 30, 2023, 6:25 AM

#

alright I'm almost there

#

I got it working in Postman

#

#

TLS Certificate, FIXED BACKEND, Now Frontend

inland lodge Sep 30, 2023, 5:56 PM

#

#

it's working with SSL cert enabled

inland lodge Sep 30, 2023, 5:57 PM

#

inland lodge

but my frontend is complaining now

inland lodge Sep 30, 2023, 7:56 PM

#

it must work without

process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';

tardy temple Sep 30, 2023, 8:06 PM

#

Is your frontend running in a browser, or are you fetching from a server?

#

If your cert is self signed, your client is running on a server, and the server is node or node-compatible, you can try setting NODE_EXTRA_CA_CERTS to your CA file

inland lodge Sep 30, 2023, 8:09 PM

#

#

my browser can see it

#

it just my vite project

tardy temple Sep 30, 2023, 8:10 PM

#

I'll defer on the specifics that might apply if your client runs with bun, but something to this effect works for me with a client that runs in wrangler/cloudflare workers

inland lodge Sep 30, 2023, 8:10 PM

#

I was working on backend first

#

I tested it Postman

inland lodge Sep 30, 2023, 8:10 PM

#

inland lodge it's working with SSL cert enabled

Postman works with rootCA certificate with no error and this setting is enabled

#

but moving on to front

tardy temple Sep 30, 2023, 8:11 PM

#

The reason I asked about the browser is if you need fetch to work from a browser on a machine you don't control then you're going to have to abandon self-signed certs

inland lodge Sep 30, 2023, 8:11 PM

#

I specified the same key, cert, and ca files in the fs like

const keyPath = path.resolve(__dirname, './backend/key.pem');
const certPath = path.resolve(__dirname, './backend/cert.pem');
const caPath = path.resolve('./backend/rootCA.pem');

#

wait, I need to fetch tls file from the backend?

#

     tls: {
            cert: Bun.file('./cert.pem'),
            key: Bun.file("./key.pem"),
            ca: Bun.file("./rootCA.pem"),

        },

#

I'm using mkcert, how did it work on Postman then

tardy temple Sep 30, 2023, 8:13 PM

#

First question is: do you need to hit your https server from a front end that you don't control (e.g. from a user's browser)?

inland lodge Sep 30, 2023, 8:14 PM

#

I have 2 separate projects

frontend (fetches all the http reqs from backend)
backend (bun)

tardy temple Sep 30, 2023, 8:15 PM

#

does your frontend code run in the browser, or do you use something like SSR and just send prerendered HTML to a browser?

inland lodge Sep 30, 2023, 8:16 PM

#

it's SSR, I'm running it locally

#

SvelteKit

tardy temple Sep 30, 2023, 8:16 PM

#

Are you going to deploy it somewhere, or will it always run locally?

inland lodge Sep 30, 2023, 8:17 PM

#

eventually, yes, once I deploy it, I won't need this kind of setup because https is given by default

#

at the moment, I'm working on it locally

tardy temple Sep 30, 2023, 8:18 PM

#

ok, in theory all you should need is to get your OS/browser/frontend to trust your CA then

inland lodge Sep 30, 2023, 8:18 PM

#

it does

inland lodge Sep 30, 2023, 8:18 PM

#

inland lodge

my browser trusts

#

but not my frontend project lol

#

strange

#

I wouldn't see this otherwise

tardy temple Sep 30, 2023, 8:18 PM

#

so you just need your rootCA in the frontend, and you use whatever mechanism your platform exposes for CAs

inland lodge Sep 30, 2023, 8:19 PM

#

inland lodge Sep 30, 2023, 8:19 PM

#

inland lodge

current error

#

my front is running on vite

#

import { sveltekit } from '@sveltejs/kit/vite';
import { createLogger, defineConfig } from 'vite';
import mkcert from'vite-plugin-mkcert'
import * as path from "path";

const keyPath = path.resolve(__dirname, './key.pem');
const certPath = path.resolve(__dirname, './cert.pem');
const caPath = path.resolve('./rootCA.pem');

const mkcertOptions = {
    autoUpgrade: true,
    keyFileName: keyPath,
    certFileName: certPath,
    logger: createLogger(
        'info',
        {
            prefix: 'mkcert',
        }
    ),
    mkcertPath: caPath,
};
export default defineConfig({
    plugins: [
        sveltekit(),
        mkcert(mkcertOptions),
    ],
    server: {
        https: true,
    },
});

inland lodge Sep 30, 2023, 8:21 PM

#

inland lodge it's working with SSL cert enabled

i know that I had this bug before when testing in Postman, as I mentioned I had to upload rootCA to make it work

#

but doing the same thing in front doesn't do the job

tardy temple Sep 30, 2023, 8:21 PM

#

Try setting NODE_EXTRA_CA_CERTS to the path to your rootCA

inland lodge Sep 30, 2023, 8:22 PM

#

I went through this on google, I couldn't set this up

#

NODE_EXTRA_CA_CERTS

tardy temple Sep 30, 2023, 8:23 PM

#

how do you run the frontend?

inland lodge Sep 30, 2023, 8:23 PM

#

#

pnpm run dev

tardy temple Sep 30, 2023, 8:24 PM

#

what's the dev script in packages.json?

inland lodge Sep 30, 2023, 8:24 PM

#

tardy temple Sep 30, 2023, 8:24 PM

#

try NODE_EXTRA_CA_CERTS=./rootCA.pem vite dev

#

(or an absolute path)

inland lodge Sep 30, 2023, 8:25 PM

#

just right here?

#

tardy temple Sep 30, 2023, 8:25 PM

#

yup

inland lodge Sep 30, 2023, 8:26 PM

#

        "dev": "NODE_EXTRA_CA_CERTS=/Users/insidious/Library/Application\\ Support/mkcert/rootCA.pem vite dev",

#

I did this

#

worked

#

woah

tardy temple Sep 30, 2023, 8:27 PM

#

👍

inland lodge Sep 30, 2023, 8:27 PM

#

THANK YOU SO MUCH, WOAAHHH lol

tardy temple Sep 30, 2023, 8:27 PM

#

np

#

To review, for reference:

You have your OS/browser trusting your CA: this, along with your mkcert-related stuff in your front end should let you connect from your browser to your frontend
You have NODE_EXTRA_CA_CERTS set, which tells node to trust your CA: this, along with your back end tls settings in bun should let you connect from your frontend to your backend

#

And whatever you did in postman is the equivalent for the client side of these connections

#

in theory, you can generate two certs, one for your front end and one for your back end and update the relevant settings

inland lodge Sep 30, 2023, 8:34 PM

#

interesting ^

#

I must generate separate key.pem and cert.pem on both frontend and backend

#

but use the same rootCA for now?

tardy temple Sep 30, 2023, 8:36 PM

#

It's not necessary, and the benefits are slim if you're just using it locally. But yes, you would generate a separate key/cert and share the CA.

#TLS Certificate, FIXED BACKEND, Now Frontend