Downloading an image without direct backend server access

JavaScript
1

Hi,

I have a button to download an image. this image is not a file on the server but its stored in a database.

When the user clicks the button I could, of course, call a backend function which loads the data from the database and stores it into a file and then give back the URL to this file, but I don’t like the idea of direct access to my backend server from the user.
So I thought I just call the backend, which is then loading the image data, do a base64 encoding and give it back to the front end.
My problem now is how can I start an automated download of this image? For a text file I have found a solution that looks like this:

const downloadLink = document.createElement("a");
        downloadLink.href = "data:x-application/xml;charset=utf-8," + document.getElementById("progressPanelProtocol").value.replaceAll(/\r\n|\r|\n/g, "<br>"));
        downloadLink.download = "Filename_" + Date.now().valueOf() + ".html";

        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);

but how can I do this with an image instead?

2

Can you not just have your backend api send the appropriate headers (Content-disposition) to download the image and then do a simple redirect to that endpoint?

3

I… uhhh… what? That’s still the browser directly accessing your backend server.