1

I'm about to deploy my personal blog, which is built in VueJS and will be hosted and delivered by a web-server written in Go. The posts of the blog are stored and managed by a CMS (ButterCMS) and I retrieve the content I need via fetch API.

While testing and building, I always run it locally so I could keep the CMS secret key hard-coded, but of course I can't deploy it like this. I need to store the secret key somewhere and I saw some articles suggesting to store it in a .env file in the root directory of the project and then reading them via process.env.<key>. While this approach is is wildly explained online, I also found a lot of sources where this method is not recommended at all (also on Vue docs)

So how am I going to do this? Where or how should I store private keys?

Thank you very much!

Improve this question
1
  • You can't. Anything that's loaded to the client side is not a secret. Commented May 28, 2024 at 23:00

1 Answer 1

Reset to default
1

First off, if you're having a static website with some content coming from a CMS, you should be using NuxtJS rather than an SPA-only approach for performance and SEO reasons.

You have several ways of hiding something that you're doing on the frontend. Some tokens might even be meant to be exposed publicly, not sure about yours specifically.
But if you're using Nuxt, the easiest way would be to use SSG to generate your project and use the given token at build time. That way, once deployed your users will only see the finally generated project and not the in-between process (skipping the need to have any token).
This is of course assuming that you do not have any runtime calls using this token. But I don't really see why you would, to begin with.

If you do not care about having some automatic CI/CD, you could even work on your project, build it locally, and ship it with all the static assets on the platform of your choice.

To come back to your questions, using env variables is totally fine. The important part is to know in which context you are so that a private one is not exposed while you think it would be private.
In VueJS, you don't really have a lot of ways to hide anything. But you could use your Go server as a middleware or any kind of cloud function for that purpose (obfuscating the token by letting a middleware server do the job and server the result back to your app).

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

That's exactly what I thought of, and also the approach I'm taking for google recaptcha: fetching the middleware and let it do the job. However, I hoped there was some "trick" built inside the framework that I did not know (still learning Vue), but I guess It's just another framework at the end of the day. Many thanks! PS: Thanks also for the tip on NuxtJS, I'm def going to learn more!
@NicolaM94 you could maybe use a build trick with Vite, but a runtime frontend framework can only do so much haha. VueJS is only meant to help you manage your UI with state, no safe and bullet-proof shenanigans are recommended there.
Yeah, I'm usually working more with data structures and data analysis, this little blog was supposed to be a fun side project so I could also learn some frontend to build (maybe, one day) also some other apps on my own. Terrible idea hahahaha
@NicolaM94 that's a nice move to always learn something new! Might be quite challenging for sure but you're showing up at least. Also, a headless CMS is not always the most pain-free approach. Maybe give a try to this some day: content.nuxt.com

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.