When I say simple, I mean one line of code:

location.href = location.href.replace(/^http:/, 'https:');

This script ensures your Gmail session using Firefox takes place over a secure HTTP connection providing a reasonable amount of protection from eavesdropping and other shenanigans. Add other domains for which both a http and https URI exist and Firefox will always use https. For example, I added:

http://www.google.com/calendar/*

http://docs.google.com/


http://docs.google.com/*

Now all Google Calendar and Google Docs & Spreadsheets sessions are secure. But don’t stop there, any domain will work… not just the Google properties.

Download links: Greasemonkey (install this first), GMailSecure

I modified the form to create a unique filename using values from certain form elements. Since these values can, and often do, use characters that are invalid as part of a filename, I needed a way to “sanitize” the name during the submission process. I wrote the following VBScript code to replace these characters before attempting to save the file.

 
   Function SanitizeFilename(byVal strFilename, byVal strReplChar)	
      
      Set objRegExp = New RegExp ' Create new RegExp object
      
      ' Define regex pattern and set Global replacement property
      objRegExp.Pattern = "[\x00-\x1f\x22\\/:\*\?<>\|]"
      objRegExp.Global = True
      
      ' Check strReplChar parameter for invalid length or character,
      ' default to underscore
      If Len(strReplChar) = 1 Then 
         strReplChar = objRegExp.Replace(strReplChar, "_")
      Else 
         strReplChar = "_"
      End If
      
      ' Return clean filename
      SanitizeFilename = objRegExp.Replace(strFilename, strReplChar)
      
      Set objRegExp = Nothing
   End Function
 
 

This function accepts two arguments, strFilename which receives the string created from the form values, and strReplChar which receives the character used for replacement. The function uses a regular expression pattern to match the invalid characters (control characters through 31, double-quotes, and a handful of others). There is a check to make sure that the strReplChar argument is valid, but not much else. The RegExp Object member Replace does the heavy lifting, before the function returns the modified string.

The regex pattern replaces invalid characters for Windows NTFS (generally), but could easily be altered for other OS file systems. You could also use a more restrictive regular expression like:

      [^\w\x20\&%'`\-\@{}~!#\(\)&_\^\+,\.=\[\]]

Then again, that may be a bit much. Wikipedia has a good filename reference that includes a fairly comprehensive list of reserved words and allowable character sets. As always, if you need a good regex reference, try Regular-Expressions.info.

UPDATE: The logic in my if/then statement to check the length and validity of the strReplChar was backwards. The example has been corrected.

When it comes to having greater scalability in a web page, especially in AJAX scenarios, innerHTML offers unmatched flexibility. There has also been benchmark tests verifying that innerHTML is more efficient compared to using DOM methods.

The benchmarks test referred to are here, and show a dramatic speed advantage when choosing innerHTML over DOM methods.

The fact that it is not in a standard is simply because nobody got around to it. If you read the mailing list of the W3C Web API’s Working Group you can see that Opera, Mozilla and Apple want it to be standardized and we bet Microsoft would like the same thing.

As snook pointed out, the XMLHttpRequest object isn’t standard (yet) either. Funny, no one complains about that.

Recognizing that there are some instances where using DOM methods may be more elegant, in many cases, I choose to use innerHTML to update content. It just seems natural, especially when the content is repeatedly generated using the same server-side code.

Validating and sanitizing user input is no longer optional. Consider what your users really need to do, think about what characters they need to accomplish those tasks, and strip/convert as necessary to protect your community.

Part 1 provides examples of XSS attacks, and a checklist for validating input. An upcoming Part 2 promises to deliver techniques for closing these vulnerabilities and preventing attacks on your sites and communities.

The excitement generated by the popularity of Ajax technologies and all the flashy new Web 2.0 applications, along with a wealth of published tutorials and “howtos”, must entice many to dive head first into web development. My guess is, many do this with little or no thought to the implications these technologies might have on security. I am happy to see XSS addressed, even if in such a simple manner, and hope to see more of these types of tutorials.

The basic idea being that busy web designers don’t always have time to read or write lengthy tutorials but that a daily “bite” of useful information, taken or given, could be good for the soul.

Sounds promising. Hat tip to snook for the link.

The Apple Developer Network is a great source of information including a nice, easy-to-follow introduction to The XMLHttpRequest Object. This brief tutorial includes a description of object methods and properties, simple examples of instantiation, and a fully functional example. Other good ADC articles include: Remote Scripting with IFRAME, Dynamic Content with DOM-2 Part I and Part II, and Object Detection.

Jim Ley’s article Using the XML HTTP Request Object shows you how to create an XHR object using conditional compilation that degrades nicely to support all browsers. Examples include using XHR to make a HEAD request, or to check if a URL exists.

Easy Ajax with Prototype-1 is a ridiculously simple example from 24 ways-2 and a great introduction to using prototype.js, the big-daddy of JavaScript libraries (read on for more information).

Getting Started with Ajax shows you how to make an Ajax request, then use the responseText property and DOM innerHTML property to update the page. Later, a slight modification to the example uses responseXML, and DOM manipulation to perform the same update. This article makes use of the XHConn library, a “simple XMLHTTP interface”.

There is a great post over on the QuirksBlog describing the pros and cons of XML, HTML, and JSON responses, (part II here). As you begin to develop web applications that use XHR, the response format/language you choose deserves some consideration. My projects thus far have all been simple enough to use the XHR responseText and DOM innerHTML property.

Paven Keely’s Reusing XMLHttpRequest Object in IE is a great read, as is Alex Bosworth’s Ajax Mistakes. For the authoritative (albeit dry) reference on the XHR object, see Microsoft’s IXMLHTTPRequest Members.

JavaScript Libraries

At some point you may want to consider the many JavaScript libraries available designed to make development easier (especially XHR calls) and/or provide some amazing effects.

prototype.js is a widely used library popularized by it’s use in 37 Signals many web-based offerings. The Ajax.Request and Ajax.Updater classes are fantastic! This library packs a powerful punch and is the basis for the Script.aculo.us and Rico effects libraries. If prototype is too much, try Moo.fx, a lightweight effects library based on “prototype-lite”. Lots of fun!

Other libraries worth considering include Dojo, MochiKit, Zimbra, and Yahoo! User Interface Library. In addition to XHR classes/objects each of these include other classes designed to streamline development. For libraries primarily focused on encapsulating the XHR object try the XHConn library, AHAH, or ASK.

Other Great Resources

Round-up of 30 AJAX Tutorials
XMLHttpRequest & Ajax Based Applications
Ajax Patterns
Ajax Matters
Ajaxian Blog

I hope this helps some of you get started. The Ajax buzz seems to have breathed new life into the web, and has certainly made it fun to develop.

Leave a comment if you have other good links!

A couple of other favorites: The XMLHttpRequest Object, Guide to Using AJAX and XMLHttpRequest, and Getting Started with Ajax.