Server sided Blazor: base64 encoded images are not working anymore

[steamonimo]

Describe the bug

We use base64 encoded images in our server sided blazor app. Theses images are created, converted to base64 and their encoding will be used to bind to the SRC attribute of the image.

With .NET 5.0 even using base64 directly will fail (see below).

This functionality is important for us. We do not want to interface with external rest APIs to create the images. This way we can reduce the attack surface of our web application effectively.

<img width="16" height="16" src="data:image/gif;base64,R0lGODdhEAAQAMwAAPj7+FmhUYjNfGuxYY
    DJdYTIeanOpT+DOTuANXi/bGOrWj6CONzv2sPjv2CmV1unU4zPgISg6DJnJ3ImTh8Mtbs00aNP1CZSGy0YqLEn47RgXW8amasW
    7XWsmmvX2iuXiwAAAAAEAAQAAAFVyAgjmRpnihqGCkpDQPbGkNUOFk6DZqgHCNGg2T4QAQBoIiRSAwBE4VA4FACKgkB5NGReAS
    FZEmxsQ0whPDi9BiACYQAInXhwOUtgCUQoORFCGt/g4QAIQA7">

In .NET Core 3.1 this works without problems.

To Reproduce

https://github.com/steamonimo/BlazorImageProblem

Exceptions (if any)

None

Further technical details

.NET SDK (gemäß "global.json"):
Version: 5.0.100
Commit: 5044b93829

Laufzeitumgebung:
OS Name: Windows
OS Version: 10.0.19042
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\5.0.100\

Host (useful for support):
Version: 5.0.0
Commit: cf258a14b7

.NET SDKs installed:
2.1.402 [C:\Program Files\dotnet\sdk]
2.1.403 [C:\Program Files\dotnet\sdk]
2.1.500 [C:\Program Files\dotnet\sdk]
2.1.503 [C:\Program Files\dotnet\sdk]
2.1.505 [C:\Program Files\dotnet\sdk]
2.1.801 [C:\Program Files\dotnet\sdk]
2.1.802 [C:\Program Files\dotnet\sdk]
3.1.101 [C:\Program Files\dotnet\sdk]
3.1.201 [C:\Program Files\dotnet\sdk]
3.1.400 [C:\Program Files\dotnet\sdk]
3.1.403 [C:\Program Files\dotnet\sdk]
5.0.100 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
Microsoft.AspNetCore.All 2.1.4 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.All 2.1.5 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.All 2.1.6 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.All 2.1.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.All 2.1.9 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.All 2.1.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.All 2.1.13 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.All 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.App 2.1.4 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 2.1.5 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 2.1.6 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 2.1.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 2.1.9 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 2.1.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 2.1.13 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 2.1.4 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.1.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.1.6 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.1.7 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.1.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.1.12 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.1.13 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.0 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

Visual Studio 2019 (16.8.1), Windows 10 (20H2)

[javiercn]

@steamonimo thanks for contacting us.

I'm not aware of anything that we specifically changed in 5.0 that can affect what you describe, but I would say that doing images in that way is a bad idea.

The problem with that is that you are creating very large objects on the heap that won't be deallocated, so you run the risk of running out of memory.

[steamonimo]

@javiercn thanks for your reply. We create the images as base64 strings and save them to variables. Theses variables are bound to the src attribute of the image. Yes, it costs memory and to my knowledge it will be freed afterwards. Our created images are containing sensitive information. With this approach we can make sure that an attacker has to overcome the barriers implemented in the signalr protocol to have access to the images. We do not want deal with securing an additional rest interface just for the image creation.

However, it it still a regression that this does not work with .NET 5

[javiercn]

@steamonimo thanks for the details.

While that's absolutely true, it's very likely that those images end up in the large object heap (>85K) and that will likely cause performance problems.

An alternate approach for this is to grab the image from the Db and send it down via JS interop, then create a blob url and display it, but you'll likely need to write a component for this. Something like the reverse of InputFile that we shipped in 5.0

[steamonimo]

@javiercn We use a list bound to a table to show multiple images. The object in this list has one string property for the base64 image. It would be challenging to adjust this to JS interop. The number of users working with these images is limited to those passing the logon process. Even on our surface machines this runs fine and our server (threadripper, 32core, 64gb, Intel P3700) will never run out of heap for the user base we would like to serve.

[javiercn]

@steamonimo that's fair, I was just pointing out potential problems down the road with that approach.

[bwjunkie]

@steamonimo I think your base64 may not be valid, or of a format that is not support by browsers (ex. tif)

I was able to get this functionality working several images and formats. (i originally had issues because I forgot TIF is not supported)

try some others?
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAABTCAIAAADbbVRwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAF/SURBVHhe7drBDcIwEABB+qEe+qGe1EM/gSBLCDkI52TvWbD7BJngwVwecFoNSWgooaGEhhIaSmgooaGEhhIaSmgooaGEhhIaSmgooaGEhhIaSmgooaGEhhIaSmgoHPqWU7l6XjD07Xo+pXS+JlsLDQVDL5eycTqhqS5LeQtJsdD15Gg4afWH8x2tvpDQEHT27MiGbjhoEeh60X9B9zEbtmhkydAt50zow8UmZ8hsurthMnTL7jtBJw/pX4WuV/0TdCeygavGlQvddMpiZLMNaRI6ODeFPlpw772gc4c0CR0cm72WCf0ldtmoUqHbzlhQbLIhTUI/Nr+1vGr6LkeP5tuFtsrjObHQoSabAcGEhhIaSmgooaGEhhIaSmgooaGEhhIaSmgooaGEhhIaSmgooaGEhhIaSmgooaFmgX7+TL3fHnR5aq/ygrM1B3RtGS73/0ifExpKaCihoWa5Gf58QkMJDSU0lNBQQkMJDSU0lNBQQkMJDSU0lNBQQiOt6x2hBFcjcGNqsQAAAABJRU5ErkJggg==

[julienGrd]

I dont' understand, on my side it continue works perfectly. is the bug confirmed by microsoft ?

[bwjunkie]

I dont' understand, on my side it continue works perfectly. is the bug confirmed by microsoft ?

@julienGrd no, this is a forum for Customers to submit issues that may or may not need a fix.

[steamonimo]

@bwjunkie: You are right. In the copy and paste process the code of the image has been modified with additional line breaks by visual studio. Thus the code was indeed invalid and therefore improper to demonstrate my problem. To my surprise my original project is now also showing the images correctly. I am not sure what caused the problem in the first place. Yesterday the external framework I am using with blazor was updated. I have to investigate if this update did fix some .NET5 compatibility issues with images. For now I am closing this issue. Thanks to all for your constructive help!