[SalesForce] How to (cross-domain) access Chatter Profile pics from Javascript code

I have a JS library in a static resource. This library's code renders a with a Chatter Profile picture taken from the results of a 

[SELECT FullPhotoUrl FROM User]

Or at least tries to.

This doesn't work as the JS is delivered from another subdomain 

domain.na14.visual.force.com

than the Profile pics:

c.na3.content.force.com.

I get a 

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

In a non-cloud world one would work with a proxy or set on the server:

access-control-allow-origin: [your site]
access-control-allow-credentials: true

Any ideas?!

Best Answer

I suspect you could use a relative URL to access the chatter profile picture. In the browser it silently behaves like this:

  1. Request of chatter picture: https://c.na11.visual.force.com/profilephoto/{id}/F
  2. Response of 302: https://na11.salesforce.com/profilephoto/{id}/F
  3. Response of 301: https://c.na11.content.force.com/profilephoto/{id}/F
  4. Request success: https://c.na11.content.force.com/profilephoto/{id}/F

Alternatively, you could leverage the native Salesforce proxy to perform this action as it was built for this cross domain purpose.

It is available at {sfdc domain}/services/proxy and the endpoint is configured in your organization in setup under Security Controls > Remote Site Settings. You would just give it a URL where the content resides such as https://c.na3.content.force.com

You would then be able to make a request from visual.force.com through the proxy to c.na3.content.force.com

A couple of articles that should provide enough insight to get you on your way.

Related Topic