How to secure API Key with Nuxt and verify

Question

I am using Nuxt (with SSR/ PWA/ Vuejs/ Node.js/ Vuex/ Firestore) and would like to have a general idea or have an example for the following:

1. How can I secure an API key. For example to call MailChimp API
2. I am not familiar with how a hacker would see this if a poor solution is implemented. How can I verify it is not accessible to them?

I have found a number of "solutions" that recommend using environment Variables, but for every solution someone indicates it wont be secure. See:

https://github.com/nuxt-community/dotenv-module/issues/7

https://github.com/nuxt/nuxt.js/issues/2033

Perhaps server middleware is the answer? https://blog.lichter.io/posts/sending-emails-through-nuxtjs and https://www.youtube.com/watch?v=j-3RwvWZoaU (@11:30). I just need to add an email to a mail chimp account once entered, seems like a lot of overhead.

Also I see I store my Firestore api key as an environment variable already. Is this secure? When I open chrome dev tools-> sources-> page-> app.js i can see the api key right there (only tested in dev mode)!

Terris

Answer 1

You could use either a server middleware or https://github.com/nuxt-community/separate-env-module

Middleware itself wont work because it can be executed on client too, and code that is used in middleware will be available on client

For #2 you can check whether its included in client js sources. There way more other way hacker to get anything e.g. xss, but its general things and not much related to your code.

Talie

How does env module help exactly? I assume if I run env's on client I'm right back where I'm currently at. So are you implying its safe to execute standard middleware functions and pull env api_key when this module sets env's to server only? – Terris

@Terris yes, although middleware will be also executed on client when route changes so you will need to handle this cases – Talie

Cool I’ll give it a shot tonight. What about #2? Is dev tools-> app.js the only verification I should do? Update answer and I’ll accept when I get it to work later. Thanks! – Terris

Ended up using server middleware to avoid CORS issues from mailchimp api from client I was experiencing. Used blog.lichter.io/posts/… as a handy example reference for Nuxt API endpoint – Terris

Answer 2

How can I secure an API key. For example to call MailChimp API

The cruel truth here is NO... In the client side you cannot secure any kind of secret, at least in a web app.

Just for you to have an idea of the techniques that can be used to protect an API and how they can be bypassed you can read this series of articles. While it is in the context of an Api serving a mobile app, the majority of it also applies for an API serving a web app. You will learn how api-keys, ouath tokens, hmac and certificate pinning can be used and bypassed.

Access to third part services must be always done in the back-end, never on the client side. With this approach you only have one place to protected, that is under your control.

For example in your case of accessing the Mailchimp API... If your back-end is the one in charge of doing it in behalf of your web app, then you can put security measures in place to detect and mitigate the usage of Mailchimp by your web app, like a User Behaviour Analytics (UBA) solution, but leaving for the web app the access to the Mailchimp API means that you only know that someone is abusing it when Mailchimp alerts your or you see it in their dashboards.

I am not familiar with how a hacker would see this if a poor solution is implemented. How can I verify it is not accessible to them?

As you may already know F12 to access the developers tools is one of the ways.

Another ways id to use the OWASP security tool Zed Attack Proxy (ZAP) , and using their words:

The OWASP Zed Attack Proxy (ZAP) is one of the world’s most popular free security tools and is actively maintained by hundreds of international volunteers*. It can help you automatically find security vulnerabilities in your web applications while you are developing and testing your applications. Its also a great tool for experienced pentesters to use for manual security testing.

Carolynncarolynne

Answer 3

Storing secrets in the front-end is a big no no in terms of security.

If your website is using server-side rendering (aka SSG or static website) and is hosted on Netlify it sound like a perfect job for the Netlify functions (server side logic) and environnement variables.

You can find some documentations here : Netlify functions. Netlify functions are powered by AWS Lambda.

You would typically create a function folder into your project directory and write your functions there. Functions are built after each deploy but you can test your functions locally with Netlify Dev

Here is an example of function using Mailchimp service wit injected secrets : https://github.com/tobilg/netlify-functions-landingpage/blob/169de175d04b165b5d4801b09cb250cd9a740da5/src/lambda/signup.js

Mohammed

Can you explain further this case? For example, in order to use the Mailchimp Secret API in order to add subscribers what i need to do? – Kessiah

@StefanoFranceschetto i've edited my original post and linked an example function related to your case, let me know if this is helpful – Mohammed

Answer 4

I think privateRuntimeConfig, by which secrets are only available on the server side is another workable solution here, if you're in a situation where you only need to access an API during Server Side Rendering.

https://nuxtjs.org/tutorials/moving-from-nuxtjs-dotenv-to-runtime-config/#misconceptions:~:text=privateRuntimeConfig%20should%20hold%20all%20env%20variables%20that%20are%20private%20and%20that%20should%20not%20be%20exposed%20on%20the%20frontend.%20This%20could%20include%20a%20reference%20to%20your%20API%20secret%20tokens%20for%20example.

Mopup

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Marv