nginx with createObjectURL and binary png data appears to serve the file as text with utf8 encoding

Question

We have some swagger-ui.js code generating a download link to a png image delivered from a REST API call. The download link is generated by the swagger-ui.js code:

var binaryData = [];
binaryData.push(content);
// type = image/png
href = window.URL.createObjectURL(new Blob(binaryData, {type: type}));

and the link is added to the swagger output in the form of an <a> tag with a download attribute set to an appropriate filename e.g.

<a href="blob:http://100g-vm15/a6dd8863-c4d1-4433-ba85-fb1beb3aaaa9" download="Chart-25-04-30_15-29-33.png">Download Chart-2025-04-30_15-29-33.png</a>

When the REST API call is made that delivers the raw png data I can observe in the network tools of the browser that the 'content' data is well formed binary png data, if I copy the data to a file and open it in a ImHex editor it recognizes the pattern as png data e.g:

If I use the <a> download link from the generated swagger output the downloaded file appears to be utf8 encoded and so has EF BF BD hex characters in the data for example: .

If I access the temporary file created from the call to createObjectURL directly in another browser tab with the url for example:

blob:http://100g-vm15/a6dd8863-c4d1-4433-ba85-fb1beb3aaaa9

I can see the data is also corrupted, I did try adding the type=image/png attribute to the <a> link but this had no effect.

This issue only appears to happen on our deployed system that uses an nginx web server to serve our static file content. In development we use the .net core Kestrel server to host all of our web app code and the same swagger code generating the same download link is serving the raw uncorrupted png data.

Has anyone else encountered similar issues? I can only assume it is an nginx configuration issue but I am a little lost as to where to look. As the temporary file is created in the root folder of our web server we do not have any special configuration for this, we have default entries in for our mime.types and default type:

include mime.types # this includes "image/png png;"
default_type appliction/octet-stream;

the only other special handling of png files is here:

location ~ .*\.(js|css|png|jpg|jpeg|gif|tif)?$ {
    expires modified 0;
    add_header Cache-Control "public";
}

Any hints or pointers on how to diagnose this issue further would be very welcome.

Thanks for reading.

Accessing the blob:... link should not hit the underlying web server at all. As a wild guess, can you check if there is a difference in the parent HTML Content-Type HTTP response header from Kestrel/nginx web servers? — Ivan Shatsky
– Ivan Shatsky, Commented Apr 30 at 17:35

Gary Cuthbert · Accepted Answer · 2025-05-03 14:48:20Z

thanks for the hint it certainly pointed me in the right direction.

As it turned out it was the request header that was wrong and nothing to do with nginx at all, we have a couple of different deployment scenarios, in one we expose the API services I was having the problem with as part of a larger set of services, the web server start up logic for this particular scenario was missing some configuration tuning of our open api plugin that our swagger ui is driven from.

Essentially by default the open api plugin sets the expected response content to 'application/json' for all endpoints, we override this for endpoints that return images by changing the expected response header to 'image/png', with this in place the browser interprets binary data received correctly when it creates the temporary file for download.

This was actually something I addressed before but seems to have crept back into this deployment scenario possibly when we migrated to .NET core.

Thanks again

Gary

Collectives™ on Stack Overflow

nginx with createObjectURL and binary png data appears to serve the file as text with utf8 encoding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related