js_lis 2.0.8 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +148 -0
- package/VirtualKeyboard.js +811 -715
- package/layouts.js +104 -15
- package/main.js +8 -42
- package/package.json +1 -1
- package/style/kbstyle.js +151 -6
package/README.md
ADDED
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
# js_lis
|
|
2
|
+
|
|
3
|
+
**js_lis** is a JavaScript on-screen keyboard utility designed to reduce the risk of keystroke interception by avoiding direct hardware keyboard input in sensitive workflows.
|
|
4
|
+
|
|
5
|
+
NPM package: [https://www.npmjs.com/package/js_lis](https://www.npmjs.com/package/js_lis)
|
|
6
|
+
|
|
7
|
+
Web test Login + SOSK: [https://sosk-login-js-six.vercel.app](https://sosk-login-js-six.vercel.app).
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## English
|
|
12
|
+
|
|
13
|
+
### Overview
|
|
14
|
+
|
|
15
|
+
`js_lis` provides a virtual keyboard interface that can be integrated into web pages or web-based interfaces.
|
|
16
|
+
It is intended for high-risk input scenarios where users want an additional defense layer against keylogging.
|
|
17
|
+
|
|
18
|
+
### Security Note (Keylogger and Bettercap)
|
|
19
|
+
|
|
20
|
+
- `js_lis` can help reduce exposure to **traditional keyloggers** that rely on physical keystroke capture.
|
|
21
|
+
- It is also intended to reduce risk from interception workflows commonly demonstrated with network attack tools such as **bettercap** (for example, injected key-capture scripts in compromised environments).
|
|
22
|
+
- No client-side tool can guarantee complete protection. Security still depends on HTTPS, trusted networks, endpoint hygiene, and browser integrity.
|
|
23
|
+
|
|
24
|
+
### Installation
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm install js_lis
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### Basic Usage
|
|
31
|
+
|
|
32
|
+
```javascript
|
|
33
|
+
// Example import style (adjust to your project setup)
|
|
34
|
+
import js_lis from "js_lis";
|
|
35
|
+
|
|
36
|
+
// Initialize according to your app's integration pattern
|
|
37
|
+
// (see your local implementation files for exact wiring)
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### How It Works + ID-based Integration
|
|
41
|
+
|
|
42
|
+
`js_lis` expects specific DOM IDs:
|
|
43
|
+
|
|
44
|
+
- `keyboard-container`: container where the virtual keyboard is rendered
|
|
45
|
+
- `toggle`: optional button for show/hide keyboard
|
|
46
|
+
|
|
47
|
+
When the page loads, create `VirtualKeyboard`.
|
|
48
|
+
Then the library listens to `INPUT` and `TEXTAREA` focus/click events, tracks the active field, and injects typed characters via the virtual keys.
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<input id="secure-input" type="password" placeholder="Enter password" />
|
|
52
|
+
<button id="toggle" type="button">Toggle Keyboard</button>
|
|
53
|
+
<div id="keyboard-container"></div>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
```javascript
|
|
57
|
+
import { VirtualKeyboard } from "./VirtualKeyboard.js";
|
|
58
|
+
|
|
59
|
+
window.addEventListener("DOMContentLoaded", () => {
|
|
60
|
+
const keyboard = new VirtualKeyboard();
|
|
61
|
+
|
|
62
|
+
// Example of ID-based element access in JS
|
|
63
|
+
const secureInput = document.getElementById("secure-input");
|
|
64
|
+
if (secureInput) secureInput.focus();
|
|
65
|
+
});
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### Recommended Deployment Practices
|
|
69
|
+
|
|
70
|
+
- Serve over HTTPS only.
|
|
71
|
+
- Use a strict Content Security Policy (CSP).
|
|
72
|
+
- Avoid running on untrusted or MITM-prone networks.
|
|
73
|
+
- Keep browser and OS security patches up to date.
|
|
74
|
+
- Pair with endpoint protection and monitoring.
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
## ภาษาไทย (ทางการ)
|
|
79
|
+
|
|
80
|
+
### ภาพรวม
|
|
81
|
+
|
|
82
|
+
`js_lis` เป็นเครื่องมือคีย์บอร์ดเสมือน (Virtual Keyboard) สำหรับ JavaScript ที่ออกแบบมาเพื่อลดความเสี่ยงจากการดักจับการพิมพ์ โดยหลีกเลี่ยงการป้อนข้อมูลผ่านคีย์บอร์ดฮาร์ดแวร์โดยตรงในขั้นตอนที่มีความอ่อนไหวด้านความปลอดภัย
|
|
83
|
+
|
|
84
|
+
อ้างอิงแพ็กเกจบน npm: [https://www.npmjs.com/package/js_lis](https://www.npmjs.com/package/js_lis)
|
|
85
|
+
|
|
86
|
+
ตัวอย่างหน้า Login + SOSK: [https://sosk-login-js-six.vercel.app](https://sosk-login-js-six.vercel.app).
|
|
87
|
+
|
|
88
|
+
### หมายเหตุด้านความปลอดภัย (Keylogger และ Bettercap)
|
|
89
|
+
|
|
90
|
+
- `js_lis` สามารถช่วยลดความเสี่ยงจาก **keylogger แบบดั้งเดิม** ที่มุ่งดักข้อมูลจากการกดแป้นพิมพ์จริง
|
|
91
|
+
- รวมถึงสามารถช่วยลดความเสี่ยงจากรูปแบบการโจมตีที่มักสาธิตผ่านเครื่องมือเครือข่ายอย่าง **bettercap** (เช่น การแทรกสคริปต์เพื่อดักรับข้อมูลการป้อนในสภาพแวดล้อมที่ถูกบุกรุก)
|
|
92
|
+
- อย่างไรก็ตาม เครื่องมือฝั่งผู้ใช้เพียงอย่างเดียวไม่สามารถรับประกันการป้องกันได้สมบูรณ์ จำเป็นต้องใช้ร่วมกับ HTTPS, เครือข่ายที่เชื่อถือได้, ความปลอดภัยของเครื่องผู้ใช้ และความน่าเชื่อถือของเบราว์เซอร์
|
|
93
|
+
|
|
94
|
+
### การติดตั้ง
|
|
95
|
+
|
|
96
|
+
```bash
|
|
97
|
+
npm install js_lis
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### การใช้งานเบื้องต้น
|
|
101
|
+
|
|
102
|
+
```javascript
|
|
103
|
+
// ตัวอย่างการนำเข้า (ปรับตามโครงสร้างโปรเจกต์ของท่าน)
|
|
104
|
+
import js_lis from "js_lis";
|
|
105
|
+
|
|
106
|
+
// เรียกใช้งานตามรูปแบบการเชื่อมต่อของแอปพลิเคชัน
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### หลักการทำงาน + การเรียกใช้ผ่าน ID ใน JavaScript
|
|
110
|
+
|
|
111
|
+
`js_lis` ต้องอาศัย DOM `id` หลักดังนี้
|
|
112
|
+
|
|
113
|
+
- `keyboard-container`: พื้นที่สำหรับ render คีย์บอร์ดเสมือน
|
|
114
|
+
- `toggle`: ปุ่มสำหรับสลับแสดง/ซ่อนคีย์บอร์ด (ถ้ามี)
|
|
115
|
+
|
|
116
|
+
เมื่อหน้าเว็บโหลดเสร็จ ให้สร้าง `VirtualKeyboard` จากนั้นระบบจะดักเหตุการณ์ focus/click ของ `INPUT` และ `TEXTAREA` เพื่อระบุช่องที่กำลังใช้งาน และป้อนค่าผ่านปุ่มบนคีย์บอร์ดเสมือน
|
|
117
|
+
|
|
118
|
+
```html
|
|
119
|
+
<input id="secure-input" type="password" placeholder="กรอกรหัสผ่าน" />
|
|
120
|
+
<button id="toggle" type="button">แสดง/ซ่อนคีย์บอร์ด</button>
|
|
121
|
+
<div id="keyboard-container"></div>
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
```javascript
|
|
125
|
+
import { VirtualKeyboard } from "./VirtualKeyboard.js";
|
|
126
|
+
|
|
127
|
+
window.addEventListener("DOMContentLoaded", () => {
|
|
128
|
+
const keyboard = new VirtualKeyboard();
|
|
129
|
+
|
|
130
|
+
// ตัวอย่างการเรียกใช้งาน element ผ่าน id
|
|
131
|
+
const secureInput = document.getElementById("secure-input");
|
|
132
|
+
if (secureInput) secureInput.focus();
|
|
133
|
+
});
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### แนวทางการใช้งานที่แนะนำ
|
|
137
|
+
|
|
138
|
+
- ให้บริการผ่าน HTTPS เท่านั้น
|
|
139
|
+
- กำหนดนโยบาย Content Security Policy (CSP) อย่างเข้มงวด
|
|
140
|
+
- หลีกเลี่ยงการใช้งานบนเครือข่ายที่ไม่เชื่อถือได้หรือมีความเสี่ยง MITM
|
|
141
|
+
- อัปเดตแพตช์ความปลอดภัยของระบบปฏิบัติการและเบราว์เซอร์อย่างสม่ำเสมอ
|
|
142
|
+
- ใช้งานร่วมกับระบบป้องกันและเฝ้าระวังความปลอดภัยของอุปกรณ์ปลายทาง
|
|
143
|
+
|
|
144
|
+
---
|
|
145
|
+
|
|
146
|
+
## License
|
|
147
|
+
|
|
148
|
+
ISC
|