I have a typescript application from which I need to connect to Azure blob storage. I have placed the blob connection string details in Azure key vault service. But to call the key vault URL to access those keys and secrets, I need to include Client ID, Client Secrets in my Typescript page. But as its a front end page anyone can see those secrets from browser console. How we can we get rid of this situation. any one solution to below may solve my problem. Kindly let us know.
1.Is there any way to hide these secrets from browser console window. So it will not visible in browser.
2.Is there any way to use other authentication to Azure key vault from typescipt page without providing client id and client secrets.
No. If your app can see it, so can the user.
Yes, though I think this would be a bad idea. Accessing Key Vault on behalf of the signed in user would work without a secret but the connection string is still visible and would allow a user continued access to Blob Storage.
A better option here could be to access Blob Storage as the user.
user_impersonationpermission on Azure Storage from API permissions tabhttps://storage.azure.com/user_impersonationNo access key is needed, there are no secrets given to user. It is all based on the user's access, not the app's. Since we can't authenticate a front-end app, this is what we can do in a front-end.
The other alternative would be to make the requests from a back-end application.