Post tecnico
Comunicare con un lettore di carte di credito tramite RS-232 e Google Chrome
Uno dei vantaggi dei lettori di carte ID TECH è la straordinaria semplicità con cui è possibile comunicare con essi. Lo sapevate, ad esempio, che è possibile interfacciarsi con la maggior parte dei nostri dispositivi di pagamento direttamente dal browser Google Chrome? Vediamo come fare, perché la possibilità di comunicare con dispositivi seriali e/o USB utilizzando soltanto JavaScript e HTML è di enorme praticità.
In questo articolo mi concentrerò sulla versione RS-232 del lettore di carte SecuRED conforme a SRED di ID TECH lettore di carte 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, leggermente più semplice dell'USB, illustrando al contempo molte delle tecniche che utilizzeremo in seguito per le comunicazioni USB-HID.
Se state pensando "Ma il mio computer non ha nemmeno una porta RS-232", niente paura. È possibile collegare un dispositivo seriale al computer tramite un cavo adattatore seriale-USB (di Prolific o di un altro produttore). I dati seriali continueranno ad apparire 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 occorre tenere presente che questa API non è disponibile per le pagine web ordinarie. Per utilizzare l'API seriale, è necessario implementare un' Chrome app e installarla tramite il meccanismo delle estensioni di Chrome (operazione tutt'altro che complessa). 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à compilata per l'esempio di oggi (inclusi i 6 file necessari) è disponibile qui:
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.
La piattaforma background.js è un file di testo contenente il seguente testo:
Questo file comunica a Chrome che deve 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.
La piattaforma manifest.json è un file di testo contenente quanto segue:
Il manifest è un file fondamentale, 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 indica a Chrome quali autorizzazioni sono necessarie, quali icone devono essere associate all'app e altre informazioni essenziali.
La piattaforma script.js (che verrà referenziato da window.html) contiene tutto il codice JavaScript che consente il funzionamento della nostra 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 (tutto sommato) rappresentano una quantità davvero trascurabile.
Infine, c'è window.html, ovvero il file contenente il markup HTML della nostra app (l'interfaccia utente dell'applicazione). È composto dal seguente markup:
Si noti che nella pagina non è presente alcun JavaScript inline. Il cento per cento della logica dell'app si trova in un file esterno (il file script.js ). Questo garantisce una netta separazione tra la logica del programma e il markup di presentazione, facilitando notevolmente la manutenzione del codice e il debug.
Invece di analizzare il codice riga per riga (che risulta abbastanza autoesplicativo), vediamo come installarlo ed eseguirlo.
Avvia il browser Chrome, se non l'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.
Dopo aver selezionato la casella Modalità sviluppatore, e solo dopo averla selezionata, apparirà il pulsante Carica estensioni non pacchettizzate… (a sinistra). Fare clic su quel pulsante. Navigare fino alla cartella contenente i 6 file. Designare quella cartella 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 collegamento Avvia associato ad essa (fare attenzione allo screenshot precedente). La finestra principale dell'app apparirà in primo piano:
Questo è l'aspetto della finestra se è già collegato un lettore di schede SecuRED (o un altro dispositivo seriale!) alla porta COM3. Si noti che il codice JavaScript in script.js (vedi sopra) è codificato in modo fisso per utilizzare "COM3" come nome della porta. Se il computer utilizza una porta seriale diversa, modificare manualmente il codice per usare il nome corretto. (È possibile verificarlo da "Dispositivi e stampanti" in Windows. In Linux, la porta seriale potrebbe avere un nome come /dev/tty0 oppure /dev/ttyUSB0 oppure /dev/tty1.) E sì, 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 carte SecuRED di ID TECH, procedere con lo strisciamento di una carta di credito nell'apposita fessura. I dati della carta verranno visualizzati automaticamente nell'area di testo superiore della finestra dell'applicazione (si notino i valori esadecimali nello screenshot seguente):
Naturalmente, per interpretare correttamente questi dati è necessario conoscere il formato Enhanced Encrypted MSR di ID TECH. (Analogamente, la decrittazionedei dati richiede la conoscenza di DUKPT, della derivazione delle chiavi, di AES e/o di TDES.) Questo argomento verrà approfondito in un post futuro. Per ora è sufficiente sottolineare che il Serial Test Utility consente di acquisire i dati delle carte di credito in modo immediato e automatico da Google Chrome, su qualsiasi piattaforma in cui Chrome è disponibile. È inoltre possibile sfruttare gli eccellenti strumenti di debug integrati di Chrome per verificare il proprio codice, che è scritto interamente in JavaScript.
Analizzando il codice passo dopo passo, si noterà (nella parte finale del codice) che per ricevere i dati seriali viene passata una funzione di callback a chrome.serial.onReceive.addListener(). La funzione receive(), a sua volta, richiama una funzione collect() che accumula i byte ricevuti in un buffer. Il contenuto del buffer viene scritto (come testo) nell'interfaccia dell'applicazione dopo un intervallo WAIT_TIME di 500 millisecondi. In altri termini, quando i dati provenienti dal lettore di carte raggiungono l'applicazione, viene avviato un timer e i dati (che arrivano in piccoli blocchi a distanza di pochi millisecondi l'uno dall'altro) vengono accumulati nel buffer; allo scadere del timer (dopo 500 ms), il buffer viene svuotato e il contenuto viene visualizzato a schermo (riprendendo quindi il processo di buffering se i dati continuano ad arrivare). Questo meccanismo consente di raggruppare una quantità ragionevole di dati prima di visualizzarli, evitando così la scrittura a schermo di numerosi pacchetti molto brevi a intervalli di pochi millisecondi.
Le uniche altre parti dell'app che potrebbero non risultare immediatamente intuitive sono la piccola "finestra dei comandi" appena sopra i pulsanti Invia e Cancella (vedere lo screenshot in alto) e il menu a tendina ("Select a command and hit Send"). L'area di testo sopra il pulsante Invia è uno spazio in cui è possibile inserire manualmente specifici comandi firmware che il dispositivo di destinazione (in questo caso, 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) pronti all'uso. Se si conoscono altri comandi esadecimali (ad esempio perché si ha a disposizione la documentazione del dispositivo), è possibile inserire comandi per controllare o configurare l'unità.
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 browser Chrome. Visualizzerà tutti i dati che transitano sulla porta seriale, indipendentemente dal fatto che provengano da un lettore di schede ID TECH o meno.
Speriamo che questo progetto vi sia piaciuto. In un prossimo articolo esamineremo come comunicare con un dispositivo USB-HID utilizzando le API di connettività di Chrome. Vale sicuramente la pena sapere come si fa!
