기술 포스트
Google Chrome으로 RS-232를 통해 신용카드 리더기와 통신하기
ID TECH 카드 리더기의 장점 중 하나는 통신 연결이 놀라울 정도로 간편하다는 점입니다. 예를 들어, 대부분의 결제 주변기기를 Google Chrome 웹 브라우저를 통해 제어할 수 있다는 사실을 알고 계셨나요? JavaScript와 HTML만으로 시리얼 및/또는 USB 장치와 통신할 수 있다는 점은 매우 편리하므로, 그 방법에 대해 자세히 알아보겠습니다.
이 글에서는 ID TECH의 SRED 규격을 준수하는 RS-232 버전 SecuRED 카드 리더기 (아래 사진 참조)를 중심으로 설명하겠습니다. 이 제품은 USB-HID, USB-KB, RS-232 방식으로 통신 가능한 상시 암호화 방식의 마그네틱 스와이프 리더기(MSR)입니다. 향후 게시글에서는 Chrome 환경에서 USB-HID를 통해 ID TECH 리더기에 연결하는 방법을 심층적으로 다룰 예정입니다. 오늘은 RS-232에 집중하겠습니다. RS-232는 USB보다 다소 간단하면서도, 이후 USB-HID 통신에서 활용할 다양한 기법들을 미리 익힐 수 있는 좋은 출발점이 됩니다.
"우리 컴퓨터에는 RS-232 포트가 없는데요" 라고 하시더라도 걱정하지 마세요. Prolific 또는 다른 제조사의 시리얼-USB 변환 케이블을 사용하면 시리얼 장치를 컴퓨터에 연결할 수 있습니다. USB 포트를 통해 연결하더라도 데이터는 여전히 시리얼 데이터 형식으로 전달됩니다.
Google의 Chrome 브라우저는 chrome.serial.* API를 통해 RS-232 연결을 지원합니다. 단, 해당 API는 일반 웹 페이지에서는 사용할 수 없다는 점에 유의하시기 바랍니다. 시리얼 API를 사용하려면 Chrome 앱 을 구현하고, Chrome 확장 프로그램 메커니즘을 통해 해당 앱을 설치해야 합니다(이 과정은 전혀 어렵지 않습니다). 구체적으로 어떤 작업이 필요한지 살펴보겠습니다.
Chrome 앱을 만들려면 폴더 하나에 소규모 파일 몇 개만 넣으면 됩니다. 오늘 예제에 사용할 완성된 앱(필요한 파일 6개 포함)은 여기서 다운로드할 수 있습니다:
Zip 파일을 로컬 드라이브에 다운로드한 후, 별도의 폴더에 압축을 해제하십시오. 압축을 풀면 다음 파일들이 포함되어 있어야 합니다:
잠시 후 해당 앱을 Chrome 확장 프로그램으로 설치 하는 방법을 설명하겠습니다. 먼저 앱을 구성하는 파일들을 간략히 살펴보겠습니다.
background.js 파일은 다음 내용을 담고 있는 텍스트 파일입니다:
이 파일은 Chrome에 앱의 메인 창을 생성하기 위해 window.html 파일을 사용해야 한다는 것을 알려줍니다(너비 390픽셀, 높이 438픽셀).
다음 두 파일은 단순한 소형 PNG 아이콘입니다.
manifest.json 파일은 다음 내용을 담고 있는 텍스트 파일입니다:
매니페스트는 중요한 파일입니다. Chrome 앱은 고유한 보안 환경에서 실행되며, 예를 들어 권한을 사전에 명시적으로 지정해야 합니다. 매니페스트는 Chrome에 필요한 권한, 앱에 연결할 아이콘, 그 외 필수 정보를 알려줍니다.
script.js 파일( window.html에서 참조됨)에는 앱을 작동시키는 모든 JavaScript 코드가 포함되어 있습니다. 해당 파일은 다음 코드로 구성됩니다:
알겠습니다. 그렇게 크지 않은 파일처럼 보일 수 있지만, 실제로는 200줄도 안 되는 코드로 이루어져 있습니다. 전체적인 관점에서 보면 사실 상당히 적은 양의 코드입니다.
마지막으로, window.html파일이 있습니다. 이 파일은 앱의 HTML 마크업(앱의 사용자 인터페이스)을 담고 있으며, 다음과 같은 마크업으로 구성되어 있습니다.
페이지 어디에도 인라인 JavaScript가 없다는 점을 주목하세요. 앱의 로직 100%는 외부 파일( script.js 파일)에 담겨 있습니다. 이를 통해 프로그램 로직과 프레젠테이션 마크업이 명확하게 분리되어, 코드 유지보수와 디버깅이 훨씬 수월해집니다.
코드 자체는 설명이 필요 없을 만큼 직관적이므로, 코드를 일일이 살펴보는 대신 설치 및 실행 방법에 대해 알아보겠습니다.
아직 Chrome 브라우저를 실행하지 않으셨다면 실행한 후, chrome://extensions 페이지로 이동하세요. 우측 상단에서 개발자 모드 체크박스. 아래를 참조하십시오.
개발자 모드 체크박스를 선택한 경우에만 압축해제된 확장 프로그램 로드… 버튼(왼쪽)이 나타납니다. 해당 버튼을 클릭하십시오. 6개의 소형 파일이 포함된 폴더로 이동하십시오. 해당 폴더를 대상 폴더로 지정한 후 확인을 클릭하십시오. 다시 chrome://extensions 페이지로 돌아오면 앱이 사용 가능한 확장 프로그램 목록에 표시됩니다. 앱을 찾아 해당 앱에 연결된 실행 링크를 클릭하십시오(위 스크린샷을 자세히 확인하십시오). 앱의 메인 창이 화면에 나타납니다.
이 화면은 SecuRED 카드 리더기(또는 기타 시리얼 장치!)가 이미 COM3 포트에 연결되어 있을 때 표시되는 창의 모습입니다. 참고로 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), 바로 사용할 수 있습니다. 장치 설명서를 참고하여 다른 16진수 명령을 알고 있다면, 해당 명령을 입력해 장치를 제어하거나 설정을 변경할 수 있습니다.
SecuRED 전용 드롭다운 메뉴 컨트롤을 사용하지 않더라도, Serial Test Utility는 Chrome 브라우저에서 모든 시리얼 연결을 모니터링하는 데 유용한 도구입니다. ID TECH 카드 리더기에서 발생한 데이터가 아니더라도, 시리얼 포트를 통해 전송되는 모든 데이터를 표시해 줍니다.
이 프로젝트가 유익하셨기를 바랍니다. 다음 포스트에서는 Chrome의 연결 API를 사용하여 USB-HID 장치와 통신하는 방법을 살펴볼 예정입니다. 꼭 알아두면 도움이 될 내용입니다!