Description
Core Library
MSAL.js v2 (@azure/msal-browser)
Wrapper Library
MSAL Angular (@azure/msal-angular)
Public or Confidential Client?
Public
Description
I use MSAL Angular and Azure storage blobs for images and reports in my Angular PWA. It is very important that images and reports are protected and can be cached. The application is mostly accessed with mobile devices on 4G networks. I am in doubt how I should protect files in Azure storage blobs for my users (read permissions). From what I can see, you have 3 options with Azure storage blobs.
Option 1:
Name files something inhuman like a guid, but it's not really protection.
Option 2:
Use SAS token in url, but it is bad for caching because the token in url changes all the time. I found out that the service worker has an option ignoreSearch=true, who is really cool and it works, but it is extremely slow in Chrome, so slow that I cannot use it in my application. This is because Chrome stores the entire url as an index, so all indexes must be checked, and when you have a lot of files cached, it is really slow.
e.g. of datagroup:
"dataGroups": [
{
"name": "dynamicResources",
"urls": [
"**blob.core.windows.net/**"
],
"cacheConfig": {
"maxSize": 2000,
"maxAge": "30d",
"strategy": "performance"
},
"cacheQueryOptions": {
"ignoreSearch": true
}
}
]
Option 3:
Append Azure AD token in the header when requesting blob files, is good for caching. The service worker can also help with that and it looks very promising even html img tags are included.
Ref. https://www.sjoerdlangkemper.nl/2021/01/06/adding-headers-to-image-request-using-service-workers/
Feature request:
It would be super cool if MSAL Angular could help with option 3 for service worker settings or an example how?
Source
External (Customer)