Closed Bug 1282837 Opened 5 years ago Closed 5 years ago

Image tag won't display image from end point

Categories

(Web Compatibility :: Desktop, defect)

Firefox 47
x86_64
Windows 10
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: eddie.gaul, Unassigned)

References

Details

(Keywords: regression, site-compat, testcase)

Attachments

(6 files)

Attached image error.png
User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36

Steps to reproduce:

Hi, we have an application where users can upload files and we store the file on our server.  

We have an end point, which when called will serve up the file.  I have used a debugger the firefox is hitting the end point and the file is being delivered to FireFox.

My html is simply:

<img src="/ia/empari/attachment/file/downloadFile?fileId=111C759F-296D-0144-BD22-63856E7EACC8"/>

I have attached a screen shot of the headers and response from firebug.




Actual results:


In version 46 of FireFox, the image renders within the page as expected.  In version 47 the image does not render and shows a broken / missing image icon.  Putting the URL into the URL header renders the image.  Pressing back after viewing the image renders the image.  However, refreshing the page restores the broken image link.
  
I am using Java / Spring MVC to return the bytes of the image.

The image appears in IE and Chrome.

I have also removed the content security policy all together and that doesn't affect it.


Expected results:

The image should display
Could you provide a testcase, please.
Flags: needinfo?(eddie.gaul)
Keywords: testcase-wanted
<html>
<img src="https://featuretest.truenorthlogic.com/ia/empari/attachment/file/downloadFile?fileId=EB77A7BE-ABE6-1F4D-9377-9C621C145D75">
</html>

This works in Google chrome.  And fails in FF 47
Attached file 1282837.html
Regression range:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=8ef94be995a453f5c464278c53478ba8c8554f81&tochange=bb1dbd40af536693f138bcfd4111760aef17723f

I guess it regressed by:
Mike Taylor — Bug 1249474. Part 1 - Change default Accept header value for images to */*. r=mcmanus

Mike, is it the normal behavior now?
Blocks: 1249474
Flags: needinfo?(eddie.gaul) → needinfo?(miket)
Keywords: regression
Keywords: site-compat
Yeah, this is a server bug. The change in Bug 1249474 just moved to match Safari's behavior -- and indeed, Safari gets a blank page in the attached test case as well (and it seems like the connection is never closed on the image request).

Eddie, your server should be able to respond to "*/*" with "image/jpeg". Presumably it works in Chrome because they send "image/*" before "*/*" and your setup recognizes that.
Flags: needinfo?(miket) → needinfo?(eddie.gaul)
Component: Untriaged → Desktop
Product: Core → Tech Evangelism
Version: 47 Branch → Firefox 47
(In reply to Mike Taylor [:miketaylr] from comment #5)
> Yeah, this is a server bug. The change in Bug 1249474 just moved to match
> Safari's behavior -- and indeed, Safari gets a blank page in the attached
> test case as well (and it seems like the connection is never closed on the
> image request).
> 
> Eddie, your server should be able to respond to "*/*" with "image/jpeg".
> Presumably it works in Chrome because they send "image/*" before "*/*" and
> your setup recognizes that.

Hi Mike,

I am a little unclear as to what you mean.  

I do respond with an image/jpeg.  The screen capture attached to the ticket shows that I am responding with an image/jpeg response.  Also, the data is being sent and I have verified that the img src= call request hits the server, the server serves up the bytes and sends them to the browser.

If there is a different type of header that I should be sending, let me know.
OS: Unspecified → Windows 10
Hardware: Unspecified → x86_64
Do we have a status on this?  Is there something that I need to change in my server code that renders dynamic images?
(In reply to Mike Taylor [:miketaylr] from comment #5)
> Yeah, this is a server bug. The change in Bug 1249474 just moved to match
> Safari's behavior -- and indeed, Safari gets a blank page in the attached
> test case as well (and it seems like the connection is never closed on the
> image request).
> 
> Eddie, your server should be able to respond to "*/*" with "image/jpeg".
> Presumably it works in Chrome because they send "image/*" before "*/*" and
> your setup recognizes that.

Hey Mike, I'm attempting to follow up on this issue. I'm able to consistently reproduce this problem, however, what is perplexing with the behavior is if the URL for the endpoint is embedded in an image tag Firefox fails to render the content, but if I open a new tab and go directly to that URL the image loads as expected. Investigating the output in the Network section of the dev console it appears the Response Headers between the two scenarios are identical and when I step through our code involved in producing this image there is no change in processing.

Looking at the Request Headers between the two scenarios, as you indicated, the failing scenario only includes "*/*" where as the scenario that succeeds sends "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8". Given that the Java code we've written to serve this response is being invoked similarly and the server is sending back the Content-Type as "image/jpeg;charset=UTF-8" in both situations, can you provide any additional guidance on what settings I should investigate in our Tomcat / IIS configuration which might be impacting the failing scenario?

For reference I attached images of the network output for these two scenarios.

Thanks for your time.
Attached image failingImageRequest.gif
Network output for failing image request
Network output for image request that succeeds
Flags: needinfo?(miket)
Hey Clayton -- yeah that's a bit odd. The content-type and content-length are the same in both cases. I'm not super familiar with IIS servers, but in theory there's an image <handler> somewhere in your web.config. That's where I would start to look.
Flags: needinfo?(miket)
So I tried a couple of things on a local server. I was unable to reproduce the issue. 
Each time I got the image served. I was wondering if there was a different treatment for 

Content-Type: image/jpeg;charset=utf-8
and 
Content-Type: image/jpeg

but it's not the case. Both are working with a Accept: */* header with a direct call AND and img src call. 



For this specific image. It seems it's not online anymore and the server doesn't even understand the request.
https://featuretest.truenorthlogic.com/ia/empari/attachment/file/downloadFile?fileId=EB77A7BE-ABE6-1F4D-9377-9C621C145D75

```
HTTP/1.1 500 Internal Server Error
Cache-Control: private
Content-Length: 1208
Content-Security-Policy: default-src 'self' *.truenorthlogic.com truenorthlogic.com *.ooyala.com 'unsafe-inline'; img-src *; font-src *; frame-src *; connect-src *; media-src *; style-src * 'unsafe-inline'; script-src 'self' 'unsafe-eval' 'unsafe-inline' *.google.com *.truenorthlogic.com truenorthlogic.com ssl.google-analytics.com *.googleapis.com *.newrelic.com; *.google-analytics.com
Content-Type: text/html
Date: Wed, 10 Aug 2016 01:57:58 GMT
Server: Microsoft-IIS/8.5
Set-Cookie: BIGipServerfeaturetest_pool=268902060.20480.0000;Secure;HttpOnly;Path=/;Version=1;
Set-Cookie: JSESSIONID=AB0C814A3C60A813AAB6ABEE5DBC619D;Secure;HttpOnly;Path=/;Version=1;
X-Powered-By: ASP.NET
X-UA-Compatible: IE=edge
```
Hi all,

Our FeatureTest server periodically gets restored to a previous edition.  Here is a new URL for an image tag:

https://featuretest.truenorthlogic.com/ia/empari/attachment/file/downloadFile?fileId=4A43B253-166E-FA4C-8E15-4C611A4B0427

Just update the source in the test example to point to this URL.

Thanks

Eddie
Direct request.

→ http HEAD 'https://featuretest.truenorthlogic.com/ia/empari/attachment/file/downloadFile?fileId=4A43B253-166E-FA4C-8E15-4C611A4B0427'

HTTP/1.1 200 OK
Cache-Control: private
Content-Disposition: inline; filename="13116138_266862716985109_185359324481429818_o.jpg"
Content-Length: 403842
Content-Security-Policy: default-src 'self' *.truenorthlogic.com truenorthlogic.com *.ooyala.com 'unsafe-inline'; img-src *; font-src *; frame-src *; connect-src *; media-src *; style-src * 'unsafe-inline'; script-src 'self' 'unsafe-eval' 'unsafe-inline' *.google.com *.truenorthlogic.com truenorthlogic.com ssl.google-analytics.com *.googleapis.com *.newrelic.com; *.google-analytics.com
Content-Type: image/jpeg;charset=UTF-8
Date: Wed, 10 Aug 2016 14:48:49 GMT
Server: Microsoft-IIS/8.5
Set-Cookie: BIGipServerfeaturetest_pool=268902060.20480.0000;Secure;HttpOnly;Path=/;Version=1;
Set-Cookie: JSESSIONID=443A8FC76D43EC90E49BDB835C90BFAC;Secure;HttpOnly;Path=/;Version=1;
X-Powered-By: ASP.NET
X-UA-Compatible: IE=edge


But when I created a page for it, the raw HTML markup is 

<img src="https://featuretest.truenorthlogic.com/ia/empari/attachment/file/downloadFile?fileId=4A43B253-166E-FA4C-8E15-4C611A4B0427"/>


but when I inspect it, I notice.

<img src="https://featuretest.truenorthlogic.com/ia/empari/attachment/file/downloadFile?fileId=4A43B253-166E-FA4C-8E15-4C611A4B0427" 
    style="display: none ! important;" hidden="">

when I create a raw request for it, in the console we get errors for CSP.

00:13:47.460 Content Security Policy: Directive ‘frame-src’ has been deprecated. Please use directive ‘child-src’ instead.(unknown)
00:13:47.460 Content Security Policy: Couldn’t process unknown directive ‘*.google-analytics.com’(unknown)
00:13:47.460 Content Security Policy: Couldn’t process unknown directive ‘*.google-analytics.comscript-src’(unknown)


There are some issues there but I don't think it impacts the images
https://cspvalidator.org/#url=https://featuretest.truenorthlogic.com/ia/empari/attachment/file/downloadFile?fileId=4A43B253-166E-FA4C-8E15-4C611A4B0427
I turned off the security policy for now, so those errors should no longer be present.
Thanks Eddie. So I made a test page on a local server with different cases.

========================================
<!DOCTYPE html>
<html>
<head>
    <title>testing images</title>
</head>
<body>
<h1>testing images content type</h1>

<h2>normal</h2>
<img style="width:100px" src="test.jpg"/>

<h2>Same response headers than truenorthlogic</h2>

aka 
<Files "test-charset.jpg">
ForceType 'image/jpeg;charset=UTF-8'
Header set 'Cache-Control' 'must-revalidate, post-check=0, pre-check=0'
Header set 'Content-Disposition' 'inline; filename="13116138_266862716985109_185359324481429818_o.jpg"'
</Files>

<img style="width:100px" src="test-charset.jpg"/>

<h2>response from truenorthlogic server</h2>
<img style="width:100px" src="http://featuretest.truenorthlogic.com/ia/empari/attachment/file/downloadFile?fileId=4A43B253-166E-FA4C-8E15-4C611A4B0427"/>

</body>
</html>
========================================

I still could not reproduce for my local images, but indeed the distant image doesn't appear in the `img` tag

tested with a clean profile Firefox without cache

GET /ia/empari/attachment/file/downloadFile?fileId=4A43B253-166E-FA4C-8E15-4C611A4B0427 HTTP/1.1
Host: featuretest.truenorthlogic.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:51.0) Gecko/20100101 Firefox/51.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: http://lagrange.test.site/2016/08/10/moz/test-img.html
Connection: keep-alive


HTTP/1.1 200 OK
Cache-Control: private
Content-Length: 403842
Content-Type: image/jpeg;charset=UTF-8
Server: Microsoft-IIS/8.5
X-UA-Compatible: IE=edge
Content-Disposition: inline; filename="13116138_266862716985109_185359324481429818_o.jpg"
X-Powered-By: ASP.NET
Date: Thu, 11 Aug 2016 00:31:13 GMT
Set-Cookie: BIGipServerfeaturetest_pool=268902060.20480.0000;Secure;HttpOnly;Path=/;Version=1;
JSESSIONID=8F1485ADED8A44F2A7A564DB6699556B;Secure;HttpOnly;Path=/;Version=1;
Attached image network-devtools.png
but there is something weird in the way the image bytes are counted in devtools. Like if Firefox was giving up on the image at a random point.


Maybe :mcmanus will have the start of an idea when he is back on August 15.
Attached image blink-devtools.png
The image is a progressive JPEG. 
I saved it locally and added to my test page and the image is displayed.

On Blink, the image is partially rendered before finishing to be uploaded when called from the server.
I wonder if the server is sending the image as a Chunked encoding but without telling Firefox about it.
http -v --traceback --output foobar.jpg GET 'https://featuretest.truenorthlogic.com/ia/empari/attachment/file/downloadFile?fileId=4A43B253-166E-FA4C-8E15-4C611A4B0427' 
Traceback (most recent call last):
  File "/Users/karl/Library/Python/2.7/bin/http", line 11, in <module>
    sys.exit(main())
  File "/Users/karl/Library/Python/2.7/lib/python/site-packages/httpie/core.py", line 145, in main
    write(**write_kwargs)
  File "/Users/karl/Library/Python/2.7/lib/python/site-packages/httpie/output/streams.py", line 35, in write
    for chunk in stream:
  File "/Users/karl/Library/Python/2.7/lib/python/site-packages/httpie/output/streams.py", line 157, in __iter__
    for chunk in self.iter_body():
  File "/Users/karl/Library/Python/2.7/lib/python/site-packages/requests/models.py", line 667, in generate
    raise ChunkedEncodingError(e)
requests.exceptions.ChunkedEncodingError: ("Connection broken: error(54, 'Connection reset by peer')", error(54, 'Connection reset by peer'))
→ curl -v -o foobar.jpg 'https://featuretest.truenorthlogic.com/ia/empari/attachment/file/downloadFile?fileId=4A43B253-166E-FA4C-8E15-4C611A4B0427' 
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0*   Trying 72.4.114.176...
* Connected to featuretest.truenorthlogic.com (72.4.114.176) port 443 (#0)
  0     0    0     0    0     0      0      0 --:--:--  0:00:01 --:--:--     0* TLS 1.2 connection using TLS_ECDHE_RSA_WITH_AES_256_GCM_SHA384
* Server certificate: *.truenorthlogic.com
* Server certificate: RapidSSL SHA256 CA - G3
* Server certificate: GeoTrust Global CA
> GET /ia/empari/attachment/file/downloadFile?fileId=4A43B253-166E-FA4C-8E15-4C611A4B0427 HTTP/1.1
> Host: featuretest.truenorthlogic.com
> User-Agent: curl/7.43.0
> Accept: */*
> 
< HTTP/1.1 200 OK
< Cache-Control: private
< Content-Length: 403842
< Content-Type: image/jpeg;charset=UTF-8
< Server: Microsoft-IIS/8.5
< X-UA-Compatible: IE=edge
< Content-Disposition: inline; filename="13116138_266862716985109_185359324481429818_o.jpg"
< X-Powered-By: ASP.NET
< Date: Thu, 11 Aug 2016 03:24:15 GMT
< Set-Cookie: BIGipServerfeaturetest_pool=268902060.20480.0000;Secure;HttpOnly;Path=/;Version=1;
< Set-Cookie: JSESSIONID=E196F46861A92FD1F9ECABEEE47B4FFE;Secure;HttpOnly;Path=/;Version=1;
< 
{ [1054 bytes data]
 36  394k   36  145k    0     0   2365      0  0:02:50  0:01:03  0:01:47     0* SSLRead() return error -9806
* Closing connection 0
curl: (56) SSLRead() return error -9806
This took some digging into the Spring framework code, but I was able to successfully resolve this issue. The root of the problem is that our application has a number of message converters configured to handle various response types from different endpoints. For example HTML, JSON, XML, File Downloads, etc. In this particular case Spring was looking at the byte array return value and the request Accept header of */*, and deciding that it could marshal the response as a JSON object, because it happened to be the first message converter declared in our configuration and therefore was the first to be evaluated. This ended up garbling the response.

This ticket can be closed. Thanks everyone for your help in debugging this issue.
Status: UNCONFIRMED → RESOLVED
Closed: 5 years ago
Flags: needinfo?(eddie.gaul)
Resolution: --- → FIXED
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.