Is it OK to use source with header "Content-Disposition: attachment" as src value for <img>?

Question

There is a 3d party API with an endpoint http://endpoint/image_id which returns a response with such headers:

content-disposition:attachment; filename=image.png
content-length:27774
content-type:image/png

According to MDN documentation,

In a regular HTTP response, the Content-Disposition response header is a header indicating if the content is expected to be displayed inline in the browser, that is, as a Web page or as part of a Web page, or as an attachment, that is downloaded and saved locally.

Yet, I have to use it like this:

<img src="http://endpoint/image_id">

In Chrome, it works OK for me, I have the image shown. But I have doubts about it. Is it OK?

Answer 1

It works because chrome is smart enough to figure that you are using it inside of a web page and it did not display the save as dialog but why do you risk by using

content-disposition:attachment;

you should instead use :

Content-Disposition: inline

also there has been a question here on stack overflow that had similar answers to your question that explain the difference between using attachement instead of inline have a look on the approved answer on this question.

Answer 2

If it's OK or not is not so simple.
This is because it implies to two different standards. The HTML Specification and the HTTP Protocol Specification. So it has some greys. It depends upon how the user agent decides to take the response.

According to the http standard the response header indicates that the file should be treated as an attachment.

Howewer here: https://www.w3.org/Protocols/rfc2616/rfc2616-sec19.html

Also says: "If this header is used in a response with the disposition type "attachment" application/octet-stream content-type, the implied suggestion is that the user agent should not display the response, but directly enter a `save response as...' dialog."

UPDATE: RFC 6266, remarks that the restriction about the content-type being application/octet-stream is no longer needed

So your content type technically leaves that decision to the user agent (chrome in this case) to show the contents or not.

We are reaching just now some kind of balance between browsers, so to take a wisdom choice today I would recommend to do a cross browser testing.

Ideally this will be in your CI workflow with some tool like souce labs or your custom solution.

Another quick choice will be to upload that simple html example to some host like a free github repo and navigate the raw file from a page like this: https://www.browserling.com/

Which lets you navigate with different OS and browsers a specific url.