R – AIR: Security Sandbox Violation when using remote images

airapache-flexSecurity

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?

Best Answer

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

Related Topic