Question

I’m using Amazon S3 to host images. The S3 bucket is private, so I generate a temporary URL (using Right AWS) with a 5-minute expiry to allow the image to be rendered. The URL looks like this (note: URL below will not work):

https://mybucket.s3.amazonaws.com:443/attachments%2F30%2Fsmall.png?Signature=J%2BXzQd95myCNv0Re8arMhuTFSvk%3D&Expires=1235511662&AWSAccessKeyId=1K3MW21E6T8LWBY94C01 

This works fine, and I can paste the URL into Firefox and the image is displayed. Same for IE. However, when I try it in Safari the URL appears to resolve but no image is displayed. Similarly, if I try and use the URL in the src attribute of an IMG tag on a web page, nothing is rendered by Safari (fine in all other browsers), e.g:

alt text http://lylo.co.uk/screenshot.png

Has anyone seen this behaviour before and can you point out what, if anything, I might be doing wrong?

Answer 1

With a bit of digging around in the S3 library I’m using I have found the problem here.

When you upload a file to S3 you have to set the Content-Type header. In my situation I was uploading two files, one was an original PDF file with a Content-Type of application/pdf, the other was a thumbnail preview in PNG format. The library I was using to upload to S3 does set the Content-Type header, but it was setting the header to application/pdf for both the original PDF and the PNG thumbnail.

It seems that Firefox and IE will happily render a PNG image from S3 even though it has the wrong Content-Type header, whereas Safari doesn’t like this at all and consequently won’t render the image.

So, patching the S3 library I’m using such that the correct Content-Type header is correctly set on the PNG thumbnails solved the issue.

Phew.