Wednesday, April 28, 2010

Flex 3: Cross Domain XML Loading

Flash Player has security feature, This security is basically domain based. It will allow a swf from specific domain to load assets, data or it will allow communication between two swf files from that domain. When a particular swf file is loaded in flash player, Security sandbox is created for that particular domain. This mean swf file in that domain will have access to all assets, data of that sandbox.

If a swf file from any particular domain wants a access to data or assets of any other domain, we need to have cross-domain policy file available on remote server. This crossdomain.xml needs to be structure in predefined format, Which will be read by the swf player and depending upon the tags, it will allow access to that server.

Following is the sample code for crossdomain.xml.


<?xml version="1.0"?>
<cross-domain-policy>
<!-- below tag will allow access from any domain. -->
<allow-access-from domain="*"/>
<!-- below tag will allow access to www.shaileshmak.000fees.net domain. -->
<allow-access-from domain="www.shaileshmak.000fees.net"/>
<!-- below tag will allow access to any sub domain of 000fees.net domain. -->
<allow-access-from domain="*.000fees.net"/>
<!-- below tag will allow access to 105.216.0.40 ip. -->
<allow-access-from domain="105.216.0.40"/>
</cross-domain-policy>
If a swf tries to access any data from other domain, swf player by default search for the crossdomain.xml file at root directory of the remote server. If the crossdomain.xml is placed other than the root directory, We can access that file using Security.loadPolicyFile(); function.

e.g.
Security.loadPolicyFile(http://www.shaileshmak.000fees.net/MyWork/crossdomain.xml);
Make sure you are loading this crossdomain.xml file, before loading the assets from the remote server.

I have created a Flex example for loading xml into the datagrid, In this example, the data xml file is located at remote server and the swf file from different server is accessing this xml and loading it into the datagrid.

Following is the sample code of the application.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="init()">

<mx:HTTPService id="service"
showBusyCursor="true"
url="http://shailesh.ihemant.com/employee.xml"
resultFormat="object"
result="serviceResultHandler(event)"
fault="serviceFaultHandler(event)"/>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;

[Bindable]
private var employeeCollection:ArrayCollection;
private function init():void
{
employeeCollection = new ArrayCollection();
}

private function serviceResultHandler(event:ResultEvent):void
{
employeeCollection = event.result.Employee_Info.Employee as ArrayCollection;
}

private function serviceFaultHandler(event:FaultEvent):void
{
Alert.show(event.toString());
}

private function getEmployeeHandler():void
{
service.send();
}
]]>
</mx:Script>

<mx:Button id="getEmployee"
label="Get Employee"
click="getEmployeeHandler();"/>

<mx:DataGrid id="grid"
width="80%"
dataProvider="{employeeCollection}">
<mx:columns>
<mx:DataGridColumn dataField="Name" headerText="Name"/>
<mx:DataGridColumn dataField="Designation" headerText="Designation"/>
<mx:DataGridColumn dataField="Email" headerText="Email"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Look at the demo application.

0 comments:

Post a Comment