Christian Heilmann

Pin entry fields, keylogging, security and a DOM solution

Wednesday, November 23rd, 2005 at 8:56 pm

I looked over the wireframes of a new project today and discovered a weird one for the use case of entering a PIN number: The client defined a keypad like you would see on a cash machine, and requested that the user should enter the PIN thus – via the mouse.

The accessibility militia member in me started to frown upon this, considering that a password field is a lot easier to use and wondered if that is a marketing
gimmick.

However, upon reading further into the requirements, I realised that it is a security measure to prevent keylogging software to store the pins users enter in the application.

However, I don’t think that there is a truly accessible solution for that problem, as you will need JavaScript to change a field’s value when clicking other buttons – unless you want to reload on every button click.

I came up with a DOMscripting solution for the problem, check the test page for DOMpinpad here and wondered if there are more options to improve this.

Currently the pad

  • only applies itself when DOM is supported and JavaScript is available
  • renders the PIN field readonly and greyed out only when the pad can be used
  • can be used with a keyboard and tabbing and with the mouse (is there a safety hazard in the tabbing ability? Wouldn’t that be trackable, too?)
  • is self contained, as in plays well with other scripts
  • is styleable via CSS

I tested it on MSIE 6,Firefox and Opera on PC and Safari on Mac, please report any problems you may encounter.

If this one is considered a worthy solution, I will wrap it up and release the code at a later stage.

Share on Mastodon (needs instance)

Share on BlueSky

Newsletter

Check out the Dev Digest Newsletter I write every week for WeAreDevelopers. Latest issues:

160: Graphs and RAGs explained and VS Code extension hacks Graphs and RAG explained, how AI is reshaping UI and work, how to efficiently use Cursor, VS Code extensions security issues.
159: AI pipelines, 10x faster TypeScript, How to interview How to use LLMs to help you write code and how much electricity does that use? Is your API secure? 10x faster TypeScript thanks to Go!
158: 🕹️ Super Mario AI 🔑 API keys in LLMs 🤙🏾 Vibe Coding Why is AI playing Super Mario? How is hallucinating the least of our worries and what are rules for developing Safety Critical Code?
157: CUDA in Python, Gemini Code Assist and back-dooring LLMs We met with a CUDA expert from NVIDIA about the future of hardware, we look at how AI fails and how to play pong on 140 browser tabs.
156: Enterprise dead, all about Bluesky and React moves on! Learn about Bluesky as a platform, how to build a React App and how to speed up SQL. And play an impossible game in the browser.

My other work: