Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

MrMister's avatar

How to send API key to SPA securely?

Creating SPA with Laravel and Vue. How can I send API keys (eg google api key, my api key) to vue without exposing it?

0 likes
3 replies
bobbybouwmann's avatar

There is no way to do this 100% save because everyone can open the developer console and inspect the code. The only workaround you have is using your backend in between. So, for example, do the API request to Google through your own backend and send the results back to the frontend. This is, however, a bit slower.

In general, you don't have to hide the API keys from google because they should whitelist certain domains from where they can fire the request. This way if you use the key on another domain, it wouldn't work. If there are problems with the key you can always refresh the key as a last solution.

This might be interested for you as well: http://billpatrianakos.me/blog/2016/02/15/securing-api-keys-in-a-javascript-single-page-app/

MrMister's avatar

Thanks, so with google it's fine but I want also to secure my own api. So for this I presume I should generate key/token valid only for frontend subdomain... Any thoughts?

Please or to participate in this conversation.