API Token in Browser?

Maybe I’m missing something here, but your docs for the Javascript API, say to put the API token in the client const client = buildClient({ apiToken: '<YOUR_TOKEN>' });

However, then the API token is exposed in the client. How is this secure for write access? Anyone can find the token and start performing requests against the project and writing data? What am I missing here? Generally, tokens are not supposed to be exposed in the client or else they are stolen and misused.

Hello @osseonews and welcome to the community!

The JavaScript client has two versions, a browser version and a NodeJS version, that differ mostly on the file upload method and have parity in almost everything else.

The Full Access API token should generally only be used in the NodeJS version, there you can do all your operations without any worries as the token will always be private.

When it comes to the Browser version, we don’t recommend using the Full Access API token on public environments, if absolutely necessary, only use them in pages blocked by some kind of authentication, or restricted to users that should have access to that kind of privileges (Like an admin dashboard, or an external product managing page)

You also can create several types of tokens and tweak their permissions according to your needs. So if you want, you can create (or just use the default) read-only token to perform requests from the client side. This token will only allow the user to make read-requests (and can be restricted to only read certain models)
This would allow direct client->dato requests without any major security concerns.

Although, as a general recommendation, doing a request from the client-side to a Node server that manages the requests to dato privately is the way to go in the majority of cases.
Or, even more commonly, using an SSG, you can let the Node server manage the requests to Dato, render a static site, and serve it to the user.

Thanks. That’s what we ended up doing anyway.

I came to the forum to assert this.
Was also thinking that the best way is to not expose a token in the client but proxy it all to your own backend that calls the DatoCMS endpoint.

It depends on the framework your using, but the general idea would be:

To create an endpoint in your applicaiton that accepts HTTP requests, inside that endpoint you would get the search parameter passed by the request use it to do the Dato request, get the response from dato, and return as a response to that HTTP request.

This way, in your application, you are simply doing an HTTP request to an internal endpoint and getting a response, and the Dato token is only use inside the clientside function