Secret env keys in client

[sureshg7254]

Hii,

I want to use some secret keys loaded from .env in client side but those are not public urls

So, adding env to the script, leaking the env keys through elements and window object in browser

I tried a way like sending secret env through loader --> This is working fine and not leaking data in window object but the problem is loader calls are visible in network tab.

Can anyone help me out here, Your help & time is greatly appreciated !!

Thank you

[sergiodxa]

There's no way to send env variables to the browser without leaking them.

If you inline them in the code at build time, they will be leaked in the source code
If you fetch them they will be leaked in the response body which can be read with the browser devtools
If you send them in the HTML on a first load it will be leaked on the HTML body

When you send them to the browser you're leaking them, you could decide to encrypt them before sending them, but then to decrypt them you have to leak the key used to decrypt, which allows anyone to decrypt it too.

If you don't want to leak them, the safest thing is to do whatever you need server-side and send the result to the browser. E.g. if your keys are API keys use them to fetch the API server-side and send the API response data as a result.

[sureshg7254]

Got your point, but For some of the third party libraries i need to pass the secret keys as props.

Some of the third party libraries using as components(ex. MUI data grid license key) where we need to send keys through component props or configuration. That we can not do from server side.

How can I handle these type of cases ?

[sergiodxa]

Return it from the loader, and accept it will be leaked.

If the library expects the key to be sent to a browser then they should have the measurements to support this without being an issue.

[sureshg7254]

For example below is the way to send license key to the mui

https://mui.com/x/introduction/licensing/?srsltid=AfmBOoq8eXaz9xQFvi_RTsg73FbOZ468Wf7BSiAzW3AlZ8hvoMgKkJBm#license-key

import { LicenseInfo } from '@mui/x-license';

LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY');

That should be set from the client side code.

So here i cannot send YOUR_LICENSE_KEY from either loader or window as they will leake the key in browser window object or in network

How can I handle this type of issues !?

If the license keys are leaked, other users may misuse it.

[sergiodxa]

it's designed to be public. It's expected that the license key will be exposed in a JavaScript bundle; we simply ask licensed users not to actively publicize their license key.

In that link they say's the key is designed to be public, so there's no issue in sending it to the browser.

we recommend hard-coding the license key in git

They even say that unless your repo is public you should inline the key in the code.

So don't overthink this, keep it in the code or if you use an env variable return it from your loaders, or even use VITE_ prefixed env variables to hard-code it at build time.

[sureshg7254]

Thanks a lot for the clarification!

That makes sense now — I’ll just inline the key or return it via loaders as suggested.
Appreciate your time and help! 🙌