Flex: Security error accessing url

[RPC Fault faultString=”Security error accessing url” faultCode=”Channel.Security.Error” faultDetail=”Destination: DefaultHTTP”]

As you already know flex applications have a strict security policy. You can look at this site for more information.

Flash player normally does not let your application to access to some resources (assets, web services etc) in another domain. Your domain is where you publish your flash/flex application. This sandbox also prohibits your web application from accessing local files/resources of the client. While there is no way to bypass the second one -imho-, you can enable your application to access resources in another domain.

You can do this using crossdomain.xml file. That file should be at the root of your application. You can configure which domains your application can or can’t access. Also you can configure this by actionscript.

Typical crossdomain.xml file looks like this:

<?xml version=”1.0″?>
<!DOCTYPE cross-domain-policy SYSTEM “http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd”&gt;
<cross-domain-policy>
<allow-access-from domain=”*” />
<allow-http-request-headers-from domain=”*” headers=”*”/>
</cross-domain-policy>

First entry lets your application to be reached from all domains. Sometimes you don’t want this for security reasons. You can replace * with *.yourdomain.com or http://www.yourdomain.com or else.

The second one, as the name implies, lets your application to accept request headers from any domain. While I’m using RESTful services of another domain, I need the second one. But as I said before, using * wildcard is not a good idea. Restrict these options as much as you can.

Also you can do this using Actionscript. You can call that method at initialization step of your application and you are good to go:

// (Loader) Application initialization
public function initApp():void
{
Security.allowDomain( “*” );

}

Have a good day…

Advertisements

Flex – Java Real Time Chart With BlazeDS

In my previous post I’ve explained how to create a line chart populated with real time data.

In this post I’ve moved real time data generating to Java project and push that data to client using BlazeDS. The rest is same as the previous flex project.

I’ll simply put sources here so you can take a look at it. You need to modify build.xml in java project according to your system. Also right click on your flex project in your Flash Builder  and select properties. Flex Compiler->Additional Compiler Arguments then modify path. You will be able to deploy the java project war file to tomcat and run your flex project from Flash Builder.

You will see the live data in line chart generated and pushed from the server.

There are 2 projects(RealTimeDataServer, RealTimeLineChart) one for server-side with BlazeDS and the other for client with Flex:

GitHub

Real Time Flex Line Chart

Hi,

That example may seems a bit silly but I saw that there is a lack of similar solutions. I’ve not used any third party library. You can find them on Internet.

In fact that project does not do anything other than populating data provider of a line chart in a fixed time interval basis. But in the next post I will integrate that one with BlazeDS and over channels you can send your real time data to your clients and populate line chart according to these data. Let the coding begin:

First we have 2 timers: 1 for populating data and the other for updating chart. We have a bindable data provider for chart. We change that array collection until update chart timer fires. So that we can optimize the speed of the update.

The code is like that:

 <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx"
 minWidth="955" minHeight="600"
 creationComplete="application1_creationCompleteHandler(event)"
 initialize="application1_initializeHandler(event)">
 <fx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 import mx.events.FlexEvent;

 private static const ARRAY_SIZE:int = 500;
 private static const DATA_INTERVAL:int = 8;
 private static const UPDATE_INTERVAL:int = 80;

 private var dummyGeneratorTimer:Timer;
 private var dummyUpdateTimer:Timer;
 [Bindable]
 private var chartData:ArrayCollection = new ArrayCollection;
 private var chartIndex:int = 0;

 protected function application1_initializeHandler(event:FlexEvent):void
 {
 dummyGeneratorTimer = new Timer(DATA_INTERVAL); // 8 millisecond
 dummyGeneratorTimer.addEventListener(TimerEvent.TIMER, populateData);

 dummyUpdateTimer = new Timer(UPDATE_INTERVAL); // 80 millisecond
 dummyUpdateTimer.addEventListener(TimerEvent.TIMER, populateChart);
 var dummyArray:Array = new Array();
 for(var i:int=0; i<ARRAY_SIZE; i++)
 {
 dummyArray[i]=128;
 }
 chartData = new ArrayCollection(dummyArray);
 }

 protected function application1_creationCompleteHandler(event:FlexEvent):void
 {
 dummyGeneratorTimer.start();
 dummyUpdateTimer.start();
 }

 private function populateData(event:TimerEvent):void
 {
 var randomNumber:int = Math.random()*256;
 //Does not trigger chart update
 chartData.source[chartIndex] = randomNumber;
 chartIndex++;
 chartIndex%=ARRAY_SIZE;
 }

 private function populateChart(event:TimerEvent):void
 {
 //Trigger update
 chartData.setItemAt(chartData.getItemAt(0), 0);
 }
 ]]>
 </fx:Script>
 <fx:Declarations>
 <!-- Define custom Strokes. -->
 <mx:SolidColorStroke id="s3" color="0x33F400" weight="1"/>
 </fx:Declarations>

 <mx:CartesianChart id="linechart" width="100%" height="100%" cacheAsBitmap="true"
 cachePolicy="on" paddingLeft="5" paddingRight="5">
 <mx:verticalAxis>
 <mx:LinearAxis id="vAxis" alignLabelsToInterval="true" autoAdjust="false"
 baseAtZero="false" interval="16" maximum="256" minimum="0" padding="1"/>
 </mx:verticalAxis>
 <mx:verticalAxisRenderers>
 <mx:AxisRenderer axis="{vAxis}" canDropLabels="true" color="0xF8F8F6" fontSize="8"/>
 </mx:verticalAxisRenderers>
 <mx:horizontalAxis>
 <mx:LinearAxis id="hAxis" alignLabelsToInterval="true" autoAdjust="false"
 baseAtZero="false" interval="25"/>
 </mx:horizontalAxis>
 <mx:horizontalAxisRenderers>
 <mx:AxisRenderer axis="{hAxis}" canDropLabels="true" color="0xF8F8F6" fontSize="8"/>
 </mx:horizontalAxisRenderers>
 <mx:fill>
 <mx:SolidColor color="0x231F20"/>
 </mx:fill>
 <mx:backgroundElements>
 <mx:GridLines cacheAsBitmap="true" cachePolicy="on" gridDirection="horizontal">
 <mx:horizontalStroke>
 <s:SolidColorStroke alpha="0.2" color="0xD4D4D3" weight="0"/>
 </mx:horizontalStroke>
 </mx:GridLines>
 </mx:backgroundElements>
 <mx:series>
 <mx:LineSeries id="recordGraph" cacheAsBitmap="true" cachePolicy="on"
 dataProvider="{chartData}" form="segment" lineStroke="{s3}"
 sortOnXField="false"/>
 </mx:series>
 </mx:CartesianChart>
</s:Application>

In next post I will move generating random values to a Java project and connect these 2 projects via BlazeDs.

If you’ve better solutions please comment.