2

I am using Chrome 79.

I am trying to start download of an image within a html page. The image is located on the same server as the webpage, but it is served via nginx server via different port. This apparently gets me to cross-origin security problems.

First I tried to use the standard 

var a = document.createElement('a');
a.download = "file.bmp";
a.href = "http://xxxxxxx/xxx/somefile.bmp";
document.body.appendChild(a);
a.click();
a.remove();

Interestingly this gets me to the behaviour that my image is displayed in a new tab, but not downloaded. I assume this is due to cors reasons?

After reading discussion on this topic in : Chrome 65 blocks cross-origin <a download>. Client-side workaround to force download?

I tried to use the approach presented there using the fetch function. Unfortunatelly this does not solve my problem. I get a response with "opaque" type and my blob is undefined...

var url = "http://xxxxxxxxx/xxx/somefile.bmp";
fetch(url, {
  mode: 'no-cors'})
  .then(function(response){handleBlob(response);})      
  .catch(e => console.error(e));

-------

function handleBlob(response)
{
   var blob = response.blob;
   var blobUrl = URL.createObjectURL(blob);
   var ImageTest = document.getElementById("DummyLink");      
   ImageTest.download = "file.bmp";
   ImageTest.href = blobUrl;
   ImageTest.click();           
}

I thought this is all very strange - the server name of the resource is same as of the webpage, so I would assume there is no real security danger here...

Any suggestions or workarounds on how to trigger a download of an image to the disk would be greatly appreciated.

Aga_Schwarz
  • 21
  • 3
  • `this gets me to the behaviour that my image is displayed in a new tab, but not downloaded` What exactly do you mean, in Chrome, all images are displayed in browser. – GrafiCode Jan 21 '20 at 16:52
  • 2
    One suggestion is to update how you think about servers: the name alone is _not_ enough to determine something is "the same". `microsoft.com` and `microsoft.com:1635` are completely different things, and just because they both start with the same domain name in _no_ way implies that the same server services both ports, or even that the same computers are involved _at all_ – Mike 'Pomax' Kamermans Jan 21 '20 at 16:53
  • Do you even get any CORS error in your browser? – GrafiCode Jan 21 '20 at 16:54
  • 1
    @Mike'Pomax'Kamermans `Starting in Chrome 65, cross-origin downloads are not supported on the element.` O.P. is using Chrome 79 – GrafiCode Jan 21 '20 at 16:56

1 Answers1

0

Not 100% sure what your trying to do.

var url = 'http://webpage.com/images/images.jpg',
var img = document.createElement('img');
img.src = src;
document.getElementById("DummyLink").appendChild(img);
Tom Shaw
  • 1,642
  • 2
  • 16
  • 25
  • Hi Tom, I am trying to download an image via the webpage. The image should not be dispayed but downloaded to the browser download folder – Aga_Schwarz Jan 22 '20 at 08:44
  • You can use Node.js https://medium.com/@onlineinerview/simple-function-in-node-js-to-save-image-from-url-to-local-disk-server-fd627ae7f6a6 – Tom Shaw Jan 22 '20 at 13:32