Core Features
기존 설치형 보안 키패드의 모든 기능을 웹 표준 기술로 구현했습니다.
Hybrid Encryption
AES-256-GCM으로 입력값을 암호화하고, 세션별 RSA-OAEP 공개키로 AES 키를 감싸 전송합니다.
서버 개인키 없이는 복호화가 불가능합니다.
Key Value Isolation
모든 키 값은 Canvas에만 렌더링되며 Shadow DOM으로 격리됩니다.
innerHTML·DOM 탐색으로 키 값을 읽을 수 없어 XSS·스크래핑을 원천 차단합니다.
Numeric · English · Korean
숫자 (numeric, 매 세션 무작위 배치), 영문 QWERTY (english),
한글 두벌식 (korean) 키패드를 지원합니다.
Zero Install
스크립트 태그 하나로 즉시 사용할 수 있습니다. data-coForward-vk 속성만 추가하면
autoInit()이 자동으로 필드를 감지합니다.
Replay Attack Prevention
세션 UUID·타임스탬프·nonce를 결합해 서버에서 검증합니다. 캡처한 암호문을 재전송해도 서버에서 즉시 거부됩니다.
CSS Custom Properties
--coForward-vk-* CSS 변수로 색상·크기·폰트를 자유롭게 변경합니다.
기존 디자인 시스템에 자연스럽게 통합됩니다.
Security Architecture
입력부터 서버 복호화까지 — 각 단계에서 독립적인 보안 레이어가 작동합니다.
서버에서 RSA 공개키 수신
Canvas 렌더링, DOM 미노출
AES-256-GCM + RSA-OAEP
암호문만 서버로 전달
개인키로 AES 키 복원 후 평문 획득
숫자 키패드는 매 세션마다 키 배치를 무작위로 섞어 화면 캡처 기반 공격을 방어합니다.
실제 DOM 이벤트가 발생하지 않으며, Canvas 내부 클릭만 처리해 키로거 수집을 차단합니다.
암호화 세션 UUID는 단 한 번만 유효하며, 서버가 소비 후 즉시 폐기해 재전송 공격을 방지합니다.
키패드 컴포넌트는 Shadow DOM으로 캡슐화되어 외부 스크립트가 내부 상태에 접근할 수 없습니다.
Quick Start
복잡한 설정 없이 스크립트 추가부터 서버 검증까지 단 세 단계입니다.
Include the SDK
dist/coForward-virtual-keypad.js를 HTML에 포함하거나 npm으로 설치합니다.
번들러 없이 CDN 방식도 지원합니다.
Mark your fields
보호할 <input>에 data-coForward-vk="numeric" 속성을 추가하면
autoInit()이 자동으로 키패드를 연결합니다.
Verify on server
Java Spring Boot 의존성을 추가하고 @EnableCoForwardVK를 선언하면
자동으로 세션 관리 및 복호화 API가 활성화됩니다.
Code Example
실제 사용 코드는 이렇게 간단합니다.
<!-- 1. SDK 포함 -->
<script src="dist/coForward-virtual-keypad.js"></script>
<!-- 2. 숫자 키패드 (자동 초기화) -->
<input type="text"
data-coForward-vk="numeric"
placeholder="비밀번호 입력" />
<!-- 3. 또는 수동 초기화 -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const vk = CoForwardVK.init({
target: '#password',
type: 'numeric',
sessionUrl: '/api/vk/session',
onSubmit: (encrypted) => {
// 암호화된 값을 서버로 전송
submitForm(encrypted);
}
});
});
</script>Integration
프론트엔드 프레임워크부터 Java Spring Boot 서버까지 모두 지원합니다.
React · Vue · Svelte 등 모든 모던 프레임워크
# 설치
npm install coforward-virtual-keyboard
// React 예시
import CoForwardVK from 'coforward-virtual-keyboard';
function LoginForm() {
return (
<input
data-coforward-vk="numeric"
ref={inputRef}
/>
);
}Maven 의존성 추가 후 어노테이션 하나로 완성
<!-- pom.xml -->
<dependency>
<groupId>com.coforward</groupId>
<artifactId>coforward-vk-spring</artifactId>
<version>1.0.0</version>
</dependency>
// Application.java
@SpringBootApplication
@EnableCoForwardVK
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}