Forum How do I...?

Authenticated Amazon s3 Image?

tvongaza
I'm trying to get an image working in my pdf. I can get the image working locally, however when I try to use an authenticated s3 request I'm running into issues.

First I generate a private url that looks like the following (note this will probably be expired when you look at it):
http://s3.amazonaws.com/development.documents.domain.com/logos/2175/iphone-icon.png?AWSAccessKeyId=137333PGACW9489NFWMDWR2&Expires=1270657888&Signature=G%2F5%2FBm%2FRMFU3J2O8NyIzdQSq%2BJU%3D


I have the above embedded in my html as follows:
      <div class='logo'><img src="http://s3.amazonaws.com/development.documents.domain.com/logos/2175/iphone-icon.png?AWSAccessKeyId=137333PGACW9489NFWMDWR2&Expires=1270657888&Signature=G%2F5%2FBm%2FRMFU3J2O8NyIzdQSq%2BJU%3D" /></div>


It works fine when viewed in a browser, however when I try to generate a pdf I get the following (note the url is slightly different as the private s3 url is regenerated a new):
Wed Apr  7 10:27:52 2010: ---- begin
Wed Apr  7 10:27:55 2010: Loading document...
Wed Apr  7 10:27:55 2010: -:76: error: htmlParseEntityRef: expecting ';'
Wed Apr  7 10:27:55 2010: -:76: error: htmlParseEntityRef: expecting ';'
Wed Apr  7 10:27:56 2010: http://s3.amazonaws.com/development.documents.domain.com/logos/2175/iphone-icon_medium.png?AWSAccessKeyId=137333PGACW9489NFWMDWR2&Expires=1270657972&Signature=cWLcY0tf1PVO2Biy3q9J4VG0JWw%3D: warning: Could not load PNG file
Wed Apr  7 10:27:56 2010: Converting document...
Wed Apr  7 10:27:56 2010: finished: success
Wed Apr  7 10:27:56 2010: ---- end


When I use a local file I do NOT get get the 3 messages between "Loading document..." and "Converting document...".

The s3 URL when copied works in curl just fine, though it must be in quotes otherwise I get an error message. The content type seems to be set correctly, etc.
/tmp: curl -v "http://s3.amazonaws.com/development.documents.domain.com/logos/2175/iphone-icon.png?AWSAccessKeyId=137333PGACW9489NFWMDWR2&Expires=1270658513&Signature=nhG9o2hwh7snN7H4R90XB6b%2Ffo0%3D"
* About to connect() to s3.amazonaws.com port 80 (#0)
*   Trying 207.171.183.113... connected
* Connected to s3.amazonaws.com (207.171.183.113) port 80 (#0)
> GET /development.documents.domain.com/logos/2175/iphone-icon.png?AWSAccessKeyId=137333PGACW9489NFWMDWR2&Expires=1270658513&Signature=nhG9o2hwh7snN7H4R90XB6b%2Ffo0%3D HTTP/1.1
> User-Agent: curl/7.19.6 (i386-apple-darwin10.0.0) libcurl/7.19.6 zlib/1.2.3
> Host: s3.amazonaws.com
> Accept: */*
> 
< HTTP/1.1 200 OK
< x-amz-id-2: k84tnUQsb+cs6P+vOi4HezqHwQjOimoQy1lYejqFoqhshqecXAFoRp/Caz4MSTkA
< x-amz-request-id: 833990239E48734C
< Date: Wed, 07 Apr 2010 16:37:04 GMT
< Last-Modified: Wed, 07 Apr 2010 15:58:56 GMT
< ETag: "146d3264de2325f7d7e3eaa89ad630fd"
< Content-Type: image/png
< Content-Length: 2980
< Server: AmazonS3

binary gibberish...



Please help!

Tys von Gaza
mikeday
The error messages about entity refs are because of the unescaped ampersands in the URL. Technically in HTML you cannot have "&Expires=" in an attribute value, you need to say "&amp;Expires=". However, I'm not sure if that's the only problem here. Can you try running Prince from the command-line with the --debug option?
tvongaza
Escaping the url string fixed the entity refs errors but didn't solve the image loading problem. Below is the debug log:

Thu Apr  8 09:26:07 2010: Loading document...
Thu Apr  8 09:26:07 2010: loading HTML input: -
Thu Apr  8 09:26:07 2010: debug: loaded document: -
Thu Apr  8 09:26:07 2010: debug: sniffed doctype: XHTML (no namespace)
Thu Apr  8 09:26:07 2010: loading style sheet: /opt/local/lib/prince/style/xhtml.css
Thu Apr  8 09:26:07 2010: debug: loaded resource: /opt/local/lib/prince/style/xhtml.css
Thu Apr  8 09:26:07 2010: debug: loaded resource: type: no
Thu Apr  8 09:26:07 2010: loading style sheet: /opt/local/lib/prince/style/common.css
Thu Apr  8 09:26:07 2010: debug: loaded resource: /opt/local/lib/prince/style/common.css
Thu Apr  8 09:26:07 2010: debug: loaded resource: type: no
Thu Apr  8 09:26:07 2010: loading style sheet: /opt/local/lib/prince/style/hyph.css
Thu Apr  8 09:26:07 2010: debug: loaded resource: /opt/local/lib/prince/style/hyph.css
Thu Apr  8 09:26:07 2010: debug: loaded resource: type: no
Thu Apr  8 09:26:07 2010: loading style sheet: /opt/local/lib/prince/style/xlink.css
Thu Apr  8 09:26:07 2010: debug: loaded resource: /opt/local/lib/prince/style/xlink.css
Thu Apr  8 09:26:07 2010: debug: loaded resource: type: no
Thu Apr  8 09:26:07 2010: loading style sheet: /opt/local/lib/prince/style/mathml.css
Thu Apr  8 09:26:07 2010: debug: loaded resource: /opt/local/lib/prince/style/mathml.css
Thu Apr  8 09:26:07 2010: debug: loaded resource: type: no
Thu Apr  8 09:26:07 2010: loading style sheet: /opt/local/lib/prince/style/svg.css
Thu Apr  8 09:26:07 2010: debug: loaded resource: /opt/local/lib/prince/style/svg.css
Thu Apr  8 09:26:07 2010: debug: loaded resource: type: no
Thu Apr  8 09:26:07 2010: loading style sheet: /Users/tvg/Domain/public/stylesheets/bills/default.css
Thu Apr  8 09:26:07 2010: debug: loaded resource: /Users/tvg/Domain/public/stylesheets/bills/default.css
Thu Apr  8 09:26:07 2010: debug: loaded resource: type: no
Thu Apr  8 09:26:07 2010: debug: prepack
Thu Apr  8 09:26:07 2010: loading image: http://s3.amazonaws.com/development.documents.domain.com/logos/2175/iphone-icon_medium.png?AWSAccessKeyId=137333PGACW9489NFWMDWR2&Expires=1270740656&Signature=c51EaPdMJxZpkN15Bf1%2BxlKQSUI%3D
Thu Apr  8 09:26:10 2010: debug: loaded resource: http://s3.amazonaws.com/development.documents.domain.com/logos/2175/iphone-icon_medium.png?AWSAccessKeyId=137333PGACW9489NFWMDWR2&Expires=1270740656&Signature=c51EaPdMJxZpkN15Bf1%2BxlKQSUI%3D
Thu Apr  8 09:26:10 2010: debug: loaded resource: type: yes(resource_type("image/png", [], image(png), no))
Thu Apr  8 09:26:10 2010: http://s3.amazonaws.com/development.documents.domain.com/logos/2175/iphone-icon_medium.png?AWSAccessKeyId=137333PGACW9489NFWMDWR2&Expires=1270740656&Signature=c51EaPdMJxZpkN15Bf1%2BxlKQSUI%3D: warning: Could not load PNG file
Thu Apr  8 09:26:10 2010: Converting document...
Thu Apr  8 09:26:10 2010: debug: pack
Thu Apr  8 09:26:10 2010: debug: font request: serif
Thu Apr  8 09:26:10 2010: used font: Times New Roman, Regular
Thu Apr  8 09:26:10 2010: debug: writing output: -
Thu Apr  8 09:26:10 2010: finished: success
Thu Apr  8 09:26:10 2010: ---- end
mikeday
It appears to be successfully retrieving the file, but is unable to load it as a PNG file. Is it really a PNG file? Sometimes we see JPEG images returned using an incorrect MIME type. If it is a PNG file, perhaps something is funny about the HTTP response. Are you able to download the image from that url using curl, which is what Prince uses?
tvongaza
Curl downloads the file fine, and returns the correct mime type. I generated a new secure URL, put it in a test.html file, tried "prince --debug test.html", no luck. Took the same secure URL in the test.html file, and used "curl -v url" and it downloaded fine. When I open the test.html file in a browser the image renders fine.

I then downloaded the file from the remote secure URL and saved it locally. I changed the test.html to point to this newly downloaded local file and ran the "prince --debug test.html" command. This had no problems and generated the pdf with the image just fine.

Send me a private message if you would like to arrange an instant message session where I can give valid secure URL's to test (as they are only valid for a very short period of time).

Tys
mikeday
Turns out it was a JPEG image being returned with a PNG MIME type, causing Prince to fail to load the image. We will investigate changing Prince in the future to try other formats to handle misidentified images more gracefully.
stifou
Hi guys,

I'm having the same issue with amazon s3 files (png, jpg, jpeg) : warning: Unknown image MIME type: application/octet-stream
exemple of usage : "<img src="http://example.s3.amazonaws.com/my_s3.png?AWSAccessKeyId=******&Expires=*****&Signature=*********"></img>"

Thanks,
Stephane
mikeday
If it's a PNG image, then the best solution is to convince S3 to return the "image/png" MIME type instead of "application/octet-stream". I'm surprised it doesn't do this automatically based on the file extension, actually. The next release of Prince will try to detect the correct image type if the MIME type is wrong.
mikeday
Prince 8.0 now tries harder to load images that are incorrectly assigned the wrong MIME type, which should solve this issue.