iT邦幫忙

2025 iThome 鐵人賽

DAY 18
0
生成式 AI

30 天 Vibe Coding:全端 × 機器學習的實作挑戰系列 第 18

Day 18|30 天 Vibe Coding:日記是要跟我進墳墓的,誰都不能看

  • 分享至 

  • xImage
  •  

昨天完成了 Email 提醒,但日記這東西本質上很私密,有些內容甚至可能「不想任何人知道」。
所以今天的任務就是 隱私與安全。不只是「只有自己帳號能看自己的日記」,還要考慮萬一資料庫真的外流,也不能讓別人一眼看懂。

因此我分成兩部分來做:

  1. Firestore Rules:帳號隔離
    這個規則是基本功:
match /users/{uid}/diaries/{docId} {
  allow read, write: if request.auth != null && request.auth.uid == uid;
}

意思是:只有登入、而且 UID 符合的人,才能存取自己資料夾下的日記。

  • 登出後 → 嘗試進到 /diary 頁面 → 被導回登入畫面 ✅
  • 用另一個 Google 帳號登入 → 嘗試讀取他人的日記 → 403 Forbidden ✅
    這樣就保證了「不同帳號無法讀取彼此資料」。
  1. 本地加密(Client-Side Encryption)
    Firestore 本身是「明文存放」,如果有人拿到 Service Account key,仍然可以看到你的日記。
    為了進一步保護隱私,我加了一層簡單的 AES 加密:
  • 存日記時 → CryptoJS.AES.encrypt(content, userSecret)
  • 顯示日記時 → CryptoJS.AES.decrypt(cipher, userSecret)

Firestore 裡存的是一串密文,例如:U2FsdGVkX1+oHRzKfygZlGf...(很長一串)
前端照樣可以正常顯示「今天在圖書館熬夜到 3 點」
問題是「金鑰」怎麼管理?如果金鑰只是寫死在程式碼裡,那還是等於明文
更好的做法是:金鑰來源可以是使用者的密碼、或一組在 localStorage 的隨機字串,不會上傳到雲端


今日目標

  1. 設定 Firestore Rules,限制只有本人能存取日記
  2. 新增本地加密:日記存進 Firestore 前先加密,讀取時再解密
  3. 確保 UI 正常顯示,後端資料則是密文

Prompt

幫我在情緒日記 App 加上「隱私與安全」功能。

=== 功能需求 ===
1. Firestore Rules
   - users/{uid}/diaries/{docId}
   - 只有 auth.uid == uid 才能讀寫

2. 本地加密
   - 使用 CryptoJS 或類似函式庫
   - 存日記:AES 加密(key 可暫用使用者 uid)
   - 讀日記:AES 解密
   - Firestore 裡存密文,前端顯示明文

今日驗收 ✅

  1. 不同帳號無法讀取他人日記
  2. Firestore 裡存的是加密內容
  3. 前端顯示正常,使用者無感
    https://ithelp.ithome.com.tw/upload/images/20250907/201409982Ulvu67CKK.pnghttps://ithelp.ithome.com.tw/upload/images/20250907/20140998HjrwCxdacZ.png

明日預告

Day 19 要來做 匯出/匯入(JSON/CSV)!這樣不僅能把所有日記備份下來,也能在需要時重新匯入,讓資料更有掌控感


理論上 Day21 才會提部署,但我先嘗試把作品掛上去了/images/emoticon/emoticon25.gif
霓的情緒日記 歡迎點進去玩玩!
有什麼想法或建議都歡迎跟我說~(拜託不要攻擊我小小的網站 QQ)


上一篇
Day 17|30 天 Vibe Coding:做了寫日記網頁結果每天都忘記
下一篇
Day 19|30 天 Vibe Coding:日記不只要寫,還要能帶走
系列文
30 天 Vibe Coding:全端 × 機器學習的實作挑戰21
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言