AS3: Loading External Images

I really must say that Actionscript 3 is far far better and faster then all the previous versions and I like it very much. From my experience the Flash market, and especially the Flash 9 market, is growing extremly fast. I´ll get job offers nearly every week, sometimes even 2 at a day. So I have the freedom to pick out what I like most. Currently I am involved in a project where I am creating a Java-Backend driven Flash User Frontend. Part of the project is to load and display external Images from untrusted websites. So basically what Flash should do is loading the image and creating a thumbnail and a better and bigger version of the image which should display when the user moves the mouse over the thumbnail.

Actionscript:
  1. this.loader = new Loader();
  2. this.loader.load("http://somewebsite.com/image.png");
  3. this.loader.addEventListener(Event.COMPLETE, onLoadComplete);
  4.  
  5. public function onLoadComplete(event:Event):void {
  6.  var thumbnail:Sprite = new Sprite();
  7.  thumbnail.addChild(this.loader);
  8. }

No problem so far! The image is available when onLoadComplete is thrown and the thumbnail gets displayed. Next I wanted to add the mouseEvent which displays the bigger version of the image. My idea was to copy the bitmapData of the loader object. So I did and had a Security Exception as a sideefffect because copying bitmap data of loaded image from an untrusted website (no crossdomain.xml) violates with the local sandbox.

Actionscript:
  1. /* throws Security Violation if the
  2. loaded image came from an untrustes website */
  3. var bigImage:Bitmap =
  4.     new Bitmap(loader.content).bitmapData.clone();

You might ofcourse download the image and display it but you are not allowed to even touch or manipulate the bitmap data, because you might inject the image with bad code which could lead to an unsafe system. This makes sense ofcourse. Now I know better.
So for the moment I created a new loader for the the image which displays on mouseOver Event because I could not find a better way (like cloning the loader object) without having Security problems again. I can live with this solution, but do you have any better idea?

23 Comments

  1. MrSteel 2007-06-12, 5:32 pm

  2. Manfred Weber 2007-06-12, 5:39 pm

    Gravatar

    yeah a proxy would help of course … thanks for the hint

  3. Mike J 2007-06-12, 5:41 pm

    Gravatar

    Yeah, you either need to load it via a proxy that’s local on your server or make sure you have the crossdomain.xml file on the root of the server you are getting the images from ( essentially them saying it’s ok for you to load those ).

    http://www.crossdomainxml.org/

  4. Manfred Weber 2007-06-12, 5:51 pm

    Gravatar

    Yep, proxy is fine since we might load data from nearly everywhere, so we cannot ask everyone to add a crossdomain.xml to their serverx. This solution is ok, at least I now have one that will work. But still I would be interested how the pure Actionscript solution might look like. I believe it is possible to copy the loader object somehow. I just dont know how yet.

  5. wiijoo 2007-07-18, 9:44 pm

    Gravatar

    [...] assa [...]

  6. Ascanio 2007-08-21, 11:31 am

    Gravatar

    I have incurred in the same issue myself (while developing an app for Facebook).

    The proxy seems to be the only solution. There is no apparent workaround within AS3. Unless there is some hidden class or code that some Adobe engineer might want to share…

  7. Groups 2007-08-23, 2:03 am

    Gravatar

    thanks for this helpfull posting manfred.

    Groups

  8. pigiuz 2007-09-14, 2:51 pm

    Gravatar

    it’s not correct to assign an event listener directly to the Loader object.
    You have to assign it to the contentLoaderInfo property of your Loader to make it run properly.

    something like
    this.loader. contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);

    I hope to be helpful :D
    bye

  9. Sohbet 2007-10-7, 9:45 am

    Gravatar

    It seems like you should have kept this new theme closed-source until a couple of weeks before the 5.0 launch… (don’t know if that was possible at all?) However, I definitely feel it’s not drupal that made a mistake here, but the wordpress team.

  10. steffen 2007-12-7, 4:00 pm

    Gravatar

    I had some trouble with the following part of your code:
    new Bitmap(loader.content).bitmapData.clone();

    Solved it via:
    new Bitmap(loader.contentLoaderInfo.content).botmapData.clone();

    regards!

  11. Mini Storage 2007-12-11, 10:12 am

    Gravatar

    thanks for this helpfull posting manfred.

  12. Fardeen 2008-01-10, 2:59 am

    Gravatar

    Very helpfull, Thx a lot for sharing.

  13. Jake Rutter 2008-01-22, 1:58 am

    Gravatar

    The PHP proxy helped me immensely, I was running a script fine on my local box and when I pushed it up to my server, nothing was showing! I just wish it would have been cleared in the documentation. Here is an adobe doc with more info about the proxy:

    http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_16520&sliceId=1

  14. Manfred Weber 2008-01-22, 10:07 am

    Gravatar

    Hi Jake, thank your for the link. Just perfect. :)

  15. kraloyun 2008-01-26, 10:56 pm

    Gravatar

    Thanks for sharing.

  16. LinDol 2008-01-30, 12:26 am

    Gravatar

    hi..
    maybe… loader event attach is

    loader.contentLoaderInfo.addEventListener ??

    thankyou share. :)

  17. mathias Wedeken 2008-02-10, 7:35 pm

    Gravatar

    Hi,

    sounds just what I need for a project I´m working on, somebody needs an XML driven gallery with thumbnails. All the images are stord on their own server, so no security issue, I guess. But what I wonder is this: When You create a thumbnail of something, it might be the display size that is thumbnail, but (at least that´s what I remember from AS2) the load size is whatever the image is, so the thumbnail in this case is not to have something that loads really fast and to only make the user wait longer in case he wants to see the bigger version, but rather to fit more pictures on the page, is that right? (Hence the bitmapdata copy).

    I just wonder, because tht issue will come up, and the only workaround I can think of is to have every picture as a big and a small version on your server…

    Anyways, maybe you have a thought on this and share it with me..

    best

    Mathias

  18. Cameron 2008-04-9, 1:25 pm

    Gravatar

    Don’t use PHP or Ruby or C# to proxy it’s added unnecessary load on your server. Use your web server to do that. Nginx or Apache both have proxy rules that I’ve used to deal with these sorts of security issues.

  19. stephen2earth 2008-05-23, 1:01 am

    Gravatar

    Hi,
    Try adding an event listener for INIT instead of complete, not sure if that will turn out any better, but it’s good coding practice. :)
    Cheers,
    Stephen

  20. Manfred Weber 2008-05-23, 8:30 am

    Gravatar

    Stephen,
    adding event listeners to INIT does not solve any problem neither is it good coding practice here. The problem is already solved by using a proxy.
    Regards
    Manfred

  21. stephen2earth 2008-06-2, 2:20 am

    Gravatar

    No worries.
    Yeah, you’re right about that…I do tend to use INIT most of the time for flexibility in loading .swf files, so I suppose I am just prejudiced. :)
    Cheers,
    Stephen

  22. online film izle 2008-07-3, 11:33 pm

    Gravatar

    thank youu

  23. film izle 2008-07-3, 11:34 pm

    Gravatar

    eyvallah

Add a Comment