Adding token to request header for Azure storage blob requests using service worker

[jesben]

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
        }
    }
]

Ref. https://github.com/angular/angular/issues/47567

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)

[jo-arroyo]

@jesben To clarify, you are looking for service worker support? We don't currently have any examples of this, but we will track this feature request internally and update when it is prioritized.

cc. @EmLauber

[jesben]

@jo-arroyo correct that would be super cool. I'm a fan of MSAL Angular, Azure appservice and storage account. It would be really cool to have a lib that can take care of the security for both appservice "done" and storage account.

[jesben]

Inspiration: https://gaurav-techgeek.medium.com/re-architecting-authentication-with-service-workers-ff8fbbbfbdeb

[sameerag]

Well, some of these concepts are in evaluation for us. As @jo-arroyo mentioned, we have this marked as something we want to pursue. Thanks for raising this.