SharePoint Adaptive Cards (SPFx ACE) - Base64 Images only render correctly once in Firefox

[chookhen60]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

None

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser version:
  • FF: 133.0.3
  • Chrome: 131.0.6778.205,
  • Edge: 131.0.2903.112
• SPFx version:
  • v1.20 (originally tested on an existing v1.15.2 project, and was still broken after upgrading all SP packages (and associated packages) to their latest version as part of my own investigation)
  • Also tested on brand new 1.20-based project via npm install @microsoft/generator-sharepoint@latest --global and yo @microsoft/sharepoint
• Node.js version: v18.20.5 (for 1.20)

Describe the bug / error

Using an SPFx ACE to render images via base64 has issues, specifically with Firefox.

Using a brand new project created via yo @microsoft/sharepoint, and updating the JSON Adaptive Card QuickView schema to include a base64 image, will result in an Adaptive Card quick view where the image only works the first time the Quick View is opened, and will be a broken image on subsequent requests.

Digging into this further, I found the following reason as to why this is happening. Observe the following image result in the raw HTML outputted:

1. The first time the Quick view is opened:
   • 
     • (the image src is correctly the base64 contents)
2. Subsequent times:
   • 
     • (the image URL is completely changed, possibly suggesting a cached version attempting to be used?)

Going further into this, the URL that's getting replaced for subsequent openings of the quick view contains a base64-encoded URL of https://mySharePointSite.sharepoint/com/data:image/jpeg;base64,---base64ImageHere---

• In our production ACE, This results in a 414 and the image breaking as seen above
• I spun up a developer 365 environment to test a barebones card too, and there, it seems more likely to have an error in the Network tab of the DevTools console showing as NS_ERROR_NET_INTERRUPT, and no response coming back from the server. These differences might be due to image size, but this element of it is currently unclear, although the same ultimate result occurs for the user in the Firefox browser

Somewhat more odd, if I hard-refresh the page for Firefox, ctrl+F5, the quick view will work perfectly fine every time, until I do a soft-refresh or navigate away from the page and return, at which time the bug happens again.

• Which adds further fuel to my theory of it being caching-related, but it is pure speculation based on my limited understanding of what's actually happening here

Steps to reproduce

1. Create a new project via yo @microsoft/sharepoint
2. Add an image to the Adaptive Card JSON (i.e. QuickViewTemplate.json where the URL is a base 64 image (replace the url with a properly formatted base64 image
   • e.g { "schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.5", "body": [ { "type": "Image", "url": "data:image/jpeg;base64,Base64ImageHere" } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json" }
3. Run gulp serve and if required open the resultant workbench URL in Firefox
4. Add the adaptive card into the workbench, click Preview in the top right
5. Click the 'Quick view' button - the image will work the first time, and be broken for all subsequent clicks of the 'Quick view' button

The same issue will not occur in Edge/Chrome and the image works everytime without issue.

NOTE: The same URL failure does occur in Edge/Chrome too, and I'm unaware where that call is coming from, but it doesn't try to use it in the DOM like Firefox does.

Expected behavior

The Image appears correctly every time the Quick View button has been pressed.