How do I prevent a user from accessing a different blob by changing Image src?

Ariel K. 0
Viewed 46

I have a question regarding Azure Blob Storage security. I have already configured blob upload for my Azure web app (which is built with React Next JS), and uploaded two example profile pictures with these blob names:

  • userInfo/ProfilePictures/120252.jpg
  • userInfo/ProfilePictures/228356.jpg

(These are the literal names of the blobs, therefore a virtual hierarchy is created within my container. the 6 digits act as the file name, which is randomly generated).

Whenever I upload a file to my blob storage, I'll save its blob path in my web app's database, which I'll later use as a source for an Image tag.

but here's the issue-

Let's say that a user in my app sees his profile picture on a certain page. if this user decides to open inspect element and change the src attribute to a different path, he'll see a different profile picture. (for example, change the src path from "userInfo/ProfilePictures/120252.jpg" to "userInfo/ProfilePictures/228356.jpg") This is not secure and I wish to prevent it from happening. Any assistance or suggestions would be highly appreciated.

Additional info that might help:

  1. Currently, blob upload and access is permitted through my web app because I have an hard-coded SAS token in a backend file.
  2. My container's public access level is set to Container.
  3. Public network access for my storage account is set to Enabled from selected virtual networks and IP addresses.
azure-blob-storage azure-web-app-service next.js azure reactjs
1 Answers

Change your containers public access level to private and use SAS signatures to access your pictures.

That way your end users cannot change the path without invalidating the SAS token.

Nisd0
Related