Security Error #2122 loading image from Amazon Cloudfront

Question

I'm trying to load an image from my cloudfront distribution. My loading code looks like:

var thumbLoader:Loader = new Loader();

// add event listener to the thumbLoader
thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, function (event:Event):void {

    if (_thumbnail.bitmapData) _thumbnail.bitmapData.dispose();

    _thumbnail.bitmapData = (thumbLoader.content as Bitmap).bitmapData;

    _thumbnail.width = stage.stageWidth;
    _thumbnail.height = stage.stageHeight;

    thumbLoader.unload();
});


thumbLoader.load(new URLRequest(src)); // src = https://xxxxxxxxxxxxx.cloudfront.net/big_icon.png

I have tried adding a 'LoaderContext' as the second param to the '.load' call, but then I simply get an Error #2123 pop up instead of Error #2122. I have also tried adding a crossdomain.xml to the root of the server my swf is hosted on, but that does nothing (I was confused about this anyway, should the crossdomain.xml go on cloudfront? not my swf server? does cloudfront already have this?).

UPDATE:

I came up with a solution that works for my current project, but that I don't really consider a full answer to the question. Would still love to know how to set up cloudfront and as3 so I can mess with bitmaps loaded from there.

The error is thrown when I access the Bitmap data directly by accessing thumbLoader.content. You can still display bitmaps apparently without the security errors if you do not access that .content property, so I just appended the loader directly to the stage instead of transferring the bitmap data from the loader to a Bitmap instance:

stage.addChild(_thumbnail); // _thumbnail is now a Loader instance, not Bitmap

_thumbnail.contentLoaderInfo.addEventListener(Event.COMPLETE, function (event:Event):void {

    _thumbnail.width = stage.stageWidth;
    _thumbnail.height = stage.stageHeight;

});

_thumbnail.load(new URLRequest(src));

UPDATE 2:

I've discovered I can't even directly load https://xxxxxxxxxxxx.cloudfront.net/crossdomain.xml. I get a stream error, which seems to indicate the file is not there. The cloudfront documentation is very sparse on this subject, saying there is a default crossdomain.xml for rtmp distributions that cannot be edited, and not mentioning crossdomain.xml at all for web distributions. How do I add or edit this file to a web distribution?

Rob Allsopp · Accepted Answer · 2014-10-02T15:53:51.380

Gahhh, the answer was as simple as uploading a crossdomain.xml to the root of the s3 bucket my cloudfront distribution was pointing to. I'm an aws n00b obviously. So wherever the origins tab in your cloudfront distro is pointing to, go to that domain and upload a crossdomain.xml file containing something like the following:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE cross-domain-policy SYSTEM
  "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
  <site-control permitted-cross-domain-policies="master-only" />
  <allow-access-from domain="*" /> 
</cross-domain-policy>

You will also need to supply a LoaderContext with the first constructor argument set to true as the second parameter to your Loader.load call like so:

loader.load(new URLRequest(src), new LoaderContext(true));

This will tell as3 to look for that crossdomain.xml you just loaded up and get you by the first security error (#2122). The second error (#2123) will be gone if your crossdomain.xml is in the right place (root) and gives the right permissions (I just permitted all domains access with '*')

Security Error #2122 loading image from Amazon Cloudfront

1 Answers1