Quick Tip: Using a PHP Proxy to Load Assets into Flash
So, you’ve just created an awesome Flash app that loads images and xml from another domain. When you test it from the IDE it works perfectly, but when you put it online, you get one of those dreaded security sandbox violation errors. What to do?
In this Quick Tip, I’ll show you how create a simple PHP proxy to load images and xml from anywhere, error free!
Isolated Clouds (used in perview icon) by vibes35 available on GraphicRiver.
Step 1: Understanding The Problem
The Flash player has a few different security sandbox types: remote, local-with-filesystem, local-with-networking, and local-trusted. Each one has its own set of rules and the Flash player determines which of the sandbox types to assign when the SWF is opened. When a file is in development, the IDE automatically assigns a trusted sandbox type. This is why when creating and testing your project, it will work fine, yet it breaks when published to the web.
These security sandbox rules are put into place to prevent hackers and evildoers from accessing data they probably shouldn’t be accessing. To get by this for our own [legal] uses, we employ the help of a PHP file.
Below, we try to load an image and cast the content within the Loader as a bitmap, without any outside help. If the target domain doesn’t have a crossdomain.xml file giving us permission (most sites don’t give anonymous permissions), then we’ll get an error.
See? It doesn’t work at all. Here’s the code that’s powering it:
[sourcecode language="actionscript3"]
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.system.LoaderContext;
import flash.system.Security;
var loader:Loader;
var req:URLRequest;
btn_load.addEventListener(MouseEvent.CLICK, loadImage);
function loadImage(e:MouseEvent):void
{
txt_status.text = "";
req = new URLRequest(imgPath.text);
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
loader.load(req, new LoaderContext(true));
}
function loadComplete(e:Event):void
{
try
{
var img:Bitmap = new Bitmap();
img = loader.content as Bitmap; // Here’s where the error occurs
}
catch(error:Error)
{
txt_status.text = error.message.toString();
}
}
[/sourcecode]
Step 2: Understanding the Solution
PHP! PHP doesn’t have the same restrictions as Flash because it’s a server-side scripting language – unlike Flash, which is a client-side technology. This allows us to use it as a “middle man” to return content to our domain. The PHP file will appear to the Flash player to be whatever type of file we are returning. Since the PHP file is returning data to our domain, we can load the content we want while still abiding by the Flash player’s security rules… schweet!!
Even though PHP covers the data retrieval, we’ll also need a cross-domain policy file. We’ll make that first to get it out of the way.
Step 3: Implement a Cross-Domain Policy File
If you don’t already know, a cross-domain policy file is an XML file that basically tells the requesting client, “yes, you can read my domain’s content,” or “no, don’t touch my stuff!”
(More info in this Quick Tip.) Here are some real world examples:
- http://www.yahoo.com/crossdomain.xml
- http://developer.yahoo.com/crossdomain.xml
- http://pipes.yahooapis.com/crossdomain.xml
The first one allows any requests from a yahoo sub domain such as movies.yahoo.com. The second one is the same, except it also allows requests from any maps.yahooapis.com sub domain, and yui.yahooapis.com. The third example is interesting because it grants read access to any domain by using the * wildcard.
Now that we know what they look like, let’s create our own. We’ll need it to tell the Flash player that it’s ok to read data from our own domain.
Create a new xml file in the root of your website and name it “crossdomain.xml”. Once you’ve done that, just copy the xml code below and replace “www.yourdomainhere.com” with your own domain name.
[sourcecode language="xml"]
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="www.yourdomainhere.com"/>
<allow-access-from domain="yourdomainhere.com"/>
<allow-access-from domain="*.yourdomainhere.com"/>
</cross-domain-policy>
[/sourcecode]
This grants read permission to requests coming from your domain and its sub domains. Once again, this file should reside in your website root.
Step 4: On to the Code!
Let’s create a foundation for our PHP Proxy. We’ll be sending the path of the file we want to access via the GET method, from Flash. Create a folder named “LoaderTest” in the root of your website, and create a new PHP file in that folder named “proxy.php”. Add the following code to the PHP file:
[sourcecode language="php"]
<?php
$filename = $_GET['url'];
header(‘Content-Type: text/xml’);
readfile($filename);
?>
[/sourcecode]
What our code does so far:
- Sets a variable called
$filenameequal to theurlvariable in our querystring - Adds the “text/xml” content type declaration to the header of our file
- Reads out the raw data of the file we requested
Isn’t that remarkably simple? Since we’ve added “text/xml” as the content type to the header, our proxy.php will render the data as xml. Let’s test it out.
In your address bar, navigate to the proxy.php file you created on your website, and after “/proxy.php” add “?url=http://feeds.feedburner.com/flashtuts-summary”. The entire URL should look similar to this:
"http://www.example.com/LoaderTest/proxy.php?http://feeds.feedburner.com/flashtuts-summary"
If you’ve done everything correctly to this point, you should be looking at an Activetuts+ RSS feed!
Step 5: Adding More Functionality
Since we want our proxy.php file to return more than just text, we’ll need to add to it. In order to return the correct header type, we’ll make the proxy fetch the file extension information by using the pathinfo() function and set that equal to a variable called $ext. After that, we can evaluate the file extension and decide the correct path of action for that file type. For the evaluation, we’ll employ a switch statement.
We only want to return images and text, so I’ve added some general image types to our switch statement. In the case of the “jpg” file extension, the first step is to add the correct content-type attribute pertaining to that type of file. After that, the data from the file is read. The “gif” and “png” cases contain identical functionality.
Since we want to return images and text, we’ll need to work in a case for returning that text. The trouble is, that text such as rss feeds, xml, etc. might not always have a file extension like the images do. What if they are dynamically generated? If we were to look for a concrete file extension, then we could easily get it wrong in the case of dynamic xml and it would not return the info correctly. The solution is just to pop our original code for returning text/xml (in the previous step) into the default case! Since everything else we’re trying to return will have a known file extension, if no file extension is found, then we can assume that we are attempting to return a text/xml type.
[sourcecode language="php"]
<?php
$filename = $_GET['url'];
$ext = pathinfo($filename, PATHINFO_EXTENSION);
switch ($ext) {
case "jpg":
header(‘Content-Type: image/jpeg’);
readfile($filename);
break;
case "gif":
header(‘Content-Type: image/gif’);
readfile($filename);
break;
case "png":
header(‘Content-Type: image/png’);
readfile($filename);
break;
default:
header(‘Content-Type: text/xml’);
readfile($filename);
break;
}
?>[/sourcecode]
Step 6:Test the Completed Proxy
Alright! The moment of truth… test time. You can try to load any images you’d like to from the web, but we’ll try to load the same image as before, in Step 1. Here’s the format once again:
http://www.example.com/LoaderTest/proxy.php?url=http://s3.envato.com/files/358820.jpg
And of course, you’ll need to replace www.example.com with your domain. You should see the following result:
Also, something interesting that you’ll notice is that you cannot view the source of this page. As I mentioned earlier, PHP is a server-side scripting language so we cannot view it like html. All we’re seeing is the data that was read out by the PHP code. This is how we get the content into Flash … we load the PHP page just like any other file!
Step 7: Bringing the Data into Flash
Below is a simple code example of how to bring the data into flash using the proxy.
[sourcecode language="actionscript3"]
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.system.LoaderContext;
var loader:Loader;
var req:URLRequest;
var proxy:String =
"http://www.YOUR-WEBSITE-HERE.COM/LoaderTest/proxy.php?url=";
req = new URLRequest( proxy + "http://s3.envato.com/files/358820.jpg" );
loader = new Loader();
loader.contentLoaderInfo.addEventListener( Event.COMPLETE, loadComplete );
loader.load( req, new LoaderContext(true) );
function loadComplete(e:Event):void
var img:Bitmap = new Bitmap();
img = loader.content as Bitmap;
img.smoothing = true;
addChild( img );
}
[/sourcecode]
Step 8: Some Notes
While it is possible to load images from remote domains without the use of a proxy, it is when you attempt to directly access that loaded content in flash that you’ll get the security sandbox errors. I’ve seen Flash apps that just add the loader to the stage, and it works; however, if you don’t have permission to access the file data, you lose a lot of options for manipulating it.
If you want to have total control over the content you load into Flash from outside sources (that don’t have an open cross-domain policy file), you’ll need to use some sort of proxy. Even something like applying smoothing to a loaded image requires access to the loader content.
Conclusion
So that’s all there is to it! I hope this helps a lot of you avoid many headaches in the future! Thanks for viewing!
Suggested Reading
- Quick Tip: Using Google App Engine as a Proxy Server
- Quick Tip: A Guide to Cross Domain Policy Files
View full post on Activetuts+
