Load profile image from Facebook with Actionscript 3

I'm trying to load profile images (friend images) from Facebook with AS3 but I seem to be running into a security issue.

I'm currently using the "official" Adobe Facebook API for Actionscript 3 which works fine. However, I seem to be having trouble loading profile images when running my application in a browser. The images load fine when running in the Flash IDE.

The images are being loaded from https://graph.facebook.com and there seems to be a crossdomain.xml policy on that domain:

<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"> 
<cross-domain-policy> 
  <allow-access-from domain="*" secure="false" /> 
 <site-control permitted-cross-domain-policies="master-only" /> 
</cross-domain-policy> 

In other sources I found that adding a ContextLoader to my Loader object when loading the image should solve the problem but this doesn't seem to be the case either:

loader = new Loader();
// ad开发者_Python百科d some listeners here...
loader.load( new URLRequest( "imageurl" ), new LoaderContext(true) );

I'm not quite sure how to proceed at the moment. I was hoping that the Adobe Facebook API would provide assistance in this but I can't seem to find anything that solves this issue.

Any help greatly appreciated.

UPDATE:

I just noticed that when I visit one of the images in a browser that I'm actually redirected to Facebook's CDN where the actual image is stored. When I hard-code the image url with the redirected URL I can load the image in the browser. It seems that this is not a security issue after all but a redirection issue.

If this is a redirection issue then the question would become; How can I have Flash Player load an image from a redirected URL?

UPDATE 2:

It seems that the URLRequest class has a followRedirects property which is only available in AIR.

UPDATE 3:

I'm currently using a PHP script to get me the redirected URL as a work around but this of course is far from ideal and potentially a big strain on my server.

I had the same problem and it looks like you have to manually load the crossdomain file of the domain you are redirected to in actionscript. For now, it looks like all facebook profile images are finally loaded from the domain http://profile.ak.fbcdn.net/.

I just added this line before loading the images:

Security.loadPolicyFile("http://profile.ak.fbcdn.net/crossdomain.xml");

This should allow for loading the redirected images, as long as the redirect domain does not change. ;)

You can use a URLLoader and load the image as a ByteArray. This appears to work regardless of the redirect. You can then use the ByteArray as the source for an Image/BitmapImage or use a Loader to load the bytes as you would have the image url in the first place.

For example:

var urlRequest:URLRequest = new URLRequest("http://graph.facebook.com/id/picture");
var urlLoader:URLLoader = new URLLoader();
urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
urlLoader.addEventListener(Event.COMPLETE, completeHandler);
urlLoader.load(urlRequest);                

function completeHandler(event:Event):void
{
   var byteArray:ByteArray = loader.data;

   // Then either:
   bitmapImage.source = byteArray;

   // or:
   var loader:Loader = new Loader();
   ...
   loader.loadBytes(byteArray);
   ...
}

it should be a relitively easy thing to do, all of the facebook profile images can be found by using the picture root of the graph API. like this link:

"http://graph.facebook.com/" + userid + "/picture"

I would like to confirm martin's solution here.

My case goes from testing the application on AIR platform which is fine and works great, the image loaded successfully.

But when I port it into canvas app on facebook then I face a problem, the profile images won't come along, it cannot load.

I use what martin suggest here. And if you track a url redirection, you will see that actually image profiles are located at that CDN server not facebook itself, so you need to load that domain's policy file according to actionscript's security-sandbox.

Thanks again.

totally guessing but you could use URLLoader to get the data from the redirected call, then parse it together into a picture xD

I am using two loadPolicyFile calls, as it seems there are 2 possible CDNs that facebook uses. This is working for me but of course, a generic solution is preferable, facebook might again add another CDN and things would just stop working on their own --

Security.loadPolicyFile('http://profile.ak.fbcdn.net/crossdomain.xml');
Security.loadPolicyFile('http://profile.cc.fbcdn.net/crossdomain.xml');

The URLLoader solution suggested by @Stiggler might work. I haven't tried. But it seems heavier compared to using a Loader object.

Since there are a lot of domains where Facebook stores it's photos I wrote a little script that uses the domain of the image to load the appropriate policy file:

import com.adobe.net.URI;
import flash.system.Security;

var someFacebookImageUrl:String = "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/c66.66.828.828/s160x160/537210_440478782684964_233907781_n.jpg";
var uri:URI = new URI(someFacebookImageUrl);
Security.loadPolicyFile(uri.scheme + "://" + uri.authority + "/crossdomain.xml");

Nice this is that it works not only for the profile images but for all images facebook uses.

Hope this helps some of you!

PS: The URI class is part of the as3 core lib: http://code.google.com/p/as3corelib/