How to make a private call when using SSR Nuxt?

Question

I am writing a headless solution for a WordPress website and noticed that for one particular endpoint, I need to authenticate to pull some data that will be used publicly. But, I'm concerned that where I'm using it will expose it to the web.

In my store/index.js I use the nuxtServerInit action method to execute some actions and I pass them some objects they need to fulfill their tasks:

async nuxtServerInit ({ dispatch }, { $axios, app }) {
  await dispatch('initialize', { $axios, app })
},

$axios is passed because it will be used to query the API, and app is passed to help build the options to authenticate the request.

Is this a security vulnerability in Nuxt SSR? I think it is. If so, where are the only valid areas you can use secrets? asyncData ()?

Answer 1

If you're using SSR, you can use the privateRuntimeConfig runtime object and pass your secret in the nuxt.config.js file

export default {
  privateRuntimeConfig: {
    apiSecret: process.env.API_SECRET
  }
}

If you read the documentation of nuxtServerInit, you can see that

Vuex action that is called only on server-side to pre-populate the store

Since this method is server-side only, you can use apiSecret (in my example) and it should be totally fine security-wise.

PS: Keep in mind that everything beyond what is generated on the server (hence, with NodeJS or nuxtServerInit) is "public". So your VueJS's client code lifecycle hooks are public: mounted(), fetch(), asyncData() because they will be visible on your browser's devtools.

---

Also, should your endpoint be that critical? If so, nuxtServerInit is the good way to go. If you need to fetch some more data in a "private way", you'll need to proxy it through some backend to hide the sensitive info and retrieve only the useful public data.