ODIN Blog

I was invited to speak to a group of developers at the China Bank of Communications. It was an opportunity to get to know how the IT side of the banking sector works, and to ask them “Why ActiveX”?

First, some background — most if not all Chinese banks use ActiveX for their customer banking, so without ActiveX you can’t do online banking in China. Similar issues are happening in South Korea and perhaps other places too. The ActiveX plugin is used to prevent the stealing of passwords by keylogger trojans.

After presenting, the discussion dived right into questions and answers; it was very stimulating and I learned a lot about the perspective of developers working with banks. During the discussion, the thousand dollar question was “If not ActiveX, then what?” I suggested three possible solutions:

• First, if your bank insists on using plugins, then use the NPAPI plugin interface. NPAPI is arguably more secure than ActiveX because it is solely an Internet plugin, while ActiveX can also tinker with your operating system (for example components in Office applications). Opera, Safari and Firefox all support the NPAPI plugin.
• If ActiveX is used only to prevent keyloggers, then another solution might be to only allow users to type their login credentials using a virtual keyboard. This could however be a bane for accessibility.
• The third option is to drop plugins altogether and use a one-time password generator. This crossed my mind with banks in Norway which I am provided with a calculator (I use Nordea Bank). A one-time password calculator will not have the spillover security concerns of ActiveX.

Options above are used to prevent password-snatching while a user is typing in the login credentials - before he or she clicks on the login button which sends the login credentials through a HTTPS secure channel.

On the HTTPS side of things, using Extended Validation (EV) certificates will give bank users better assurance since EV certificates goes through a much more rigorous process before it is given out. Browsers with EV support display more information for EV certificates than for previous SSL certificates. IE8, Firefox, Safari, Google Chrome and Opera support Extended Validation.

During the discussion, I realized that many developers are sympathetic towards standards, including those implementing non-standard ActiveX. I used the word sympathetic because many developers I know are idealist and being idealists they want the world to be a better place. The world is a better place without non-standard code, but the reality is that developers earn their living through customers, and therefore maintaining the existing systems that they already use.

There is more than one way to solve the ActiveX dilemma in the banking industry. It’s a legacy issue, for sure, but maybe the real problem is resistance to change?

Note: The PDF version of the presentation can be downloaded here, entitled Web 2.0 and Web Standards.

I was privileged to be invited to come and present at London Web Standards, and honoured that the tickets sold out within 45 minutes of being available. So, no pressure then ...

Assisted by the lovely Henny who advanced my slides and alt-tabbed from slideshow to demo, I sneezed and snuffled my way through a presentation called HTML5 and Friends (PDF, 723K).

The resources that I demoed were

• Canvas Paint
• canvas first-person shooter
• canvas first-person gifter
• the excanvas library to port canvas to Internet Explorer
• Filament Group's jQuerty plugin using canvas for graphing data tables
• Raphaël JavaScript Library to make SVG that also works in Internet Explorer
• SVG Web is a JavaScript library which provides SVG support on Internet Explorer (alpha code: not ready for production)
• My HTML5 forms demo, including range, date, regex validation
• modernizr - a small HTML5 capability detection library

You can also download Opera 10 which I was using to demo.

Opera Developer Network has some beginner's canvas tutorials available:

1. HTML 5 canvas - the basics
2. Creating an HTML 5 canvas painting application
3. Creating pseudo 3D games with HTML 5 canvas and raycasting
4. Creating pseudo 3D games with HTML 5 canvas and raycasting: Part 2

For the second half of the talk, I built an HTML5 page through the magic of live coding (with lavish prizes!).

Consequently there are no slides to publish, but I have an article called Designing a blog with HTML that covers the same ground. (Two articles on my personal blog cover it in much more detail: Redesigning with HTML 5 and WAI-ARIA and Marking up a blog with HTML 5 (part 2).)

The shocking looseness of HTML5's validation rules is discussed in an article I wrote called HTML 5 + XML = XHTML 5. The main take-home should be that, although you can mix quoted or unquoted attributes, upper and lower case freely (even in the same page), you shouldn't: if you do, you'll make your code an unreadable and therefore unmaintainable mess. Choose one coding convention that works for you and stick to it.

Some other useful resources:

• HTML5 validator
• HTML5 outliner
• the author's version of the HTML5 specification (much shorter than the main version and generated from the same source, but without all the parsing rules and algorithms for browser manufacturers and other implementors)
• HTML5 Doctor (I'm a co-curator of this site)
• SVG vs. Canvas on Trivial Drawing Application: a comparison of canvas and SVG

Thanks to all who attended and asked great questions. I'm sorry that I had to charge off before the bar shut (not like me at all!) but my son was sick so I needed to get the last train home.

1. (Desktop): Make a note of your local IP address and fire up Dragonfly.
   
2. (Desktop): Enable remote debug in Settings and click Apply then OK in the pop-up dialog box.
   
3. (Mobile): Open opera:debug, enter your desktop's IP address and click Connect then OK in the pop-up dialog box.
   
4. (Desktop): Click OK in the pop-up dialog box to download the new version of Dragonfly, then click OK.
   
5. (Mobile): Click Connect again in opera:debug, then click OK in the pop-up dialog box.
   
6. (Mobile): Open the web page you want to debug, ideally in a new tab.
   
7. (Desktop): Select the site to debug in Dragonfly and edit the HTML and CSS to your heart's content.