Force.com Mobile SDK 3.x – Critical Image Bug And How to Work Around It

The Force.com Mobile SDK 3.x has brought about some welcome changes such as Cocoapods support, Gradle support, Cordova update to 3.7 and many more. However, it has also meant that some things which worked perfectly in Mobile SDK 2.x no longer work. One such critical bug relates to how the image URLs are handled in Mobile SDK 3.x hybrid apps.

Read on if you are one of those hybrid developers who’s either upgraded your app from Mobile SDK 2.x or are about to do so.

What exactly is the issue?

If your app is pulling an image from Salesforce which is configured using a formula field, it is no longer pulled down correctly using the Mobile SDK 3.x. This worked without any issues with 2.x so it took a lot of hair pulling, scratching (literally everywhere) and lots of work. We filed an issue on the Mobile SDK iOS repo.

Let’s analyse what’s changed

Essentially, the image URL generated by Mobile SDK 2.x had the format

https://x.xxx.content.force.com/servlet/servlet.ImageServer?id=xxxxx

But for some reason, with 3.x this changes to

https://x.xxx.content.force.com/servlet/rtaImage?eid=xxxxx

Let’s try some solutions 

1) Mobile SDK team was actually pro-active to respond and they asked us if we’d tried using bearer token URL. That didn’t help though as the Mobile SDK internally handles the bearer token as follows

var getRequestHeaders = function(client) { var headers = {};
       headers[client.authzHeader] = "Bearer " + client.sessionId;
        headers['Cache-Control'] = 'no-store';
        // See
        // http://www.salesforce.com/us/developer/docs/chatterapi/Content/intro_requesting_bearer_token_url.htm#kanchor36
         headers["X-Connect-Bearer-Urls"] = true;
        if (client.userAgentString !== null) {
            headers['User-Agent'] = client.userAgentString;
            headers['X-User-Agent'] = client.userAgentString;
        }
        return headers;

We tried a few more approaches but nothing clicked. We then went back into analysing the issue more deeply to see how the rtaimage URL parameters work and realised that it’s a session issue which may be resolved by hitting the froontdoor URL.

This is what worked

Essentially, the hack is to get current session via frontdoor url for the image.

$.ajax({url: forcetkClient.instanceUrl + "/secur/frontdoor.jsp?sid=" + forcetkClient.sessionId
, success:
function(result){ // my scuccess callback }});

On success callback, we set the same URL again on html image field and it then loads the image correctly.

Status Quo

The Mobile SDK team has accepted this issue as a valid bug but not provided a definitive ETA to fix this yet. I believe this has been broken due to the Cordova upgrade and I tried a few things to fix it directly in Cordova but that didn’t quiet work.

The above workaround is NOT the most elegant way to fix it but it does work. If you have run into the same issue, this may help. If you have a better solution in mind, please drop me a line.