API key exposed in app head in script tag

[joe-dematteo]

Is it known that the apiKey is exposed in the head tag?

If so is there a recommended way to avoid having this apiKey seen publicly?

[Baroshem]

Hey,

Good question!

When setting required configuration for the module, you need to pass both apiKey and application Id. These two variables are then added to public runtime config because they are needed for the algoliasearch library to work correctly on both client and server side.

Because of that, both these variables are exposed and easily accessible on the browser.

Normally I would say that these kind of variables should be hidden somewhere on the server side as env variables but when I was looking at the official Algolia docs, I realised that in almost all examples they use the algoliasearch library, it is using very similar approach.

For example, if you inspect the request that is being sent from your browser to fetch search results, it will contain headers that are populated with the variables that I mentioned above.

I also looked at the Algolia dashboard and it seems that adminApiKey should be hidden while normal apiKey can be easily used.

[joe-dematteo]

Hey,

Good question!

When setting required configuration for the module, you need to pass both apiKey and application Id. These two variables are then added to public runtime config because they are needed for the algoliasearch library to work correctly on both client and server side.

Because of that, both these variables are exposed and easily accessible on the browser.

Normally I would say that these kind of variables should be hidden somewhere on the server side as env variables but when I was looking at the official Algolia docs, I realised that in almost all examples they use the algoliasearch library, it is using very similar approach.

For example, if you inspect the request that is being sent from your browser to fetch search results, it will contain headers that are populated with the variables that I mentioned above.

I also looked at the Algolia dashboard and it seems that adminApiKey should be hidden while normal apiKey can be easily used.

Interesting. So I'm assuming a path to take is using SSR with Vueinstantsearch as described here?
https://algolia.nuxtjs.org/advanced/vue-instantsearch#using-vue-instantsearch-with-ssr

[Baroshem]

Generally yes, but recently users have issues with setting this up.

#173

You can also use useAsyncAlgoliaSearch composable as it will request the data on SSR and return it to you as pure html.

However, the case for apiKey could be reviewed as maybe there is a way to add the keys as private runtime config.

Maybe we could create a new configuration option named for example 'hideKeys' or 'usePrivateConfig' that when enabled would disable adding keys to public runtime config so that they can only be used in useAsyncAlgoliaSearch and SSR for VueInstantsearch and they are not exposed to head?

What do you think about this idea?

[joe-dematteo]

I think that allowing the config option to keep the keys in the private runtime config would be a good option for sure.

[Baroshem]

Ok sounds good to me as well.

Would you be interested in contributing that feature? I can provide all the help needed :)

[joe-dematteo]

Yes, I can look into integrating this feature. I'll come back if I need help.