Search code examples
vue.jsvuejs2middlewarenuxt.jsapi-key

How to secure API Key with Nuxt and verify

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)!

Solution

  • 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.