FronEnt env vars on icp,

Developers Showcase
1

I have a frontend canister with very simple functionality: an AI chat. It uses two API keys, one for Anthropic and one for OpenAI, and I’m struggling to store them securely.

Storing them with vetKeys doesn’t seem useful in my case because I don’t need a separate backend, and fetching the vetKey itself creates problems. Storing the keys on Cloudflare also defeats the purpose, because then the solution is no longer fully on-chain.

I want everything to stay fully on ICP. What is the best way to handle this securely?

2

Hi @AliSci, you can store them in the canister that serves the frontend assets if you’d like, or get that frontend canister to fetch the keys from another canister in a permissioned way. This would mean adjusting the code of the frontend canister, building and redeploying

3

you need backend canister. and you don’t need vetKeys

4

You will likely need to use the sev subnet for highest security. If you just put it in a node in a regular subnet, node providers could take your key. You could increase your security by using budgets and key rotation.

5

Store the API keys directly in the canister

If your architecture is:



Browser
    │
    ▼
Frontend canister
    │
HTTPS outcalls
    ▼
OpenAI / Anthropic

then your canister is effectively acting as the backend.

You can simply:

  • store the API keys in stable memory (or as an upgrade argument)
  • ensure there is no public method that returns them
  • restrict who can update them (typically only the controller or admin)

Other users cannot inspect another canister’s stable memory. They can only invoke public methods. If you never expose the keys, they’re not publicly readable.

This is actually how many ICP applications store API secrets today.

6

You should NOT store api secrets like this unless you are in the sev subnet. They are not secret. A node provider can observe stable memory. Ideally they won’t, but it only takes one to get your key in the wild.