December 28 2006 by
Andrew Powell
I was playing around with one of my examples earlier today and figured out that there is a bit of a hole in javascript, not so unknown, that can be used to manipulate Spry datasets.
I was looking at
this example. When the page loaded, i put this into the address bar:
javascript:dsPlayers.sort("name", "toggle");
This triggered, as expected, the sort method on the dataset. Other dataset functionality, such as loadData() can be called this way as well. This has the potential to be an exploit on any type of AJAX application, not just Spry. Spry is shown here because of the easily accessed methods in the dataset object, but any AJAX application is potentially vulnerable.
There is no clean way around this little niggling issue because it's a fundamental piece of the browser and javascript.
Posted in General | Spry | AJAX | 
2 comments
December 27 2006 by
Andrew Powell
A preliminary list of topics for CFUnited 2007 has been posted.
View The List
I am reprising my Spry/ColdFusion presentation for CFUnited. If, for some reason, you cannot make the
Frameworks Conference (use code FR0788014 for a discount), I will be presenting this topic at CFUnited as well, albeit with some new material given the gap in time between the conferences.
Posted in ColdFusion | General | Conferences | Spry | Speaking | AJAX | 0 comments
December 22 2006 by
Andrew Powell
Based on some of
Ray's suggestions, I've re-tooled the Click-2-Call-U sample. We're no longer returning datasets, but just the raw data returned from Vonage. And like Peter over at
ColdFusion Weekly asked, no I'm not logging userame/password pairs. To that point, the Coldfusion code is here too, in the interest of full disclosure:
Client-side HTML:
<!DOCTYPE html PUBLIC " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Spry Example 6 - Vonage/CF/Spry Integration</title>
<script type="text/javascript" src="/assets/js/spry/SpryData.js"></script>
<script type="text/javascript">
function makeVonageCall(phoneForm)
{
var numberToCall = phoneForm.phoneNumber.value;
var userName = phoneForm.userName.value;
var password = phoneForm.password.value;
var srcNum = phoneForm.userNumber.value;
var srcURL = "makeCall.cfm?numberToCall=" + escape(numberToCall) + "\&myVonageUserName=" + escape(userName) + "\&myVonagePassword=" + escape(password) + "\&myPhoneNumber=" + escape(srcNum);
Spry.Utils.loadURL("GET",srcURL, true, callHandler);
}
function callHandler(request)
{
var statusCode = "Vonage Status: " + request.xhRequest.responseText;
hideLoader();
alert(statusCode);
}
function showLoader()
{
Spry.Utils.setInnerHTML('callStatus', '<img src="/assets/images/ajax-loader.gif"/>');
}
function hideLoader()
{
Spry.Utils.setInnerHTML('callStatus', '<br/>');
}
</script>
<style>
body
{
font-family:"Microsoft Sans Serif", Arial, Helvetica, sans-serif;
font-size: 11px;
}
.heading
{
font-weight: bold;
}
.description
{
width: 600px;
}
.capMe
{
text-decoration: capitalize;
}
.SpryHiddenRegion
{
visibility: hidden;
}
</style>
</head>
<body>
<p>Use this form to request a callback. The mechanism uses <a href="http://www.vonage.com" target="_blank">Vonage's</a> click-to-call
mechanism to initiate a call between the number supplied and a pre-defined Vonage user.</p>
<form id="phoneForm" name="phoneForm">
Number To Call (US Phone Numbers Only): <input type="text" id="phoneNumber" name="phoneNumber" /><br/>
Vonage User Name: <input type="text" id="userName" name="userName" /><br/>
Vonage Password: <input type="password" id="password" name="password" /><br/>
Your Vonage Phone Number (format: 14045551212): <input type="text" id="userNumber" name="userNumber" /><br/>
<input type="button" id="phoneButton" value="Start Callback" name="phoneButton" onclick="showLoader();makeVonageCall(phoneForm);"/>
</form>
<div id="callStatus">
</div>
</body>
</html>
Server-side CFML:
<cfif isDefined("URL.numberToCall") and URL.numberToCall NEQ "">
<cfset myVonageUserName = URL.myVonageUserName/>
<cfset myVonagePassword = URL.myVonagePassword/>
<cfset myPhoneNumber = URL.myPhoneNumber/>
<cfset numberToCall = URL.numberToCall />
<cfif isValid("telephone",numberToCall)>
<cfset vonageURL = "https://secure.click2callu.com/tpcc/makecall?username=#myVonageUserName#&password=#myVonagePassword#&fromnumber=#myPhoneNumber#&tonumber=#numberToCall#"/>
<!--- Initiate the click-to-call request via CFHTTP --->
<cfhttp url="#vonageURL#" result="callResult">
<cfif mid(callResult.fileContent,1,4) NEQ "000:">
<cfoutput>#callResult.fileContent#</cfoutput>
<cfelse>
<cfoutput>#mid(callResult.fileContent,5,len(callResult.fileContent))#</cfoutput>
</cfif>
</cfif>
</cfif>
I like to try to provide working samples of my work, so here is the sample of this functionality:
Spry-Vonage Sample
Posted in ColdFusion | Spry | AJAX | Vonage | 0 comments
December 19 2006 by
Andrew Powell
I have this nice shiny new MacBook Pro (MBP) that I use for work on the road and presentations. I also bought what I feel is, hands down, the best presentation platform out there:
Keynote. I was searching for a presentation remote and didn't see any that I really liked.
Then it hit me. My MBP came with a remote for the
Front Row application. Maybe it would work with Keynote too. So I gave it a try on a wing and a prayer...lo and behold, it works.
You can use your Apple Remote to control your Keynote presentations when playing your presentation. Nifty.
Posted in Apple | Speaking | 1 comments
December 19 2006 by
Andrew Powell
I had a complex problem come up in a Spry implementation I was working on. I needed more out of spry:if than simple a == b logic. I was needing to do more extensive evaluation with the spry:if tag. Previously I had only used comparison statements within the spry:if to control the flow of the display. I decided to take it a bit further to see if I could actually make a function call within the spry:if 's content.
Turns out, that Spry simply does an eval() call on the contents of that attribute. As long as it evals to a boolean value, you're good to go. This opens up a whole new world to data validation.
What does this mean? It means that we can use logic such as RegEx to determine if a value will be displayed or not when looping over an XML dataset. The following example uses simple email validation to check an address and, if valid, displays the email address. If the address does not validate, a warning message is displayed in the address's place.
This will allow for more granular control over what is displayed. This can be especially useful with dynamic XML datasources. If you cannot validate, with confidence, the integrity of the data that is coming back, this funcitonality allows you to perform view-level validation of your data.
View The Sample
Here is the sample code:
<!DOCTYPE html PUBLIC " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Spry Example 1 - Static Data</title>
<script type="text/javascript" src="/assets/js/spry/xpath.js"></script>
<script type="text/javascript" src="/assets/js/spry/SpryData.js"></script>
<script type="text/javascript">
var dsPeople = new Spry.Data.XMLDataSet("phonebook.xml", "people/user");
var reEmail = /^.+\@.+\..+$/;
function isEmail (s)
{
return reEmail.test(s)
}
</script>
</head>
<body>
<div spry:region="dsPeople">
<div spry:state="loading"><img src="/assets/images/ajax-loader.gif"/></div>
<div spry:state="error">An error occured loading your dataset.</div>
<div spry:state="ready">
<table width="50%">
<tr>
<th><a href="javascript:dsPeople.sort('name','toggle');">Band Member</a></th>
<th><a href="javascript:dsPeople.sort('email','toggle');">E-Mail Address</a></th>
</tr>
<tr spry:repeat="dsPeople">
<td spry:content="{dsPeople::name}"></td>
<td spry:if="isEmail('{dsPeople::email}')" spry:content="{dsPeople::email}"></td>
<td spry:if="!isEmail('{dsPeople::email}')" spry:content="Invalid Email Address"></td>
</tr>
</table>
</div>
</div>
<p><a href="phonebook.xml" target="_blank">View Source XML</a></p>
</body>
</html>
P.S. A big thanks to Kin Blas at Adobe for pointing out how the spry:if works.
Posted in Spry | Adobe | AJAX | 1 comments