Calling the Defender API from the browser

We want to set up some monitoring on behalf of the user.

First, we ask for the user's API key and secret. Then we want to help them set up some Sentinel notifications. All this happens in a react app in the browser (no backend).

Currently, the preflighted (OPTIONS) request fails. The error in the response header: x-amzn-errortype: MissingAuthenticationTokenException.
It's not possible to set the headers for the preflighted request. However, I experimented with setting the Authorization and X-Api-Key headers on the OPTION request. This resulted i a x-amzn-errortype: IncompleteSignatureException error. According to https://aws.amazon.com/premiumsupport/knowledge-center/api-gateway-troubleshoot-403-forbidden/ this indicates: "A request with an "Authorization" header is sent to an API resource path that doesn't exist.".
This makes me wonder if the Defender API handles OPTION requests at all. If this is the case, it prevents the browser from calling the Defender API.

I am wondering if I am doing something wrong or if it could be possible to update the Defender API to be callable from the browser (cross-origin)?

Also, for use cases like this, it could perhaps make sense to make the defender-sentinel-client NPM package usable in the browser, not just in Node.js.

Hey @manboy! Indeed, the Defender programmatic API is not intended to be used from the browser, and the client npm packages are meant to be nodejs-only. The use case you mention is super interesting, but I'm wondering if it wouldn't be better served by some sort of OAuth flow.

I'll add this topic for discussion with the team!

1 Like

Thank you for the fast response :smile:

For now, I think we will just wrap the calls in some sort of cloud function.

However, it would be nice if we could do this all from the browser. Especially for entities that don't have the option to use a centralized backend.