Twitter: raymondcamden


Address: Lafayette, LA, USA

Quick FYI: XHR, Cross Domain Requests, and Sessions

06-05-2014 2,634 views Mobile, JavaScript 4 Comments

I discovered something new last night, which was painful like all good learning tends to be. I'm building a Cordova application for a client that - like most hybrid apps - can be run via a local web server for most of the development process. This particular project involves a complex dynamic form process that isn't Cordova-related at all. Later on we'll be adding in barcode scanning but for the foreseeable future I'm running it as a simple web page.

My application makes multiple XHR requests to the client's server for various things, and in order to make that work I'm using CORS. I won't need CORS once I switch to a proper hybrid app. I could also use Ripple too. But again - I just don't need this now at this point in the development.

Everything was kosher until I began to lock down some of the calls to require a session variable. In all my Cordova apps before I relied on the fact that sessions (cookie-based sessions) "just work" when doing XHR. If your back end server responds with cookies, then your front end code will respect that and send them back on future requests. This enables session management to work on your server.

Except when I used CORS! I couldn't understand why I kept getting an error saying that an earlier session variable wasn't defined. Like any good developer, I opened up my dev tools and examined the cookies being sent back and forth in my calls. (And again, if you have no idea how that is done, speak up in the comments.) I noticed right away that the session cookies were not sticking. So what was the problem?

If you read the docs for XHR and CORS you discover this little gem:

The most interesting capability exposed by both XMLHttpRequest and Access Control is the ability to make "credentialed" requests that are cognizant of HTTP Cookies and HTTP Authentication information. By default, in cross-site XMLHttpRequest invocations, browsers will not send credentials. A specific flag has to be set on the XMLHttpRequest object when it is invoked.

In English, the cookies won't go back and forth. Raise your hand if you knew that. Now lower it you liar. ;) Luckily it is easy enough to fix with a flag in the XHR object. AngularJS exposes it as a property, withCredentials.

But you then may run into yet another issue. My CORS header on the server was using Access-Control-Allow-Origin with a value of *. Basically, anyone and everyone can hit me. When you enable credentials on XHR, this is no longer allowed. Basically the browser is saying, "Sorry, this server is just too promiscuous for me." So for now, I've simply specified my local dev server in the origin. Once I get further down the line I'll probably remove CORS completely as it won't be needed for Cordova.

ngCordova Released

06-04-2014 5,337 views Mobile, JavaScript, HTML5 9 Comments

So I know (think?) there is a significant portion of my audience who do not use Twitter, and for those of you who have avoided that trap (don't let anyone fool you, it is a trap), you may have missed me recently raving about the Ionic Framework. Briefly, Ionic is a way to work with Cordova/PhoneGap apps using Angular directives. It has an incredible collection of UI and UX controls that can be helpful to you. I'm still new to Angular and I've found their controls easy to use. I plan on blogging about this a bit more later, but I wanted to tell you about something else these folks created - ngCordova.

Related selects with multiple options

05-30-2014 2,991 views JavaScript, ColdFusion 7 Comments

A reader asked me a simple Ajax-y type question this morning and I thought I'd turn it into a simple blog post. We've all done, or at least seen, related selects before. That widget where you select something in one drop down and it drives the data in the second drop down. What he was asking is how you would support being able to select multiple items in the first drop down. Here is an example of that. Before I go on, let me say that while the back end of this is built in ColdFusion, it absolutely does not matter what back end you use. Oh, and please do not ask me to build you a PHP version! ;)

Cordova 3.5 and the "What's Next" Guide

05-27-2014 6,624 views Mobile, JavaScript, HTML5 20 Comments

Over the holiday weekend Cordova 3.5.0 was released. You can read details about the update here: Apache Cordova 3.5.0. Another update was to the documentation, which now includes a What's Next guide that talks about what Cordova developers should learn, think about, and bookmark for future reference after they've learned the basics. I think this is an important piece of documentation and I'm happy to see it finally published. (Oh, and I may be a bit biased as I wrote the first draft. ;)

Also released is a new Security Guide for Cordova developers. Definitely check this out as well.

PhoneGap Tip: Temporarily changing orientation for video in a portrait only application

05-24-2014 7,257 views Mobile, jQuery, JavaScript 7 Comments

That's probably the longest title I ever used for a blog post. A PhoneGap user came to me recently with an interesting problem. His application was set to be portrait only. In case you weren't aware, you can lock orientation for an application using this config.xml value:

Article: Working with Intl

05-13-2014 2,505 views JavaScript 1 Comment

Just a quick note that NetTuts has published an article I wrote on working with the Intl class. Enjoy. Working with Intl. Please leave comments about the article there. Please post pictures of kittens in the comments below.

ColdFusion 11's new Struct format for JSON (and how to use it in ColdFusion 10)

05-08-2014 3,272 views JavaScript, ColdFusion 14 Comments

One of the nicer new features in ColdFusion 11 is a new way to serialize queries to JSON. If you've ever returned a query over the wire to JavaScript, then you are probably aware that ColdFusion has a ... unique way of serializing the query. The default serialization for queries is based on returning data in a lightweight, efficient format over the network. It isn't difficult to deal with - but it can be awkward if you aren't expecting it. We can argue (and I just did with a fellow ColdFusion community member ;) about whether that choice was wise or not, but instead, I'd rather talk about how ColdFusion 11 addresses this, and how you can mimic the same behavior in earlier versions of ColdFusion.

Mimicking the GMail Delayed Message Load UX

05-07-2014 3,657 views jQuery, JavaScript, HTML5 1 Comment

Before I begin, I want to point out that the title of this blog is far more complex-sounding than what I'm actually going to demonstrate here. GMail has an interesting way to handle large mail threads. When you view it, only the most recent few emails will be visible. The rest will be collapsed and are loaded as you click them.

Example of Async Linting support in Brackets Sprint 38

04-15-2014 2,785 views Development, JavaScript Comments

One of the more cooler updates to Brackets recently was the linting API. This came out back in October and I wrote up a review of the API for the Brackets blog. It basically took 90% of the boiler plate code for linters and made it a heck of a lot simpler.

Multi-File Uploads and Multiple Selects (Part 2)

04-14-2014 4,734 views JavaScript, HTML5 30 Comments

A while back I wrote a simple example of using JavaScript to add file previews for a multi-file upload HTML control. You can find that entry here: Adding a file display list to a multi-file upload HTML control. I followed it up with another example (Multi-File Uploads and Multiple Selects) that demonstrated adding support for multiple selections. This weekend a reader asked for a way to remove files from the list before uploading. Here is an example of that.