1

I'm trying to develop a desktop app which would need to make a few private API calls, authenticated using some secret keys.

The keys are created for me by external IT service providers outside of my organisation - they are responsible for the security so there are a few constraints:

  1. They said even though they have already taken steps on their end to secure the API and there are mitigation strategies in place even if a breach happens, but still they would like to make sure that I treat the keys with a security-conscious mindset and take whatever steps possible on my end as well to make sure they remain secured.
  2. I'm not allowed to just create random middleware / gateway on a private server or serverless platform to perform the API calls on my app's behalf as these calls may contain business data.

I have done some research and from what I can find, the general recommendation is to set up a ".env" file in the project folder and use environment variables in that file to store the API keys.

But upon reading the Vue CLI documentation I found the following:

WARNING

Do not store any secrets (such as private API keys) in your app!

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

So, given the constraints, is there a way to store these keys securely in a Vue CLI 4 + Electron Desktop app project?

Thanks.

tam
  • 21
  • 5

1 Answers1

0

In general, especially if you have a lot of environment variables, it would be better practice to store environment variables in a dot env file (.env), however, it's possible that this file could be leaked when you package your electron app. So, in this case it would be better to store your environment variables from the terminal/command line. To do so follow this guide (https://www.electronjs.org/docs/api/environment-variables).

Keep in mind anything that requires the API key/private information try to keep it on the backend, i.e., the electron process and send the results to the Vue front end.

Here's an example of how you could implement this:

On windows from CMD:

set SOME_SECRET="a cool secret"

On POSIX:

$ export SOME_SECRET="a cool secret"

Main process:

// Other electron logic
const { ipcMain } = require("electron");

// Listen for an event sent from the client to do something with the secret
ipcMain.on("doSomethingOnTheBackend", (event, data) => {
    API.post("https://example.com/some/api/endpoint", {token: process.env.SOME_SECRET, data});
});

Client side:

const { ipcRenderer } = require("electron");

ipcRenderer.send("doSomethingOnTheBackend", {username: "test", password: "some password"});

Also note, to use the ipcRenderer on the client side nodeIntegration needs to be enabled.

Here are some more resources to help you get started:

https://www.electronjs.org/docs/api/ipc-renderer

https://www.electronjs.org/docs/api/ipc-main

Ameer
  • 1,980
  • 1
  • 12
  • 24