How can I hide S3 keys in a javascript (react native) application from the user?

Question

I have an app that uploads files to an S3 bucket as part of it's functionality. I've gotten the app to work but the keys to the bucket are in the app files so a user can just see the keys if sufficiently motivated. I've already configured the key to have limited permissions but what can I do to prevent the user from seeing the keys at all or at least obfuscate them?

Answer 1

There is little you can do to hide them from your user if the frontend of your application needs to read them.

Depending on your use case there are a few scenarios you could take a look at.

Firstly you could replace the permanent credentials with temporary credentials, to do this you can make use of the service AWS Cognito.

By using this you can generate temporary credentials based on one of the following approaches:

• If the user has to login, they can be attached to a cognito user that will have temporary credentials generated for them.
• Cognito also supports an anonymous user (a guest user) which also grants temporary credentials.

Another approach you can take if the application is primarily write based is to use a pre signed S3 URL to upload objects. This would combine an API Gateway with a Lambda to generate this for you, therefore no credentials would be stored on the frontend. Take a look at this article for more information on how to handle the approach.