When working with Twitter I foolishly got pretty far into my development without testing how my applet would work once it was hosted on a web server. You see Flash is very open to loading data from any domain when you are testing locally. If you have a swf on yoursite.com that needs to load data from twitter.com or youtube.com or flickr.com there are important measures that you need to take. Flash’s built-in security systems do not allow you load data from a source that does not specifically grant your swf access. Its not as tough as it sounds once you know what to do.
Watch the Video Explaining How crossdomain.xml and proxy files work
This post is a continuation of my series on “What I Learned from Building the TwitterSpitter“.
Flash and Crossdomain.xml
In the ideal scenario you will have access to both the server hosting your swf and the server hosting your data. In this case you can simply add a crossdomain.xml to the data server that specifies the domains that can access the data.
In basic terms if you have a swf on yoursite.com that needs to access data on yourdatasite.com. You can put a crossdomain.xml file on yourdatasite.com that lists yoursite.com as a trusted source.
How it works
Whenever a swf requests data from a domain OTHER than the domain it is hosted on, it looks for a crossdomain.xml on the site hosting the data. This happens automatically. If the crossdomain.xml is not there the swf will get a security error. If a crossdomain policy file is there but the swf’s domain is NOT listed a security error will also occur. The crossdomain.xml must exist in the root (top-level) directory of the site hosting the data.
In this relationship it is the swf file that is trying to find out whether or not the data domain will grant it access.
The following chart illustrates two swfs attempting to load customers.xml from userdata.com
The swf on doyouhaveapen.com will be able to access the customers.xml on userdata.com because the crossdomain.xml file on userdata.com lists doyouhaveapen.com as a trusted source.
The swf on blornhauser.com will NOT be able to access the data because it is not listed in the crossdomain.xml file.
In the case of working with third-party data hosts like twitter you do not have the ability to access or change their crossdomain.xml files so this is not an option for you. Below is a sample of twitter’s existing crossdomain policy file.
Notice, your site isn’t listed:)
Use a PHP Proxy Script to Bypass Flash’s Security
In order to work with data on third-party domain’s where you can not control the crossdomain file you can fool your swf into thinking it is getting the data from the same domain that the swf lives on.
Real World Analogy
Suppose your parents give you a cellphone. You’ve been bad recently and they’ve configured your phone to only call a few family members. You really want to order a pizza but the number to the pizza place isn’t on your phone. Fortunately, they forgot to block Uncle Bob’s number. So you call Uncle Bob and ask him to place the order for you. This is exactly what your swf file is going to do with the proxy script.
You are going to place a proxy script (fancy term for middle-man) on your server that will forward requests from your swf to the data hosting domain. Your swf is going to think it’s getting data from the same server it lives on. It doesn’t know that Uncle Bob is doing your dirty work for you.
In my video I use the term php-proxy script quite a bit. PHP is an open-source (freely available) server side language that is installed on a majority of the webhosts out there. You can find proxy scripts for any language that your server supports. Again think middle-man or Uncle Bob.
Your proxy script simply gets the data for you.
Your swf talks to the proxy script and the proxy script gets the data. Flash never knows that you dialed out.
The chart below shows how a swf can pass a request through a proxy
In the scenario above the swf would make its data request to the following URL:
http://www.doyouhaveapen.com/twitter.php?url=http://api.twitter.com/1/statuses/followers/frank.xml
That bit in bold after the ? states what URL the twitter.php proxy file should fetch the data from. This is the same as you saying “Uncle Bob, please order a pizza from 555-1234″.
As far as the swf knows your request never went beyond www.doyouhaveapen.com so it isn’t concerned with policy files on twitter.com.
Pretty slick, right?
Here is a direct link to the site I got my php script from: http://xmlrpcflash.mattism.com/proxy_info.php
Warning: Be sure that your host allows these proxy scripts. Most sites do, but I had a problem initially with hostgator.com. I spent over an hour testing multiple scripts with no luck. I eventually learned that hostgator prevents these scripts from running on their basic accounts. After contacting support they were very nice and allowed the script to run. I am very happy with their service.
Hopefully you will learn a bit from my mistakes. Remember to:
1: Always test data-loading from a live webserver as soon as possible.
2: Familiarize yourself with Flash’s Security Policies (PDF).
3: Be aware of the constraints of your hosting contract.
4: Ask nicely.
Other Articles In This Series
-Intro to the TwitterSpitter and common errors when loading XML data from Twitter
-Detecting illegal image names prior to loading
-Dealing with Twitter’s rate limit
