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();
// add 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/
Related
I have the following config flags in my com.omniture.AppMeasurement setup (swc version FAS-3.4.7)
trackingServer: "metrics.my-site.com",
trackingServerSecure: "smetrics.my-site.com"
and when visiting https://my-site.com and I'm seeing beacons go to metrics.my-site.com instead of smetrics.mysite.com. The page tracking is reporting to the secure page, but the swf based video metrics are not. The html5 fallback is also behaving correctly, it's only the swf that has this problem. (The swf is also being loaded via https)
What determines where the beacons are going and if it's just the parent url, what else could cause this to default to the http beacon url?
Looks like this might work:
actionSource = new ActionSource();
actionSource.ssl = true;
Trying to get the current URL of the website I have posted the flash object in, without using Javscript or ExternalInterface calls.
e.g.
Website Im posting in is http://some.forum.com
Website of swf is http://uploaded.to/site/of/object.swf
In my post at some.forum.com I include in the post:
[flash=100,100]http://uploaded.to/site/of/object.swf[/flash]
Unfortunately it keeps returning the url of website I initially uploaded to, and not the current forum I am linking it in.
Current used methods are:
var urlname:LocalConnection = new LocalConnection();
trace(urlname.domain());
and
var urlName:String = this.loaderInfo.url;
trace(urlName)
Both returning uploaded.to/site/of/object.swf, and not some.forum.com
How do I get my desired result?
Not sure if it applies to your scenario but have you tried BrowerManager: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf64e50-7ff8.html
Something like
var browserManager:BrowserManager = BrowserManager.getInstance();
trace(browserManager.url);
Hmm. Well I've found a small workaround: Referrer.
All I need to do is get the swf to request another website that performs some javascript or php to return the URL of the referrer website.
var textLoader:URLLoader = new URLLoader()
var textReq:URLRequest = new URLRequest("http://my.site.com/findReferrer.html");
textLoader.load(textReq);
textLoader.addEventListener(Event.COMPLETE, trace(textLoader.data);
Unfortunately referrer is purely browser dependent and often doesn't work for https.
So back to square one..
I built an excercise in flash cs5/as3. It draws its content from an xml-file.
Because I want to make it easy for other people to create their own excercise based on this swf, I want the actionscript to load the xml, with the filename based on a parameter in the html code.
In this case the xml is called oef01.xml
The link would look like this: BoFlitsOefening.swf?id=oef01
And the actionscript like this:
public function Main ()
{
//myFile is a string I declared earlier
myFile = LoaderInfo(this.root.loaderInfo).parameters["id"];
myFile += ".xml";
loadXml ();
}
function loadXml ():void
{
xmlLoader = new URLLoader(new URLRequest(bestand));
xmlLoader.addEventListener (Event.COMPLETE,xmlLoaded);
}
function xmlLoaded (event:Event):void
{
myList = new XML(event.target.data);
myList.ignoreWhite = true;
}
The construction is working fine in Internet Explorer but not in Firefox. I have done internet research but I could not find an explanation or a solution I was able to apply, though the issue is known.
Are you testing it on the server or locally - the URL in your browser should start with http:// not file:///?
It should work fine on the internet, while locally the URLs containing ? may not resolve properly.
In that case you may use FlashVars instead - you don't need to change the AS code, just HTML/JS.
And on a side note: you may try to embed the SWF file using SWFObject - some crossbrowsers issues are caused by wrong/buggy embedding code.
Also FireFox likes to keep external sources cached, so there's a likelihood that it's loading an old file. Make sure you clear the cache after updating the xml.
there is a way of tricking it to load it fresh every time by adding some junk after, like
.../my.xml?rand=001820018
where you generate the number randomly every time, if I remember correctly
How can i save a webcam screenshot to a website?
I know you can save it to your hard drive using:
var browseFileReference = new FileReference();
browseFileReference.save(video);
But how would i go about it to save this image to a website, lets say flickr or facebook or something.
Any help?
You should have a look at existing AS3 library.
Flickr : http://code.google.com/p/as3flickrlib/
Facebook : http://www.adobe.com/devnet/facebook.html
The basic steps are, generate the bitmap data for the region you want, use one of the F/OSS libraries to generate PNG or JPEG data, base64 the data, and then generate a URLRequest with the encoded image as POST data, which can hen be handled server side. I would have to dig through projects to find the proper classes I have to do this to show a real example, but this is actually really simple. Each of the steps I outline can be implemented in a few lines of code using existing libraries.
You can save the screenshot of the webcam as ByteArray. Make sure you have the JPGEncoder class (from the as3corelib).
// bitmapdata
var btmData:BitmapData = new BitmapData(video.width, video.height);
btmData.draw(video);
// make jpg
var jpgEncoder:JPGEncoder = new JPGEncoder(90);
var jpgBytes:ByteArray = jpgEncoder.encode(btmData);
Now, you can use the as3flickrlib to connect with Flickr. Danny Patterson wrote a nice article to upload a ByteArray to Flickr with this library, see http://blog.dannypatterson.net/2009/08/upload-bytearray-to-flickr/
Edit: I would first try to upload it to Facebook, that is much easier than uploading an image to Flickr.
I'm trying to get current browser url. I have already tried with External Call, and it didn't work. And with loaderInfo.url I receive the current SWF url.
Give this a go:
import flash.external.ExternalInterface;
var url:String = ExternalInterface.call("window.location.href.toString");
if (url) textfield.text = url;
should do the trick.
There are a couple of ways to solve this problem, however all of them involve the use of JavaScript to query the browser directly.
My preferred way to solve this problem would be to provide the URL via a flashVar property, direct from the embed code (personally, I would reccomend using SWFObject to make this easier); don't forget you will need to URL Encode it to avoid markup issues.
var flashvars = {
browserURL: escape(location.href)
};
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf", flashvars);
Now you will be able to access the Browser URL via the loaderInfo object:
trace(stage.loaderInfo.parameters["browserURL"]);
note that this will only work if you have control of generated HTML for your SWF file - if users are going to be grabbing the SWF and writing their own embed HTML, it's not going to work.
If you don't have control of the flash embed HTML, then you will need to get flash to query the browser at runtime using the ExternalInterface class; other people have suggested the use of "window.location.href.toString" however this can prove problematic in IE6, I find the following works reliably across all browsers
const browserURL : String = ExternalInterface.call("eval", "window.location.href");
Note that in order for this to work, you will need to grant JavaScript access to your Flash movie, this is done, again, via the HTML embed code and the allowScriptAccess param
var url:String = loaderInfo.loaderURL;
seems to work too.
I would try passing the required info in as a flashvar. Not the best out of the box solution I know, but it will work.
Flash: FlashVars in AS3
i think its posible to use the external interface an do it with javascript window.location
I have been using flash for a long time and never noticed this one. It only gives the domain though for security. It does work through loaded swfs as well. Not sure about iframes.
Security.pageDomain