question

BradleyPlett-8862 avatar image
0 Votes"
BradleyPlett-8862 asked BradleyPlett-8862 commented

Blazor web assembly getting images from the server securely

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!

dotnet-aspnet-core-blazor
· 5
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

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.

0 Votes 0 ·

Hi @BradleyPlett-8862,

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

0 Votes 0 ·

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.

0 Votes 0 ·

Hi @BradleyPlett-8862,

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?

0 Votes 0 ·
Show more comments

1 Answer

Bruce-SqlWork avatar image
0 Votes"
Bruce-SqlWork answered BradleyPlett-8862 commented

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.

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

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.



0 Votes 0 ·