-2

The only solution I've found it to grab the link with getElementsByClassName then inject it into an html snippet on the page, but it looks so fake, and is also unnecessary (I don't want all the links) I want to right click the link (one at a time) and show it to the next tab. If I right click the link the server sends me a download prompt. How can I evade this?

Mook Koom
  • 45
  • 1
  • 3
  • Don't add download headers from server side or tweak your browser settings to always open file in new tab instead of downloading. – Justinas Feb 18 '19 at 07:42
  • What exactly do you mean by `HTML snippet` ? – Suzanne Soy Feb 18 '19 at 07:50
  • @Georges Duperon I append an img element to document and set its atribute src to the link I have grabbed. It is shown this way. I must do it for all of them though... – Mook Koom Feb 18 '19 at 08:03
  • @MookKoom I edited my answer to indicate that you can use the `data:…` url as the URL of your new tab. If the main page can download the images itself (using `XMLHttpRequest`, or by displaying the picture in an `` tag, painting that `img` on a ``, and extracting a PNG from the canvas), then you can automatically open many tabs, or write a series of links to `data:` URLs. You could also have a link to a tiny web page with just the `img` tag that you currently use: `link text`. Welcome to StackOverflow by the way ;-) – Suzanne Soy Feb 18 '19 at 08:22

1 Answers1

0

I think the browser decides to download a file or display it based on its MIME type.

If the server is under your control, you should make sure you supply the correct Content-Type HTTP header (e.g. you have to call a library function in PHP, and there should be a similar way to do that in other languages).

Otherwise, for a purely client-side solution in JavaScript, you can fetch the file with an XMLHttpRequest (most JavaScript toolkits have wrappers around it). Then, you can convert it to base 64, prefix the result data:image/png;base64,, and use it as the src attribute of an img element (thanks https://stackoverflow.com/a/21508186/324969).

Note that for security aspects, grabbing arbitrary files and stuffing them in a data: URL might not be safe. I don't know if any cross-site scripting or CORS attacks could be built upon this. You'll have to ask a separate question to know if the client-side solution is unsafe. For the server-side, be careful not to set the wrong content-type for user-uploaded data, or for endpoints of your service (e.g. letting the client-side send you in the request the Content-Type that it would like, as tempting as it looks, is a big no-no).

To open the image in a new tab, you can use window.open as usual, but download the image beforehand (using XMLHttpRequest) and put the data:image/png;base64,… as the URL of the new tab.

Since you can already see the images by placing their URL in an img tag, you can paint that img on a , extract a PNG from the canvas, craft a data:image/png;base64,… URL from that, and then either automatically open many tabs with these URLS, or write in your page a series of links to data: URLs.

You could also have a link to a tiny web page with just the img tag that you currently use: <a href="data:text/html,<img src=%22your_url%22>">link text</a>.

Suzanne Soy
  • 3,027
  • 6
  • 38
  • 56