2

I'm building a Vue app that works as a SPA that gets rendered by my Express backend. In this Vue app I'm using environment variables. One of these variables is an API key to an external API service. Obviously I don't want to show the whole world my API key, however after I run the build command it includes all the env variables in the Javascript files, which I believe makes it accessible to anyone.

What would be the right way to go here? Should I make a route in my Express backend that handels requests to this external API, so that I can safely store my API key on the server side? Or is there a way to make my Vue app autonomously send requests to the external API without having to show the API key?

I'm using Vue 2 by the way.

Improve this question

2 Answers 2

Reset to default
2
  1. Yes you should make a backend that will interact with API using your key instead of the front end doing that no matter which version of VueJs your are using
  2. VueJS is front end javascript, which mean users can see the code even minified on their browser
  1. is what you are looking for
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

If you use Firebase, you have no choice but to embed keys in frontend code. In this case, you add security config within Firebase console . (Like who is allowed to query firestore by filtering request source URL or role authentication)
0

Your could use Nuxt, which is an SSR solution to build your app before shipping it to production. During the build, you can get use some sensible stuff since it will run NodeJS and will be on the server only. That way, you could for example fetch some variables and let's say get the content of some blog articles. Then, it will be available on the frontend with the end result only and all your variables safe since they will be used only on the server build.

Other solution is to use your backend as a middleware to do exactly the same process of using something sensitive and just fetch the end result.

Also, serverless functions like on Firebase or Azure are great + cheap for this purpose.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.