Comunicare con un lettore di carte di credito tramite RS-232 con Google Chrome

Uno dei vantaggi dei lettori di schede ID TECH è la straordinaria semplicità con cui è possibile comunicare con loro. Sapevate, ad esempio, che è possibile interfacciarsi con la maggior parte dei nostri dispositivi di pagamento direttamente dal browser Google Chrome? Vediamo come farlo, perché la possibilità di comunicare con dispositivi seriali e/o USB utilizzando soltanto JavaScript e HTML è di grande utilità pratica.

In questo articolo mi concentrerò sulla versione RS-232 del lettore di schede SecuRED di ID TECH, conforme allo standard SRED Lettore di schede SecuRED (illustrato di seguito), un lettore a striscia magnetica (MSR) con cifratura permanente in grado di comunicare tramite USB-HID, USB-KB o RS-232. In articoli futuri approfondiremo la connessione ai lettori ID TECH tramite USB-HID (in Chrome). Per oggi ci concentreremo sull'RS-232, che è leggermente più semplice dell'USB, illustrando al contempo molte delle tecniche che utilizzeremo successivamente per le comunicazioni USB-HID.

Se state pensando "Ma il mio computer non ha nemmeno una porta RS-232," non preoccupatevi. È possibile collegare un dispositivo seriale al computer tramite un cavo adattatore seriale-USB (di Prolific o di un altro produttore). I dati seriali appariranno comunque come dati seriali , anche se transitano attraverso la porta USB.

Il browser Chrome di Google offre la connettività RS-232 tramite la chrome.serial.* API, ma è importante notare che questa API non è disponibile per le normali pagine web. Per utilizzare la API seriale, è necessario implementare una App Chrome e installarla tramite il meccanismo delle estensioni di Chrome (un'operazione tutt'altro che complicata). Vediamo nel dettaglio cosa comporta.

Per creare una Chrome app, è sufficiente inserire una mezza dozzina di file di piccole dimensioni in una cartella. L'app completa e già pronta per l'esempio di oggi (inclusi i 6 file necessari) è disponibile qui:

Serial-Test-Tool.zip

Scarica il file Zip sul tuo disco locale e decomprimilo in una cartella dedicata. Dovrebbe contenere i seguenti file:

Tra poco spiegherò come installare l'app come estensione di Chrome. Per ora, diamo una rapida occhiata ai file che compongono l'app.

Il background.js è un file di testo che contiene il seguente testo:

Questo file indica a Chrome di utilizzare un file chiamato window.html per creare la finestra principale dell'app (con una larghezza di 390 pixel e un'altezza di 438 pixel).

I due file successivi sono semplicemente piccole icone PNG.

Il manifest.json è un file di testo che contiene quanto segue:

Il manifest è un file importante, poiché le app Chrome operano in un ambiente di sicurezza specifico in cui, ad esempio, le autorizzazioni devono essere dichiarate esplicitamente in anticipo. Il manifest comunica a Chrome quali autorizzazioni sono necessarie, quali icone devono essere associate all'app e altre informazioni essenziali.

Il script.js (a cui si fa riferimento da window.html) contiene tutto il codice JavaScript che consente il funzionamento dell'app. È composto dal seguente codice:

Bene. Potrebbe non sembrare un file di piccole dimensioni, ma in realtà stiamo parlando di meno di 200 righe di codice, che (nel contesto generale) rappresentano una quantità davvero trascurabile.

Infine, c'è window.html, ovvero il file contenente il markup HTML dell'app (l'interfaccia utente dell'applicazione). È composto dal seguente markup:

Si noti che non è presente alcun JavaScript inline nella pagina. La totalità della logica dell'app si trova in un file esterno (il file script.js ). Ciò garantisce una netta separazione tra la logica del programma e il markup di presentazione, facilitando notevolmente la manutenzione del codice e il debug.

Piuttosto che analizzare il codice riga per riga (che risulta abbastanza autoesplicativo), vediamo come installarlo ed eseguirlo.

Avvia il browser Chrome, se non lo hai già fatto, e accedi alla pagina chrome://extensions . Nell'angolo in alto a destra, individua e seleziona la casella di controllo Modalità sviluppatore. Vedere di seguito.

Una volta selezionata la casella Modalità sviluppatore, e solo in quel momento, apparirà il pulsante Carica estensioni non pacchettizzate… (sulla sinistra). Fare clic su quel pulsante. Navigare fino alla cartella contenente i 6 file di piccole dimensioni. Designare semplicemente quella come cartella di destinazione e fare clic su OK. Si tornerà alla pagina chrome://extensions e l'app apparirà nell'elenco delle estensioni disponibili. Individuare l'app e fare clic sul link Avvia associato ad essa (osservare attentamente lo screenshot precedente). La finestra principale dell'app apparirà in primo piano:

Questo è l'aspetto della finestra se si dispone già di un lettore di carte SecuRED (o di un altro dispositivo seriale!) collegato alla porta COM3. Si noti che il codice JavaScript in script.js (vedi sopra) è configurato in modo fisso per utilizzare "COM3" come nome della porta. Se il computer utilizza una porta seriale diversa, modificare manualmente il codice inserendo il nome corretto. (È possibile trovare questa informazione in "Dispositivi e stampanti" di Windows. In Linux, la porta seriale potrebbe avere un nome come /dev/tty0 o alla /dev/ttyUSB0 o alla /dev/tty1.) È bene precisare che questa estensione funziona su Windows, Linux, Mac OS X e ChromeOS, a condizione che Chrome sia installato.

Se la connessione al dispositivo seriale è avvenuta correttamente e tale dispositivo è il lettore di schede SecuRED di ID TECH, è possibile strisciare una carta di credito nell'apposita fessura. I dati della carta compariranno automaticamente nell'area di testo superiore della finestra dell'applicazione (si notino i valori esadecimali nello screenshot seguente):

Naturalmente, per interpretare questi dati è necessario conoscere il formato Enhanced Encrypted MSR di ID TECH. (Analogamente, decifrarei dati richiede la comprensione di DUKPT, della derivazione delle chiavi, di AES e/o di TDES.) Approfondiremo questo argomento in un articolo futuro. Per ora, è sufficiente sottolineare che il Serial Test Utility consente di acquisire i dati della carta di credito in modo immediato e automatico da Google Chrome, su qualsiasi piattaforma in cui Chrome è disponibile. È inoltre possibile sfruttare i potenti strumenti di debug integrati di Chrome per eseguire il debug del codice, che è semplicemente JavaScript.

Esaminando il codice passo dopo passo, si noterà (nella parte finale del codice) che per ricevere i dati seriali viene passata una funzione di callback di ricezione a chrome.serial.onReceive.addListener(). La funzione receive(), a sua volta, richiama una funzione collect() che accumula i byte ricevuti in un buffer. Il buffer viene scritto (come testo) nell'interfaccia dell'applicazione dopo un WAIT_TIME di 500 millisecondi. In pratica, quando i dati provenienti dal lettore di schede arrivano all'applicazione, viene avviato un timer e i dati (che giungono in piccoli blocchi a distanza di pochi millisecondi l'uno dall'altro) vengono accumulati in un buffer; allo scadere del timer (dopo 500 ms), il buffer viene svuotato e i dati visualizzati sullo schermo (e il processo di buffering ricomincia se i dati sono ancora in arrivo). Questo approccio consente di raggruppare una quantità ragionevole di dati prima di mostrarli a schermo (altrimenti si rischierebbe di scrivere numerosi pacchetti molto brevi sullo schermo a intervalli di pochi millisecondi).

Le uniche altre parti dell'applicazione che potrebbero non essere immediatamente intuitive sono la piccola "finestra dei comandi" appena sopra i pulsanti Send e Clear (vedi screenshot sopra) e il menu a tendina ("Select a command and hit Send"). L'area di testo sopra il pulsante Send è uno spazio in cui è possibile inserire manualmente specifici comandi firmware che il dispositivo di destinazione (in questo caso il SecuRED di ID TECH) è in grado di interpretare. Il menu a tendina contiene alcuni comandi precaricati (come 02 53 11 01 33 03 71, che fa emettere un segnale acustico al SecuRED) già pronti all'uso. Se si conoscono altri comandi esadecimali (ad esempio perché si dispone della documentazione del dispositivo), è possibile inserire comandi per controllare o configurare il dispositivo.

Anche se non si utilizza il controllo del menu a tendina specifico per SecuRED, il Serial Test Utility è uno strumento pratico per monitorare qualsiasi connessione seriale dal proprio browser Chrome. Visualizza tutti i dati che transitano sulla porta seriale, indipendentemente dal fatto che provengano da un lettore di carte ID TECH o meno.

Speriamo che questo progetto vi sia stato utile. In un prossimo articolo vedremo come comunicare con un dispositivo USB-HID utilizzando le API di connettività di Chrome. Vale assolutamente la pena sapere come si fa!