[Teams v2] media.viewImages intermittently fails

[goamn]

media.viewImages() has started working in Teams v2, as mentioned in the release notes for version 2.18.0:

Added telemetry to barcode, calendar, call, clipboard, mail, marketplace and media capabilities

It works sometimes, and it fails at other times in Windows (for both web and desktop client).
Failure scenarios include:

• App crashes, error screen is shown
• Error dialog is shown with a Cancel button. Clicking the Cancel button does not close the dialog

Attaching a video of the error that is shown below. There is a CSP error in Console, it could be related.
Console error:

teams.cloud.microsoft/:1 [Report Only] Refused to load the image 'https://[REDACTED].blob.core.windows.net/main/[REDACTED]?sv=2018-03-28&sr=b&sig=[REDACTED]%3D&st=2024-02-14T13%3A03%3A53Z&se=2034-02-14T13%3A08%3A53Z&sp=r' because it violates the following Content Security Policy directive: "img-src 'self' blob: data: *.asm.skype.com *.asyncgw.teams.microsoft.com *.office.net *.giphy.com *.officeapps.live.com *.sharepoint-df.com .sharepoint.com https://statics.teams.cdn.office.net bot-framework.azureedge.net connectoricons-prod.azureedge.net content.powerapps.com docs.botframework.com i.vimeocdn.com i.ytimg.com local.teams.office.com: marketplacecdn.azureedge.net media.licdn.com outlook.office.com pbs.twimg.com raw.githubusercontent.com skypeteamsbotstorage.blob.core.windows.net statics.teams.microsoft.com substrate.office.com teams.microsoft.com urlp.sfbassets.com".

Video showing the error:

2024-05-15_21h05_51.mp4

[Dinesh-MSFT]

Hi @goamn - Thanks for raising the query.
We will look into it and let you know the updates.

[Dinesh-MSFT]

Hi @goamn,
Sorry for the delay in the response. Could please share the exact repro step with the code and manifest.
So, we will look into it and let you know the updates.

[goamn]

Hi @goamn, Sorry for the delay in the response. Could please share the exact repro step with the code and manifest. So, we will look into it and let you know the updates.

Hi @Dinesh-MSFT,
It's not easy to get a manifest but it should reproduce with the following:

1. A valid custom teams "tab app".
2. The manifest should contain a staticTab similar to the below:

  "staticTabs": [
    {
      "entityId": "index",
      "name": "Custom Tab App",
      "contentUrl": "https://[URL-TO-CDN-WITH-FRONTEND-CODE].azureedge.net",
      "scopes": ["personal"]
    }
    ]

3. The above contentUrl is pointing to an Azure Front Door/CDN url.
4. media.viewImages is called with URL's of images stored on Azure Blob storage:

  const urls = ["https://[AZURE-STORAGE-HERE].blob.core.windows.net/main/[id]?sv=[sv]&sr=b&sig=[sig]"];

  const uri: media.ImageUri[] = urls.map((value) => ({ value, type: media.ImageUriType.URL }));
    media.viewImages(uri, (err) => {
      if (err != null && errorCallback) {
        errorCallback(err);
      }
    });

5. The above will throw an error like this:

teams.cloud.microsoft/:1 [Report Only] Refused to load the image 'https://[AZURE-STORAGE-HERE].blob.core.windows.net/main/[id]?sv=[sv]&sr=b&sig=[sig]' because it violates the following Content Security Policy directive: "img-src 'self' blob: data: *.asm.skype.com *.asyncgw.teams.microsoft.com *.office.net *.giphy.com *.officeapps.live.com *.sharepoint-df.com .sharepoint.com https://statics.teams.cdn.office.net/ bot-framework.azureedge.net connectoricons-prod.azureedge.net content.powerapps.com docs.botframework.com i.vimeocdn.com i.ytimg.com local.teams.office.com: marketplacecdn.azureedge.net media.licdn.com outlook.office.com pbs.twimg.com raw.githubusercontent.com skypeteamsbotstorage.blob.core.windows.net statics.teams.microsoft.com substrate.office.com teams.microsoft.com urlp.sfbassets.com".

[goamn]

@Dinesh-MSFT I have forked the repro with the required changes to reproduce the bug here: https://github.com/goamn/microsoft-teams-library-js

1. As per the official instructions found here: https://github.com/OfficeDev/microsoft-teams-library-js/tree/main/apps/teams-test-app
2. Run these commands:

cd {monorepo root}

// Ensuring you have installed and built the Teams JavaScript client SDK
pnpm install
pnpm build

pnpm start-test-app

3. Make sure to note the changes in my forked repo or just use my forked repo.
4. Run a local Teams "tab app", make sure the Frontend URL used by the local Teams "tab app" is configured with ngrok to point to https://localhost:4000 (or if you are using my forked repo, http://localhost:3000)
5. Open the local tab app. Scroll down to "View Images With Urls".
6. Click "Default" button. Then click "View Images With Urls" button. It will crash. If not, repeat the steps with Disable Cache in Network tab of devtools.