How to prevent APIs getting exposed on JS files

Hello, I am using ghost on Github, I am building some free AI tools for pages on ghost, as api’s getting exposed on js file (you can see api when user view page source), i tried using .env but its not supported as i see in another thread, tried gitignore, but it turns out 404 API error everytime, is there way to get api’s from server side instead of hard coding into js/.hbs

please provide sample code if you know any way.

You will need to set up a separate server or cloud function that receives requests and makes and returns the api key protected route.

you mean create subdomain for example api.mydomain.com to fetch api’s from them?

Sure. This isn’t really a Ghost question, this is a javascript in the browser question. :slight_smile:

It’s never OK to have a secret API key in the client, i.e. the browser. If you have a secret key you need to protect, it needs to live on a server somewhere, where the server is making the requests for your end user. Now, presumably, you are going to do something to check that the end user is allowed to make requests of your server, or else you’ve just added extra complexity without any benefit.

Handlebars is processed on the server, but the server does NOT run javascript uploaded in the theme. The javascript in your theme is run by the user’s browser (the client), and so having API keys there is not secure if they’re secret keys.

While the server (which is Node) also runs javascript, that javascript lives within the core of Ghost, not within the theme.

Hope that helps!