Use Sentry in frontend without exposing secret client key

[pkruithof]

We have a regular server application with a frontend. We've been using Sentry to capture events from the backend and would like to start capturing events from the browser as well. As far as I can tell we'll have to include the client key in the browser for this, which would expose it to the public. Now, we can (and will) specify which http origins we allow events from, but what about someone using this client key to just generate some server-side script and spam our project with events?

I don't see any way in the settings to have a separate public key to use in browser context, while using a secret key for our server-side component. What's the recommended approach here?

[smeubank]

hi @pkruithof

We are aware of this concern, but in truth I can't say that I recall ever hearing of this happening to someone. You could consider having 2 separate projects, 1 for your server app and one for your frontend. Then you would have a DSN and project per app. You have to sentry inits in your setup correct?

You can also create additional DSNs in project settings: https://sentry.io/settings/projects/[your-project-slug]/keys/

What is your setup exactly? Is it a php laravel server app with vue for example? It is a user facing frontend, or an admin dashboard type thing?

[pkruithof]

Our setup is a Symfony backend with a vanilla-js, user faced frontend (well it uses Stimulus but that's about it). I asked around our organization and other teams did the 2-project setup like you mentioned. This seems a bit weird though since you have to setup and manage separate projects, and it gets harder to correlate certain events (maybe some backend change triggers issues in the frontend). So I'd rather have the single-project setup.

While I don't think it's a security risk per se (although I'm not sure if you can read data with the client key?), and it's mainly an inconvenience should this key get used by others for spamming, all security-related experience/knowledge I have dictates a principle of least privilege.

It would be great if you could have 2 types of client keys:

• one which you can use from a server-side platform, this should be kept secret then
• one with you can only use from a javascript/browser context, and is limited by the origin

[smeubank]

no problem!

(maybe some backend change triggers issues in the frontend). So I'd rather have the single-project setup.
this is a use case of distributed tracing if you mean in an in app problem. if you mean code changes, it should just be a matter of setting up releases for the FE and BE correctly

either way I appreciate your teams feedback

[smeubank]

Sorry cycling back through discussions after OOO. @pkruithof you can generate multiple DSNs for a single project in Sentry. Go to project settings for the project then under SDK setup go to Client Keys. You can generate different DSNs to using your projects and set different config options

https://sentry.io/settings/projects/your-project-slug/keys/

[pkruithof]

I know about that, what I would like is that you can configure one of those client keys to only accept events from the browser. (I elaborated this in my previous post)