🇹🇼 數位發展部開源專案 - 基於「隱私優先」理念的 NFC 數位名片系統,內建惡意資料防護,辨認網址確認有效防禦
創新的 NFC 數位名片機制,將個人資料直接儲存在 NFC 卡片中,通過觸碰即可開啟專屬數位名片。
- 🔒 隱私優先設計:資料僅儲存於 NFC 卡片,無後端追蹤
- 🛡️ 安全防護機制:內建 XSS 防護、URL 驗證、惡意資料過濾
- 📱 一觸即用:觸碰 NFC 卡片立即開啟數位名片
- 🎨 動態資料渲染:即時解析 NFC 資料並渲染精美介面
- 📇 智慧 vCard 生成:動態生成並下載聯絡人檔案
- 🖼 個人化展示:支援大頭照、社群連結、職稱資訊
- 🌐 純前端架構:無需後端服務,可部署至任何靜態平台
- 📱 跨平台相容:Android 和 iOS 設備均完美支援
- 🔧 視覺化生成器:內建 NFC 生成器,輕鬆創建個人數位名片
- 🌐 雙語支援:頁面區隔方式支援雙語
- 👥 高齡友善:大字體設計,240x240 QR 碼,適合所有年齡層使用
- 🎭 雙版面設計:官方版面(含 Logo)與個人版面(自訂內容)
├── index.html # 機關版數位名片(中文延平大樓)
├── index1.html # 機關版數位名片(中文新光大樓)
├── index-en.html # 機關版數位名片(英文延平大樓)
├── index1-en.html # 機關版數位名片(英文新光大樓)
├── index-personal.html # 個人版數位名片(中文)
├── index-personal-en.html # 個人版數位名片(英文)
├── index-bilingual.html # 雙語版數位名片(機關版)
├── index-bilingual-personal.html # 雙語版數位名片(個人版)
├── nfc-generator.html # NFC 名片生成器
├── nfc-generator-bilingual.html # 雙語版 NFC 生成器
├── assets/ # 資源檔案目錄
│ ├── moda-logo.svg # moda 官方標誌
│ ├── bilingual-common.js # 雙語功能核心函數庫
│ ├── high-accessibility.css # 高齡友善字體優化樣式
│ ├── wu_sheng_fan/ # 範例使用者資源
│ │ └── photo.jpg # 範例大頭貼
│ └── COPYRIGHT.txt # 版權聲明文件
├── doc/ # 文檔目錄
│ ├── BILINGUAL-PLANNING.md # 雙語版規劃文件
│ ├── ENCODING-OPTIMIZATION.md # 編碼優化技術文件
│ ├── IMPLEMENTATION-GUIDE.md # 實作指南
│ └── ACCESSIBILITY-GUIDE.md # 高齡友善設計指南
├── test-qr-generation.html # QR 碼生成測試頁面
├── NFC-GUIDE.md # NFC 操作說明
├── VCARD-GUIDE.md # vCard 格式指南
├── PHOTO-GUIDE.md # 照片處理指南
├── CLAUDE.md # Claude AI 開發指引
├── LICENSE # MIT 授權條款
└── README.md # 專案說明文件
- 開啟
nfc-generator.html
https://{yourDomain}.github.io/DB-Card/nfc-generator.html
- 選擇版面類型:
- 官方版面(含 moda Logo)- 適合在職使用
- 個人版面(無 Logo,自訂內容)- 適合個人使用
- 選擇語言:繁體中文或 English
- 填寫個人資料(姓名、職稱、聯絡方式等)
- 地址設定:
- 官方版面:選擇延平大樓或新光大樓
- 個人版面:可自訂地址或留空
- 上傳大頭貼(推薦使用 Imgur 或 GitHub Raw 圖片)
- 點擊「生成 NFC 連結」
- 下載 NFC 寫入工具(推薦:NFC Tools)
- 選擇「URL/URI」記錄類型
- 貼上剛複製的完整連結
- 將 NFC 卡片放在手機背面並寫入
- 用支援 NFC 的手機觸碰卡片
- 自動開啟專屬數位名片頁面
- 可瀏覽完整資訊並下載 vCard 聯絡人檔案
- 將 NFC 卡片靠近支援 NFC 的 Android 或 iPhone
- 手機自動開啟瀏覽器並載入數位名片
- 支援動態問候語、社群連結和一鍵加入聯絡人
- 可直接分享生成的連結
- 格式:
index.html?data=[Base64編碼的個人資料]
- 適用於 QR 碼、電子郵件或即時通訊分享
版面類型/語言 | 中文版本 | 英文版本 |
---|---|---|
機關版(延平大樓) | index.html |
index-en.html |
機關版(新光大樓) | index1.html |
index1-en.html |
個人版 | index-personal.html |
index-personal-en.html |
- 個人資料:建議使用者專版專用,不增加 NFC 容量為優先考量
- 組織資訊:前端翻譯(數位發展部 → Ministry of Digital Affairs)
- 地址資訊:使用官方英文地址翻譯
{
"data": {
"name": "姓名",
"title": "職稱",
"department": "部門",
"email": "[email protected]",
"phone": "電話號碼",
"mobile": "手機號碼",
"avatar": "大頭貼URL",
"greetings": ["問候語1", "問候語2"],
"socialLinks": {
"email": "mailto:[email protected]",
"socialNote": "FB: fb.com/yourname\nIG: @yourname\nLINE: @your-line-id"
}
}
}
{
"data": {
"name": "姓名",
"title": "職稱",
"department": "部門",
"organization": "組織/公司名稱", // 個人版可選
"email": "[email protected]",
"phone": "電話號碼",
"mobile": "手機號碼", // v2.1.0 新增
"avatar": "大頭貼URL",
"address": "自訂地址", // 個人版可選
"greetings": ["問候語1", "問候語2"],
"socialLinks": {
"email": "mailto:[email protected]",
"socialNote": "FB: fb.com/yourname\nIG: @yourname\nLINE: @your-line-id"
}
}
}
- ✅ 合併社群連結:所有社群媒體資訊整合到
socialNote
欄位 - ✅ 精簡格式:實際 NFC 傳輸時進一步壓縮為單字母鍵值對
- ✅ 向下相容性:新版本自動識別舊格式(8欄位),確保現有 NFC 卡片持續運作
- ✅ 智慧顯示:手機號碼為可選欄位,未填寫時自動隱藏,不占用介面空間
- 輸入階段:使用 NFC 生成器,純前端頁面主要提供圖形界面協助操作
- 編碼階段:JSON 資料進行 UTF-8 + Base64 + URL 編碼
- 傳輸階段:編碼後的資料嵌入 URL 參數手動存入NFC 卡,NFC 卡接觸後運用瀏覽器進行資料處理
- 解碼階段:名片頁面自動解碼並驗證資料格式
- 渲染階段:動態生成個人化名片介面和功能
-
- 上傳圖片後右鍵選擇「複製圖片網址」
- 取得格式如:
https://i.imgur.com/XXXXXX.jpg
-
- 上傳圖片後複製 "Direct link" 網址
- 格式通常為:
https://i.postimg.cc/XXXXXX/image.jpg
-
- 上傳圖片 → 右鍵分享 → 設定「知道連結的任何人」可檢視
- 複製連結即可使用
- 系統會自動轉換為可用格式:
https://drive.google.com/uc?export=view&id=FILE_ID
- 支援 JPG、PNG 等常見圖片格式
-
GitHub Repository:使用專案內圖片
-
額外建議:可以使用生成的 Q 版大頭貼等取代真實照片,讓名片更生動同時保有真實照片的隱私性。
- 尺寸:建議 200x200 至 800x800 像素(正方形)
- 格式:JPG、PNG(避免 GIF 動圖)
- 大小:建議小於 1MB 以確保快速載入
- 背景:純色背景或專業照片背景
- Fork 此專案到你的 GitHub 帳號
⚠️ 重要:修改前端寫死的內容- 編輯
index.html
第 752 行:將「數位發展部」改為你的機構名稱 - 編輯
index.html
第 756 行:將「臺北市中正區延平南路143號」改為你的機構地址 - 替換
assets/moda-logo.svg
為你的機構標誌
- 編輯
- 在 Repository Settings > Pages 中啟用
- 選擇
main
分支作為來源 - 系統自動部署至:
https://yourusername.github.io/NFC-Digital-Business-Card-Project/
# 使用 Python 啟動本地伺服器
python -m http.server 8000
# 或使用 Node.js
npx http-server
# 或使用 VS Code Live Server 擴展
- Netlify:拖放檔案夾即可部署
- Vercel:連接 GitHub 自動部署
- Cloudflare Pages:支援自訂網域
1. 組織資訊設定(中文版本)
// index.html & index1.html - 修改機構名稱和地址
organization: '你的機構名稱',
address: '你的機構地址',
2. 組織資訊設定(英文版本)
// index-en.html & index1-en.html - 修改英文機構名稱和地址
organization: 'Your Organization Name',
address: 'Your Organization Address in English',
3. 部門翻譯字典(雙語版本)
// 在 assets/bilingual-common.js 中的 departmentTranslations 物件
const departmentTranslations = {
'你的部門': 'Your Department',
'資訊科': 'Information Technology Division',
'人事處': 'Department of Personnel',
// 添加更多部門翻譯...
};
4. 職位翻譯字典(英文版本)
// 在 index-en.html & index1-en.html 中更新職位翻譯
const titleTranslations = {
'你的職位': 'Your Title',
'科長': 'Section Chief',
// 添加更多職位翻譯...
};
5. 組織標誌更換
- 替換
assets/moda-logo.svg
為你的組織標誌 - 建議使用 SVG 格式以確保清晰度
- 調整
index.html
中的標誌尺寸設定
雙語版本已內建數位發展部各單位的英文翻譯:
中文部門 | 英文翻譯 |
---|---|
數位策略司 | Department of Digital Strategy |
數位政府司 | Department of Digital Service |
資源管理司 | Department of Resource Management |
韌性建設司 | Department of Communications and Cyber Resilience |
數位國際司 | Department of International Cooperation |
資料創新司 | Department of Data Innovation |
秘書處 | Secretariat |
人事處 | Department of Personnel |
政風處 | Department of Civil Service Ethics |
主計處 | Department of Budget, Accounting and Statistics |
資訊處 | Department of Information Management |
法制處 | Department of Legal Affairs |
部長室 | Minister's Office |
政務次長室 | Deputy Minister's Office |
常務次長室 | Administrative Deputy Minister's Office |
主任秘書室 | Chief Secretary's Office |
擴充部門翻譯:
- 編輯
assets/bilingual-common.js
- 在
departmentTranslations
物件中新增對應關係 - 格式:
'中文部門名稱': 'English Department Name'
- 儲存後即可在雙語切換時自動翻譯
部門翻譯擴充範例:
// 在 assets/bilingual-common.js 中新增
const departmentTranslations = {
// 現有翻譯...
'你的新部門': 'Your New Department',
'特殊單位': 'Special Unit',
'專案小組': 'Project Team'
};
語言切換邏輯:
- 部門名稱:前端自動翻譯(節省 NFC 容量)
- 姓名職稱:使用者輸入雙語(重要識別資訊)
- 組織地址:前端寫死翻譯(固定資訊)
調整色彩主題
/* 在 index.html 中修改這些 CSS 變數 */
body {
background: linear-gradient(135deg, #your-color1, #your-color2);
}
.card::before {
background: linear-gradient(90deg, #your-color1, #your-color2);
}
新增或修改欄位
- 在
nfc-generator.html
添加表單欄位 - 在
index.html
的renderCard()
函數中添加顯示邏輯 - 更新 vCard 生成器以包含新欄位
本系統為了符合 NFC 492 bytes 容量限制,採用以下設計:
- 機構名稱:前端寫死,節省傳輸容量
- 機構地址:前端寫死,節省傳輸容量
- 精簡格式:使用單字母鍵值對壓縮資料
- 智慧顯示:空白欄位自動隱藏
本專案基於「隱私優先」原則開發,確保使用者完全掌控個人資料:
- ✅ 完全自主:個人資料儲存在自己的 NFC 卡片中
- ✅ 無後端追蹤:不收集使用者行為資料,無名片交換歷程記錄
- ✅ 純前端架構:所有資料處理在使用者設備上完成
- ✅ 開源透明:所有程式碼公開可檢視
- ✅ 資料可攜性:使用者可隨時更新或刪除 NFC 卡片資料
- 🛡️ XSS 防護:採用 DOMPurify 3.2.4 業界標準進行 HTML 清理,防止跨站腳本攻擊
- 🔒 URL 驗證:所有外部連結經過白名單驗證,防止開放重定向攻擊
- ⚡ CSP 策略:實施內容安全政策,阻止惡意腳本載入
- 🔍 輸入清理:所有使用者輸入經過多層過濾和驗證
- JavaScript 注入防護:阻止
javascript:
協議和事件處理器注入 - HTML 標籤過濾:移除危險標籤如
<script>
、<iframe>
、<object>
- 屬性清理:過濾
onclick
、onerror
、onload
等事件屬性 - 協議白名單:僅允許
https:
、http:
、mailto:
、tel:
協議
- 託管白名單:僅允許信任的圖片託管服務(Imgur、GitHub、Google Drive)
- 來源驗證:檢查圖片 URL 來源,拒絕不明網域
- 降級處理:載入失敗時自動隱藏,避免破損圖示
- 🔐 定期更新 NFC 卡片資料
- 🔐 避免在公共場合暴露 NFC 卡片
- 🔐 使用 HTTPS 部署確保傳輸安全
- 🔐 大頭貼 URL 避免包含敏感資訊
- 🔐 使用推薦的圖片託管服務
本專案持續進行安全性強化,最新版本完成了關鍵安全修補:
- ✅ DOMPurify 關鍵升級 - 從 3.0.5 升級至 3.2.4,修復 4 個嚴重安全漏洞
- CVE-2024-47875 (Critical): 修復深度嵌套 mXSS 攻擊漏洞
- CVE-2024-45801 (High): 修復深度檢查繞過漏洞
- CVE-2025-26791 (Medium): 修復模板字面量正則錯誤
- WS-2024-0017 (Medium): 修復清理器繞過執行 JavaScript 漏洞
- ✅ 簡化安全架構 - 移除本地資源 SRI,保持所有 HTML 檔案一致性
- ✅ 多層防護維持 - SecurityUtils 與新版 DOMPurify 完全相容
- ✅ 修補66個安全弱點 - 包含31個高風險和35個中風險弱點
- ✅ XSS 防護升級 - 採用 DOMPurify 3.2.4 業界標準,取代易被繞過的自製過濾器
- ✅ CSP 安全策略 - 實施內容安全政策,防止惡意腳本注入
- ✅ 專家安全審查 - 通過 Gemini AI 專家深度審查,確保修補有效性
- ✅ 完整測試驗證 - 建立安全測試框架,持續監控安全狀態
A: 確認手機已開啟 NFC 功能,並且卡片格式正確寫入為 URL/URI 類型。
A: 檢查圖片 URL 是否可直接訪問。
A: 這是正常現象,Base64 編碼會增加長度。系統已針對 NFC 492 bytes 限制進行優化,包含精簡格式和容量提示。v2.1.2 版本完善了手機號碼欄位支援,建議在資料較多時選擇性填寫非必要欄位。
A: v2.1.0 版本已改用本地 QR 碼生成技術,不再依賴外部服務。如仍有問題,請檢查瀏覽器 JavaScript 是否正常運作,或嘗試重新整理頁面。
A: 機關版含 moda Logo 和固定機關地址,適合公務使用;個人版無 Logo,字體更大,可自訂組織和地址,適合個人使用。
A: 本系統採用「隱私優先」設計,所有資料僅儲存在您的 NFC 卡片中,無後端伺服器追蹤,純前端架構確保資料完全由您掌控。
A: 專案經過嚴格的安全審查和修補。最新版本修復了66個安全弱點,採用 DOMPurify 3.2.4 防護 XSS 攻擊(修復4個嚴重漏洞),實施 CSP 安全策略,並通過專家審查驗證。所有安全修補都經過完整測試確保有效性。
A: 支援所有具備 NFC 功能的 Android 手機和 iPhone 7 以上型號。
A: 手機號碼為可選欄位。如果未填寫,在名片顯示時會自動隱藏該欄位,不會影響整體版面配置。v2.1.2 版本修復了雙語版頁面的手機號碼隱藏邏輯,確保所有版本行為一致。
A: 支援多種 LINE 連結格式:官方帳號使用 @username
格式,個人帳號直接輸入帳號名稱,或完整的 line.me
網址。系統會自動產生正確的連結格式。
A: 下載 vCard 後,請依照不同裝置操作:
- Android 裝置:點擊「開啟」或於通知欄中找到檔案,即可完成新增。
- Apple 裝置:開啟檔案後,請記得不要按左上方的「完成」,要下拉到「加入聯絡人」選項。
- 雙語版本:依照當前顯示語言產生對應語言的聯絡人檔案。自動產生正確的連結格式。
感謝以下開源專案為本專案提供強大的技術支援:
- DOMPurify - 提供業界標準的 HTML 清理功能,有效防禦 XSS 攻擊,保護使用者安全
- qrcode.js - 提供純前端 QR 碼生成功能,實現完全離線運作
- Google Fonts - 提供高品質的 Noto Sans 字體,支援多語言顯示
歡迎提交 Issue 和 Pull Request!
- Fork 專案並創建功能分支
- 確保程式碼遵循現有風格
- 添加適當的註釋和文檔
- 測試新功能的相容性
- 提交 Pull Request 並描述變更內容
- 主要授權:MIT License - 詳見 LICENSE 檔案
- 開源精神:歡迎自由使用、修改和分發
- Google Fonts (Noto Sans TC & Noto Sans)
- 授權:SIL Open Font License 1.1
- 用途:中文與英文字體顯示,高齡友善設計
- 來源:https://fonts.google.com/noto/specimen/Noto+Sans+TC
-
DOMPurify (v3.2.4)
- 來源:https://github.com/cure53/DOMPurify
- 用途:HTML 清理與 XSS 防護(v2.1.2+ 關鍵漏洞修復)
- 授權:Apache License 2.0 / Mozilla Public License 2.0
- 特色:業界標準 HTML 淨化,防禦 DOM XSS 攻擊
-
qrcode.js (v1.0.0)
- 來源:https://github.com/davidshimjs/qrcodejs
- 用途:純前端 QR 碼生成(v2.1.0 新增本地支援)
- 授權:MIT License
- 特色:完全離線運作,無外部 API 依賴
- moda Logo (moda-logo.svg)
- 版權:數位發展部
- 用途:官方版面標誌顯示
- 說明:CC0 授權
- 純前端實作:無後端依賴,使用原生 HTML/CSS/JavaScript
- 無追蹤機制:不使用 Google Analytics 或其他追蹤服務
- 隱私優先:所有資料處理在客戶端完成
本專案遵循開源最佳實踐,所有第三方元件均為合法使用。如需商業用途,請確認相關授權條款。
- 大字體:機關版 2.4em 姓名字體,個人版 2.8em 姓名字體
- 高對比:使用數位發展部官方配色系統,確保可讀性
- 大 QR 碼:統一使用 240x240 像素 QR 碼,易於掃描
- 清晰間距:適當的行距和元素間距,避免視覺擁擠
- 雙語優化:中英文切換時保持一致的字體大小與間距
- 無障礙設計:符合 WCAG 2.1 AA 標準,支援鍵盤操作與螢幕閱讀器
- 機關版:含 moda Logo,適合公務使用,固定機關地址
- 個人版:無 Logo,更大字體,可自訂組織和地址資訊
- 雙語版:支援中英文動態切換,含打字機效果問候語
- 專案標識:個人版左上角顯示「🇹🇼 moda 開源專案」連結至 GitHub
- 隱私橫幅:所有版面底部顯示隱私優先設計理念
- 動態語言切換:右上角語言按鈕,即時切換中英文
- 選擇性雙語:姓名、職稱、問候語支援雙語,其他欄位智慧翻譯
- 打字機效果:問候語逐字顯示動畫,支援多句輪播
- 容量優化:使用緊湊編碼格式,確保在 NFC 492 bytes 限制內
- vCard 智慧生成:根據當前語言生成對應語言的聯絡人檔案
如需幫助,請參考:
- NFC 操作說明 - 詳細的 NFC 卡片設定指南
- vCard 格式指南 - 聯絡人檔案格式說明
- 照片處理指南 - 大頭貼優化建議
或在 GitHub Issues 中提問。
本專案由數位發展部開發,基於開源精神釋出,歡迎各界使用、修改和貢獻。
- 主辦機關:數位發展部
- 專案性質:開源軟體專案
- 授權條款:MIT License
- 專案網址:https://github.com/moda-gov-tw/DB-Card
依據行政院及所屬機關(構)使用生成式 AI 參考指引第五、六點,本專案開發過程使用以下 AI 工具輔助:
- Amazom Q Develop:程式碼撰寫與優化
- Gemini CLI:技術諮詢與除錯
- 人工審查:所有 AI 生成內容均經公務人員審查確認
- 程式碼品質:使用 ESLint 規範,保持/程式碼一致性
- 相容性測試:支援 iOS 7+ 和 Android 4.4+
- 安全性:無後端風險,資料完全客戶端處理
- ✅ 雙語版手機號碼修復: 修復 index-bilingual-personal.html 中手機號碼欄位未自動隱藏問題
- ✅ 功能一致性: 確保三個雙語版頁面手機號碼處理邏輯一致
- ✅ 顯示邏輯優化: 空值時自動隱藏,有值時正確顯示並支援撥號連結
- ✅ 代碼維護性: 統一手機號碼處理模式,降低維護成本
- ✅ 安全修補: 修補31個弱點(30個DOM XSS + 1個Open Redirect)
- ✅ Accessibility改善: 無效連結正確標記
aria-disabled="true"
- ✅ 輔助技術支援: 改善螢幕報讀器和鍵盤導航體驗
- ✅ 視覺回饋: 不安全連結呈現禁用狀態(半透明)
- ✅ 安全模組: 引入security-utils.js核心安全功能
- ✅ CSP實作: 全面部署Content Security Policy標頭
- ✅ 測試框架: 完整安全測試驗證體系
- ✅ 安全審查: Gemini專家深度審查security-utils.js模組
- ✅ XSS防護強化: 修復sanitizeHTML函數,加強三階段過濾機制
- ✅ URL處理修復: 修正sanitizeInput邏輯錯誤,支援合法URL驗證
- ✅ 依賴關係修復: 雙語版本頁面正確引入security-utils.js
- ✅ 新增手機號碼欄位支援,完整支援雙電話聯絡方式
- ✅ 改善 LINE 連結處理邏輯,支援官方帳號與個人帳號格式
- ✅ QR 碼本地化:導入 qrcode.js 本地生成,取代外部 api.qrserver.com 依賴
- ✅ QR 碼下載功能:支援高解析度 QR 碼圖片下載,智慧檔名生成
- ✅ 安全性增強:移除 innerHTML 安全風險,使用安全 DOM 操作
- ✅ 統一頁面初始化流程,減少程式碼重複提升維護性
- ✅ 完善向下相容性,自動識別舊版本資料格式
- ✅ 智慧型欄位顯示,空白欄位自動隱藏節省空間
- ✅ 優化 vCard 生成,包含手機號碼與格式化電話號碼
- ✅ 新增雙語版數位名片(中英文動態切換)
- ✅ 實作打字機效果問候語動畫
- ✅ 優化編碼格式,提升 40% 容量效率
- ✅ 新增雙語 vCard 生成功能
- ✅ 完善高齡友善設計,符合無障礙標準
- ✅ 導入專用高齡友善 CSS 檔案,優化雙語字體與間距
- ✅ 純前端 NFC 數位名片系統
- ✅ 隱私優先設計理念
- ✅ 支援機關版和個人版
- ✅ vCard 聯絡人檔案生成
- ✅ QR 碼分享功能
🎯 讓每一次交換名片都成為難忘的數位體驗!
🔒 隱私優先,資料自主,開源透明!