기술 포스트
Google Chrome로 RS-232 방식의 신용카드 리더기와 통신하기
ID TECH 카드 리더기의 장점 중 하나는 통신 연결이 놀라울 정도로 간편하다는 점입니다. 예를 들어, 대부분의 결제 주변기기를 Google Chrome 웹 브라우저를 통해 직접 제어할 수 있다는 사실을 알고 계셨나요? JavaScript와 HTML만으로 시리얼 및/또는 USB 장치와 통신할 수 있다는 점은 매우 편리합니다. 지금부터 그 방법을 자세히 설명해 드리겠습니다.
이 글에서는 ID TECH의 SRED 규격을 준수하는 RS-232 버전의 SecuRED 카드 리더기 (아래 사진 참조)를 중심으로 설명하겠습니다. 이 제품은 상시 암호화 방식의 마그네틱 스와이프 리더기(MSR)로, USB-HID, USB-KB, RS-232 방식으로 통신이 가능합니다. 이후 글에서는 Chrome을 통해 USB-HID 방식으로 ID TECH 리더기에 연결하는 방법을 자세히 다룰 예정입니다. 오늘은 RS-232 방식에 집중하겠습니다. RS-232는 USB보다 다소 간단하면서도, 향후 USB-HID 통신에서 활용할 다양한 기법들을 함께 익힐 수 있습니다.
"우리 컴퓨터에는 RS-232 포트가 없는데요 "라고 하시는 분도 걱정하실 필요 없습니다. Prolific 등 다른 제조사의 시리얼-USB 변환 케이블을 사용하면 시리얼 장치를 컴퓨터에 연결할 수 있습니다. USB 포트를 통해 데이터가 전달되더라도, 시리얼 데이터는 여전히 시리얼 형식 그대로 인식됩니다 .
Google의 Chrome 브라우저는 다음의 API를 통해 RS-232 연결을 지원합니다: chrome.serial.* API단, 해당 API는 일반 웹 페이지에서는 사용할 수 없습니다. 시리얼 API를 사용하려면 Chrome 앱 을 구현한 후, Chrome 확장 프로그램 메커니즘을 통해 설치해야 합니다(이 과정은 전혀 어렵지 않습니다). 어떤 작업이 필요한지 살펴보겠습니다.
Chrome 앱을 만들려면 하나의 폴더에 소규모 파일 6개만 넣으면 됩니다. 오늘 예제에 사용할 완성된 앱(필요한 파일 6개 포함)은 여기에서 다운로드할 수 있습니다:
Zip 파일을 로컬 드라이브에 다운로드한 후, 별도의 폴더에 압축을 해제하세요. 다음 파일들이 포함되어 있어야 합니다:
잠시 후 이 앱을 Chrome 확장 프로그램으로 설치 하는 방법을 안내해 드리겠습니다. 먼저 앱을 구성하는 파일들을 간략히 살펴보겠습니다.
background.js 파일은 다음 내용을 포함하는 텍스트 파일입니다.
이 파일은 Chrome에 앱의 메인 창(너비 390픽셀, 높이 438픽셀)을 생성하기 위해 window.html 파일을 사용해야 한다는 것을 알려줍니다.
다음 두 파일은 단순한 소형 PNG 아이콘입니다.
manifest.json 파일은 다음 내용을 포함하는 텍스트 파일입니다.
매니페스트는 중요한 파일입니다. Chrome 앱은 고유한 보안 환경에서 실행되기 때문에, 예를 들어 권한을 사전에 명시적으로 지정해야 합니다. 매니페스트는 필요한 권한, 앱에 연결할 아이콘, 그 밖의 필수 정보를 Chrome에 알려줍니다.
script.js 파일( window.html에서 참조됨)에는 앱을 작동시키는 모든 JavaScript 코드가 포함되어 있으며, 다음과 같은 코드로 구성됩니다.
좋습니다. 그렇게 작은 파일이 아닌 것처럼 보일 수 있지만, 실제로는 200줄 미만의 코드에 불과하며, 전체적인 관점에서 보면 상당히 적은 양의 코드입니다.
마지막으로, window.html는 앱의 HTML 마크업(앱의 사용자 인터페이스)이 포함된 파일입니다. 이 파일은 다음과 같은 마크업으로 구성되어 있습니다.
페이지 내 어디에도 인라인 JavaScript가 없다는 점에 주목하세요. 앱 로직의 100%는 외부 파일( script.js 파일)에 있습니다. 이를 통해 프로그램 로직과 프레젠테이션 마크업이 명확하게 분리되어, 코드 유지보수 및 디버깅이 크게 용이해집니다.
코드를 일일이 살펴보는 것(코드 자체가 꽤 직관적이므로) 대신, 설치 및 실행 방법에 대해 알아보겠습니다.
아직 Chrome 브라우저를 열지 않았다면 실행하고, chrome://extensions 페이지로 이동하세요. 오른쪽 상단에서 개발자 모드(Developer Mode) 체크박스. 아래를 참조하십시오.
개발자 모드 체크박스를 선택한 경우에만 압축 해제된 확장 프로그램 로드… 버튼(왼쪽)이 나타납니다. 해당 버튼을 클릭한 후, 6개의 소형 파일이 포함된 폴더로 이동합니다. 해당 폴더를 대상 폴더로 지정하고 확인을 클릭합니다. 그러면 chrome://extensions 페이지로 돌아오며, 사용 가능한 확장 프로그램 목록에 앱이 표시됩니다. 앱을 찾아 실행 링크를 클릭합니다(위 스크린샷을 자세히 확인하십시오). 앱의 메인 창이 화면에 나타납니다.
이 화면은 SecuRED 카드 리더기(또는 다른 시리얼 장치)가 COM3 포트에 이미 연결되어 있는 경우의 창 모습입니다. 해당 JavaScript에서 script.js (위 참조) 포트 이름으로 "COM3"을 사용하도록 하드코딩되어 있습니다. 컴퓨터가 다른 시리얼 포트를 사용하는 경우, 코드를 직접 수정하여 올바른 포트 이름을 지정하십시오. (Windows의 "장치 및 프린터"에서 확인할 수 있습니다. Linux에서는 시리얼 포트 이름이 /dev/tty0 또는 /dev/ttyUSB0 또는 /dev/tty1와 같은 형식일 수 있습니다.) 참고로, 이 확장 프로그램은 Chrome이 설치되어 있다면 Windows, Linux, Mac OS X, ChromeOS 등 모든 환경에서 동작합니다.
시리얼 장치에 성공적으로 연결되었으며, 해당 장치가 ID TECH의 SecuRED 카드 리더인 경우, 슬롯에 신용카드를 스와이프해 보십시오. 카드 데이터가 앱 창 상단의 텍스트 영역에 자동으로 표시됩니다. (아래 스크린샷의 16진수 값을 참고하십시오.)
물론, 이 데이터를 파싱하려면 ID TECH의 Enhanced Encrypted MSR Format에 대한 이해가 필요합니다. (마찬가지로, 데이터 복호화를 위해서는 DUKPT, 키 파생, AES 및/또는 TDES에 대한 이해가 필요합니다.) 이에 대해서는 향후 포스트에서 다루겠습니다. 현재로서는, Serial Test Utility를 통해 Google Chrome이 실행되는 모든 플랫폼에서 신용카드 데이터를 즉시, 자동으로 캡처할 수 있다는 점을 확인하는 것으로 충분합니다. 또한 Chrome의 강력한 내장 디버깅 도구를 활용하여 JavaScript로 작성된 코드를 디버깅할 수 있습니다.
코드를 단계별로 살펴보면, 코드 맨 하단에서 시리얼 데이터를 수신하기 위해 chrome.serial.onReceive.addListener()에 수신 콜백 함수를 전달하는 것을 확인할 수 있습니다. receive() 함수는 다시 collect() 함수를 호출하여 수신된 바이트를 버퍼에 축적합니다. 버퍼에 축적된 데이터는 500밀리초의 WAIT_TIME이 경과한 후 텍스트 형태로 앱 UI에 출력됩니다. 즉, 카드 리더로부터 데이터가 수신되면 타이머가 시작되고, 수 밀리초 간격으로 소량씩 도착하는 데이터를 버퍼에 누적한 뒤, 타이머가 만료되면(500밀리초 후) 버퍼를 화면에 출력합니다. 데이터가 계속 수신되는 경우에는 버퍼링 과정이 다시 시작됩니다. 이 방식을 통해 데이터를 적절한 단위로 묶어 화면에 출력할 수 있습니다. (그렇지 않으면 수 밀리초 간격으로 매우 짧은 패킷이 반복적으로 화면에 출력될 수 있습니다.)
앱에서 직관적으로 이해하기 어려울 수 있는 부분은 Send 및 Clear 버튼 바로 위에 있는 작은 "명령 창"(위의 스크린샷 참조)과 드롭다운 메뉴("Select a command and hit Send")입니다. Send 버튼 위의 작은 텍스트 입력 영역은 대상 장치(이 경우 ID TECH의 SecuRED)가 인식하는 특정 펌웨어 명령을 직접 입력할 수 있는 공간입니다. 드롭다운 메뉴에는 바로 사용할 수 있는 몇 가지 사전 등록 명령(예: SecuRED를 한 번 비프음이 울리게 하는 02 53 11 01 33 03 71 등)이 포함되어 있습니다. 해당 장치의 문서를 보유하고 계신다면, 장치를 제어하거나 구성하는 다른 hex 명령을 직접 입력하여 활용할 수도 있습니다.
SecuRED 전용 드롭다운 메뉴 컨트롤을 사용하지 않더라도, Serial Test Utility는 Chrome 브라우저에서 시리얼 연결을 모니터링하는 데 유용한 도구입니다. ID TECH 카드 리더기에서 발생한 데이터가 아니더라도, 시리얼 포트를 통해 전송되는 모든 데이터를 표시해 줍니다.
이번 프로젝트가 유익하셨기를 바랍니다. 다음 포스트에서는 Chrome의 연결 API를 활용하여 USB-HID 장치와 통신하는 방법을 살펴볼 예정입니다. 꼭 알아두어야 할 내용이니 많은 기대 부탁드립니다!