How to use a Javascript callout to get a PNG image

Not applicable

I am using a JS Callout in my proxy to get a PNG image and am running into the following issues -

1) When I use https, I get the SSL error - Received fatal alert: handshake_failure

2) With http, I get a response but it is the raw PNG data. If I make the request in Postman, I get the image rendered properly. I think it may be an encoding issue when making the request via Apigee. Is there a JS workaround used for callouts in Apigee?

Here's my current code -

var headers = {'Accept':'image/png'};

var req =newRequest("https://tile2.aerisapi.com/credentials/current_temps/500x500/40/-105/10/0.png",'GET',headers);
var exchange = httpClient.send(req);
exchange.waitForComplete();
var response = exchange.getResponse(); 

if (exchange.isSuccess()) {
    var responseObject = exchange.getResponse();
    print(responseObject);
    context.setVariable('awhere.imageResponse',responseObject.content);  
}else{
    print(exchange.getError());
}
0 10 3,136
10 REPLIES 10

Hello @Eskinder,

For Item #1, this looks to be a valid response, as that endpoint does not look to have a valid SSL certificate installed. You will need to work with the provider who manages this installation, which looks to be Cloudfront.net. As you can see from this output, openssl is returning an error "unable to load certificate":

$ nslookup tile2.aerisapi.com

Server:		10.10.10.1

Address:	10.10.10.1#53




Non-authoritative answer:

tile2.aerisapi.com	canonical name = de04elumlox3v.cloudfront.net.

Name:	de04elumlox3v.cloudfront.net

Address: 54.192.33.22

Name:	de04elumlox3v.cloudfront.net

Address: 54.192.33.166

Name:	de04elumlox3v.cloudfront.net

Address: 54.192.33.178

Name:	de04elumlox3v.cloudfront.net

Address: 54.192.33.237

Name:	de04elumlox3v.cloudfront.net

Address: 54.192.33.46

Name:	de04elumlox3v.cloudfront.net

Address: 54.192.33.44

Name:	de04elumlox3v.cloudfront.net

Address: 54.192.33.222

Name:	de04elumlox3v.cloudfront.net

Address: 54.192.33.53

$ tgtHost="tile2.aerisapi.com" ; echo | openssl s_client -connect ${tgtHost}:443 -showcerts | openssl x509 -text

140735161344848:error:14077410:SSL routines:SSL23_GET_SERVER_HELLO:sslv3 alert handshake failure:s23_clnt.c:769:

unable to load certificate

140735161344848:error:0906D06C:PEM routines:PEM_read_bio:no start line:pem_lib.c:701:Expecting: TRUSTED CERTIFICATE

As for Item #2, once the SSL issue for item #1 is worked out, I'd suggest using an "Accept-Encoding" header in your request to that endpoint. For example, in cURL, you would add the Header like:

-H "Accept-Encoding: image/png"

So, in your Javascript, try this:

var headers ={'Accept-Encoding':'image/png'};

Please let us know how this works. Thanks.

Not applicable

Hi @Alex Toombs, I tried the "Accept-Encoding" header but still get the binary data response. When I make the request from the JS script, in Postman, I get a properly rendered PNG image that is about 44KB. The file returned from the JS script Apigee is about 85KB. So there must be another encoding issue involved. What other solutions are available for this encoding issue?

Not applicable

Hi @Alex Toombs - more detail:

Looking with fiddler it appears that the response is being treated as UTF-8 and then non-printing characters are translated to the UTF-8 "replacement character" sequence of "EF BF BD"

So, is it possible to fetch and forward arbitrary binary data with the Apigee httpClient or do I have to use node.js?

Thanks for that, @Eskinder. When I test directly to that URL, using cURL, I get a .png file as I would expect:

$ curl -v "http://tile2.aerisapi.com/credentials/current_temps/500x500/40/-105/10/0.png" -o /tmp/0.png

Tue Jan 19 12:36:42 MST 2016

*   Trying 54.192.33.17...

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current

                                 Dload  Upload   Total   Spent    Left  Speed

  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0* Connected to tile2.aerisapi.com (54.192.33.17) port 80 (#0)

> GET /credentials/current_temps/500x500/40/-105/10/0.png HTTP/1.1

> Host: tile2.aerisapi.com

> User-Agent: curl/7.46.0

> Accept: */*

> 

< HTTP/1.1 200 OK

< Content-Type: image/png

< Transfer-Encoding: chunked

< Connection: keep-alive

< Access-Control-Allow-Headers: origin, x-requested-with, content-type

< Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS

< Access-Control-Allow-Origin: *

< Date: Tue, 19 Jan 2016 19:24:37 GMT

< ETag: 1453226400

< Expires: Wed, 20 Jan 2016 07:24:38 GMT

< Last-Modified: Tue, 19 Jan 2016 18:00:00 GMT

< Server: Apache/2.2.21 (Amazon)

< X-Powered-By: PHP/5.3.27

< Age: 724

< X-Cache: Hit from cloudfront

< Via: 1.1 b9c83fd8dd1ffcd5a0049cb728336c78.cloudfront.net (CloudFront)

< X-Amz-Cf-Id: f4Ege-gZnfrhzPzo_LGOatiHUok1Zb_wL650T4oIBlbCL7FvQzTBjw==

< 

{ [806 bytes data]

100 27200    0 27200    0     0   165k      0 --:--:-- --:--:-- --:--:--  209k

* Connection #0 to host tile2.aerisapi.com left intact

Is your JS deployed to Apigee Edge Cloud? We may be entering a more sensitive discussion regarding the specifics of your org and environment, which would be best not to share publicly. I would like to look at the specific proxy, would you be able to submit a case to Apigee Global Support on this?

Thanks!

Not applicable

Hi @Alex Toombs - yes, I get the image when I make the request in Postman. Where do I find the form to fill out for a case?

Hello @Eskinder,

As your company already has an account with us, I would be happy to add you as a user to be able to submit Support cases for your organization. Would you please email me at atoombs <at> apigee.com ?

Thanks.

Not applicable

@Alex Toombs - just sent one over. Thanks!

@Alex Toombs

, @Eskinder

Please include me in this dialog because I have exactly the same issue, in fact Eskinder was quoting my "research" here: https://community.apigee.com/questions/15479/how-to-return-a-png-image-in-the-response-payload.html

I also have an account with Apigee.

Thanks!

Hi @Jon Young - I thought my answer had posted in the other thread. It hadn't, my apologies.

john_young
Participant II

Any updates on this @Alex Toombs? Thanks in advance!