Blazor web assembly getting images from the server securely

Bradley Plett 36

I have a web assembly securely communicating with the hosting server's API, and it's all working well. However, I need to be able to display images that are dynamically generated on the server (I have an API endpoint that generates them), and it seems that on the client all I have is the "<img src=...>" tag to do that. Sadly all that does is produce a 401, since the request for an image doesn't include the token. How do I solve this?

I realize I may not have explained the scenario very well, so feel free to ask clarifying questions.

Thanks a lot!

Bradley Plett 36 Reputation points

2021-10-17T07:21:23.217+00:00

In the "good old days" we'd use a session for something like this, but I'm trying to keep up with the brave new world, and it's not even clear to me how some kind of session cookie could be used in this scenario, or if there's a better way - the actual token that SHOULD be used.
Zhi Lv - MSFT 32,021 Reputation points Microsoft Vendor

2021-10-18T02:28:29.227+00:00
Hi @Bradley Plett ,

Can you share the related code about how to call the API endpoint and get the dynamically generated image?

From your description, before calling the API end point, you should get the token, then add it to the request header. After getting the image successful, you could dynamically add the <img> tag to display the image.

but I'm trying to keep up with the brave new world, and it's not even clear to me how some kind of session cookie could be used in this scenario,

Do you mean you have the token, but you don't know how to store it in Asp.net core Blazor application? If that is the case, you can check the ASP.NET Core Blazor state management:

In Asp.net core Blazor application, the common locations exist for persisting state as below:

Server-side storage

URL

Browser storage

In-memory state container service

In your scenario, you could consider using Server-side storage or Browser storage

Best regards,
Dillion
Bradley Plett 36 Reputation points

2021-10-18T15:31:23.083+00:00

Can you share the related code about how to call the API endpoint and get the dynamically generated image?

There really isn't much to show: <img src="@imgSource" />

From your description, before calling the API end point, you should get the token, then add it to the request header. After getting the image successful, you could dynamically add the <img> tag to display the image.

Hmmm... maybe you're on to something here. If I understand where you're going, it sounds like you're suggesting the web assembly get the image in code and then use an <img> tag to point to something it already has on the client side. That might work, but I don't know what the <img> tag would look like to point to something like that. Alternatively what other tag would one use?

Do you mean you have the token, but you don't know how to store it in Asp.net core Blazor application? If that is the case, you can check the ASP.NET Core Blazor state management

Yes, I presumably have the token in some way/shape/form, since the web assembly is using it to make other API calls. For example, I'm successfully using "Http.GetFromJsonAsync" to request data from the server, though I'm not adding the token manually - it's happening behind the scenes somehow. However, this has nothing to do with "storing" the token. The issue is I don't know how to include the token with nothing but an <img> tag.
Zhi Lv - MSFT 32,021 Reputation points Microsoft Vendor

2021-10-19T06:55:51.817+00:00

Hi @Bradley Plett ,

For example, I'm successfully using "Http.GetFromJsonAsync" to request data from the server, though I'm not adding the token manually

Do you mean you could get the image data using Http.GetFromJsonAsync method? If that is the case, what the data type, byte array or based64 string?
Bradley Plett 36 Reputation points

2021-10-19T15:01:56.793+00:00

Do you mean you could get the image data using Http.GetFromJsonAsync method? If that is the case, what the data type, byte array or based64 string?

That wouldn't make much sense, but I suppose I could. The issue then would be displaying it. How?

1 answer

Bruce (SqlWork.com) 57,166 Reputation points

2021-10-18T14:44:13.293+00:00

While it will increase the download size, you can return the image as a dataurl, and set the source.

Another option is to include a unique token in the url. The blazor code would call the server to get the token. The token would have a timeout inside it.
Please sign in to rate this answer.
Bradley Plett 36 Reputation points

2021-10-18T15:34:19.87+00:00

While it will increase the download size, you can return the image as a dataurl, and set the source.

Do you have an example? What would this look like?

Another option is to include a unique token in the url. The blazor code would call the server to get the token. The token would have a timeout inside it.

I thought about that, but it seems like a really messy solution, and it wouldn't be using the "Microsoft Identity Platform" the way it's meant to be used.
Sign in to comment