AIR: Security Sandbox Violation when using remote images - apache-flex

Question

The code below is simplified for example
I'm developing an AIR application (using Flex) which loads several of its images from a remote web server. The images display fine, however, whenever I'm manipulating the containers which hold the remotely-loaded images, I get errors in my console:
*** Security Sandbox Violation ***
SecurityDomain 'http://www.google.com/intl/en_ALL/images/logo.gif' tried to access incompatible context 'app:/sandbox_test.swf'
The images don't seem to be affected, but I don't like having errors displayed that I don't understand. Here's a sample app that exemplifies the problem:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication width="500" height="500" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:HDividedBox width="100%" height="300" horizontalCenter="0" verticalCenter="0" backgroundColor="#000000" liveDragging="true">
<mx:Image source="http://sstatic.net/so/img/logo.png"/>
<mx:Image source="http://www.google.com/intl/en_ALL/images/logo.gif"/>
</mx:HDividedBox>
</mx:WindowedApplication>
If you drag using the dragger on the HDividedBox, the security error appears.
I've looked at some of the Security class / security sandbox stuff for AIR, but by default AIR should have access to networked resources (which is why the images load I think). Using Security.allowDomain("www.google.com") isn't an option in AIR - it just throws a SecurityError.
Does anyone know what's causing it, or how to fix it? (Or maybe it's just a Flex/AIR bug?).
Also - does anyone know if there's a way to break when the error happens, so I can trace it to the root action causing it?

Answer 1

This security sandbox issue is specific to dragging UIComponents that have Image components in them. The Image components reference external images. I've looked everywhere and every post I run into the thread ends unanswered, which typically means its a bug.
My bootleg workaround? After the image has downloaded to the Image component, cache it as a bitmap and reassign the Image components source to the Bitmap. This fixed the issue for me:
private function authorImageLoadComplete(event:Event):void {
var bp:Bitmap = dupeImage(authorImage);
authorImage.source=bp;
}
private function dupeImage(source:Image):Bitmap {
var data:BitmapData = Bitmap(source.content).bitmapData;
var bitmap:Bitmap = new Bitmap(data);
return bitmap;
}
Then your image tag in your UIComponent:
<mx:Image id="authorImage" complete="authorImageLoadComplete(event)"></mx:Image>
Best of luck guys

Answer 2

For Flex 4, try setting the top level WindowedApplication's useNativeDragManager property to false, as documented here: http://cookbooks.adobe.com/post_How_do_you_make_a_Spark_custom_itemRenderer_with_a-16532.html

Answer 3

Do this images show up when you aren't running in Debug? The problem is that the domain doesn't have a crossdomain.xml file setup to allow for images in Flash.
http://www.google.com/crossdomain.xml:
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<site-control permitted-cross-domain-policies="by-content-type" />
</cross-domain-policy>
You should probably just grab the images and place them in your application's assets, or on a domain you control and can properly add a crossdomain.xml that would allow for the content. Security.allowDomain isn't going to have the affect you are looking for. This article has the best explanation of crossdomain security I have read.
See ryanstewart's comment below. The above is hogwash for an AIR app.