yishiashia's Blog

Photo by [Johannes Plenio](https://unsplash.com/@jplenio) on [Unsplash](https://unsplash.com/)

網頁深色模式與 CSS 相關屬性

介紹現代人由於工作、娛樂目的而長時間使用像是手機、電腦等 3C 產品，時間久了往往會造成眼睛疲勞不適，因此現在的網頁或 APP 介面往往會提供深色模式或是夜間模式，除了可以減少裝置電量的消耗，也可以減少光線對眼睛的刺激。因此在前端網頁上實作亮色、深色模式也變成了提升使用者閱讀體驗所不可缺少的設計之一，因此，以下我們將說明如何透過 CSS 原生的 color-scheme 屬性來建置同時支援亮色 / 深色模式的網頁。使用者代理樣式表 (User agent stylesheet) 使用者代理樣式表 (或有人翻譯作瀏覽器預設樣式表)，為瀏覽器針對原生 html 元件像是文字、輸入框或按鈕等預設的樣式。以下我們撰寫了一個簡單 html 頁面，其中包含了一個 <h1> 元件: 1 2 3 4 5 <html lang="en"> <body> <h1>hello</h1> </body> </html> 在 Edge 瀏覽器中打開後，使用 devtool 觀察樣式可以看到下列的樣式，這個就是套用了瀏覽器預設的樣式表中關於 <h1> 元件的樣式。 1 2 3 4 5 6 7 8 9 h1 { display: block; font-size: 2em; margin-block-start: 0.67em; margin-block-end: 0.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; } 除了對於各個 html 元件提供預設的樣式表之外，現在的主流瀏覽器也提供各元件在深色模式下的樣式表，而我們可以透過 color-scheme 來啟用它。...

Photo by [regularguy.eth](https://unsplash.com/@moneyphotos) on [Unsplash](https://unsplash.com/)

使用 WebAuthn 實作無密碼驗證與 Passkey 介紹

Google、Apple、微軟及數百間科技公司或服務商在今年 (2022) 不約而同的表態支持 FIDO 聯盟與 W3C 所主推的通用無密碼登入標準 (common passwordless sign-in standard)，希望能透過例如指紋、Face ID等認證手段替代原本的密碼登入機制，提供用戶在網頁登入時一個更安全、防網路釣魚、即時交易驗證的登入方式。 Google 在今年10月上旬宣布在 Android 及 Chrome 導入 Passkey 無密碼認證機制，而 Apple 也將在 iOS 16 和 macOS Ventura 引入 Passkey ，透過掃描 QR Code 加上藍芽或其他裝置通訊技術，讓你可以透過手機的 Touch ID 或 Face ID 就可以登入你所有的電腦、平板等裝置。下面我們會先說明需要使用密碼跟無密碼認證使用的場景，再深入介紹實務上使用 FIDO2 進行註冊與認證 (含範例程式)，最後再總結 FIDO2 / WebAuthn 與 Passkey 的關係。通常需要用到 ”密碼” 或 ”認證” 的場合，像是在電商網站買東西、下訂單最後要結帳的時候會請你輸入帳號、密碼做登入(不登入的話也可能會要求你透過手機簡訊驗證碼做實名制驗證)，可以用以確保您在真實世界的身分。在資訊安全的領域中，不管是帳號密碼或是手機簡訊驗證碼的驗證，都是屬於挑戰回應(Challenge/Response) 的方法。挑戰回應的方法具體來說，是指由正在溝通的兩方其中之一發起一個挑戰 (Challenge)，而另一方提供一個正確可被驗證的合法答案 (Response)。最常見的使用情境就是使用密碼驗證，比方說在電商網站購物前送出訂單之前請買家在網頁上再輸入一次密碼，如果密碼正確 (Valid response) ，則可以確認是由本人進行的操作。但使用密碼作為驗證手段所衍生出的資安議題非常多，比方說網站管理者可能為了安全性而要求用戶使用的密碼複雜度必須足夠，但過於複雜的密碼常常會讓使用者記不起來，所以就寫在便條紙、記在手機備忘錄或存在檔案中，造成密碼洩漏的問題，而這也是 Apple, Google 及 Microsoft 三大廠商都主推無密碼認證的原因之一。...

Photo by [Towfiqu barbhuiya](https://unsplash.com/@towfiqu999999) on [Unsplash](https://unsplash.com/)

簡易密碼學介紹

在早期，密碼學(Cryptography)是泛指隱藏訊息(hiding information)的方法，背後相關的知識包含數學、電腦科學(Computer science)及工程學等等，但時至今日，密碼學除了隱藏訊息之外，也同樣注重資訊安全屬性中的資訊完整性與不可抵賴性。資訊完整性可透過驗算訊息驗證碼(如雜湊值或 checksum 等)來確認訊息沒有被人竄改過，而不可抵賴性則可以透過數位簽章的方式來驗證，下面來詳細說明。加密演算法介紹加密演算法是指訊息交換的雙方透過約定的密鑰(key)對訊息加密，原始的訊息(明文，plaintext)經過加密後會變成密文(cyphertext)，密文只有透過密鑰才可以還原回可閱讀的明文，因此可以放心透過網路或其他方式進行傳輸。根據密鑰的特性一般可分作對稱式加密演算法及非對稱式加密演算法，非對稱式加密演算法是指訊息傳遞者會產生一對公鑰(public key) 及私鑰(private key)。 1. 對稱式加密演算法訊息交換雙方共享一組密鑰(key)，這密鑰就相當於兩人共享的秘密(shared secret)，沒有第三者知道。當訊息要由A君傳送給B君時，A君會使用共享的密鑰對訊息進行加密，然後將加密後的密文傳遞給B君，B君再透過兩人共享的密鑰對密文進行解密，就可以取得明文的內容。目前常見的對稱式加密演算法有一般網頁瀏覽時SSL/TLS加密使用的AES加密演算法，在 SSL/TLS handshake 時，瀏覽器跟網站伺服器間會協商出一個本次瀏覽期間使用的共享密鑰，在這次瀏覽期間使用的網頁封包都會透過這組密鑰進行加密。 2. 非對稱式加密演算法明文透過公鑰加密變成密文後，需要透過對應的私鑰進行解密才能還原回明文；相反的，如果明文是透過私鑰進行加密變成密文，則需要透過對應的公鑰進行解密才能還原成明文。圖片來源: 維基百科而公私鑰的保存依照字面上的意思，私鑰需要由訊息傳遞者自己保存好，不能被別人知道(用以確保訊息是本人發送)，而公鑰顧名思義則是需要公開給所有人知道，一般的應用會透過可信任的第三方來保管所有訊息傳遞者的公鑰，比如政府的自然人憑證或健保卡憑證都是由政府建置所謂的公開金鑰基礎建設 (英語：Public Key Infrastructure，縮寫：PKI)，透過 PKI ，我們就可以取得使用者的的公鑰來解密訊息。而上面我們提到非對稱式加密演算法的加解密特性與公私鑰的保管性質，就可以進行數位簽章(確保是本人) 與訊息保密的動作。數位簽章：透過私鑰對訊息進行加密後傳送，所有人都可以透過在PKI取得訊息傳遞者的公鑰，如果解密可以成功就代表是本人傳送的(因為私鑰只有本人有)。訊息保密：如果我們今天要傳遞訊息給特定的使用者A君，然後希望其他人都無法知道訊息的內容，則可以透過 PKI 取得 A君的公鑰，對訊息加密後進行傳輸，儘管訊息傳遞過程中間的人(比方説郵差)有經手這則訊息，但因為對應的私鑰只有A君本人有，所以郵差先生就無法解密而得知訊息的內容。結語密碼學在現代資訊安全中扮演著關鍵角色，從日常的網頁瀏覽到電子商務交易，都離不開密碼學的應用。透過本文的介紹，我們了解到：密碼學不只是單純的訊息隱藏，還包含了確保資訊完整性與不可抵賴性的重要功能對稱式加密演算法適合用於需要高效能的場景，如 SSL/TLS 連線加密非對稱式加密演算法則在數位簽章和安全通訊等應用場景中發揮重要作用 PKI（公開金鑰基礎建設）為數位世界提供了可信任的身分驗證機制理解這些基礎概念對於開發安全的應用系統至關重要。雖然現代密碼學涉及複雜的數學理論，但其核心概念和應用場景是每個開發者都應該掌握的基礎知識。在這個資訊安全日益重要的時代，持續學習和理解密碼學知識，將有助於我們開發更安全、更可靠的系統，為用戶提供更好的保護。

Photo by [Scott Graham](https://unsplash.com/@homajob) on [Unsplash](https://unsplash.com/)

使用 indexedDB 離線儲存圖片

緣起由於最近碰到要在負責的網頁式聊天機器人中，新增如同Line聊天室的貼圖功能，可想而知會有大量的貼圖圖片會需要在用戶裝置瀏覽器進行下載，不管是對圖片伺服器或是用戶等待的過程來說都是不小的負擔。為了解決這個問題，透過使用了 PWA (Progressive Web App) 技術中常用的離線儲存方案 indexedDB 來快取貼圖圖片，不僅減少用戶端與網站伺服器端的連線流量，也提升的用戶體驗(UX: User Experience) 。 Service Worker Service Worker是一個事件驅動的網站 Worker，根據不同的來源 (origin) 與網址路徑 (path) 進行註冊後，之後再次訪問同一網站後即會在背景執行這個 Service Worker。 Service Worker 無法直接存取 DOM 物件，他負責監聽和處理像是 fetch, notification(推播), sync 還有 Service Worker 註冊、啟動等相關事件。透過處理上述事件，我們可以讓 web 網頁像一般的手機原生 App 一樣可以執行安裝、發送推播、離線瀏覽及連線後同步等等作業。離線儲存常見的Ｗeb 儲存方案有下面幾種: Cookie LocalStorage Cache (precache) indexedDB 一般 SPA (Single Page Application) 中比較常用的是 Cookie 跟 LocalStorage 兩種儲存方法，不過在使用上都會有大小的限制（無法儲存較大的網站資源），像是 LocalStorage 的限制依照瀏覽器不同會落在大約 2MB ~ 10MB 左右，超過後就會發出Error。而在 PWA 的離線儲存上通常會使用 Cache(precache) 或 indexedDB 來實作，它們的大小通常跟使用者裝置的 disk 空間有關係，以 Chrome 為例，所有網站可以用的共享儲存空間為硬碟可用空間的1/3, 每個網站 App 可以使用共享空間中的 20%。...

Photo by [Markus Winkler](https://unsplash.com/@markuswinkler) on [Unsplash](https://unsplash.com/)

使用 CoreDNS 自建 DNS Server

這陣子在研究自行建設 Postfix Mail Server，發現要架設一個 Mail Server 沒有想像中的容易，除了需要透過 DNS 記錄設定網域的 A 記錄、 MX 記錄之外，另外需要 DNS 設定 SPF, DKIM, DMARC 等安全性設定。在設定的過程中很快的遇到了瓶頸，一般的網域服務諸如 HiDomain、GoDaddy 等平台都有代管 DNS 記錄的上限，像我使用的 HiDomain 就有最多設定 20 筆記錄的上限，因為在不同專案已經註冊了許多子網域，這次要架設一個 Mail Server 時我很快就碰到了 DNS 記錄的代管上限，後來決定使用在 Kubernetes (k8s) 中經常使用的輕量 DNS Server CoreDNS 來自建 DNS Server。關於 CoreDNS CoreDNS 是雲原生運算基金會 (Cloud Native Computing Foundation, 簡稱 CNCF)的一項專案，並於 2019 年畢業。 CoreDNS 主要使用 Go 語言實做，所以可以安裝於不同平台並且相當輕量不會佔用太多系統的資源，同時在設定上非常簡單，透過使用 corefile ，可以很簡單的引入各種 plugin，很大程度地減少設定上的複雜度，接下來就實際進入安裝與使用的介紹。安裝 CoreDNS 官網上提供了三種安裝方式， Binaries 、 Source 及 Docker。 Binaries 是已經預先編譯好的可執行檔，可以透過官方的連結去下載使用。...

Photo by [Joanna Kosinska](https://unsplash.com/@joannakosinska) on [Unsplash](https://unsplash.com/)

使用 CSS Variables 切換前端主題(Theme)

前端專案時常需要進行主題(Theme)切換，比方說現在最常見的 light/dark mode 主題切換。本文將介紹如何透過 CSS Variables (或 CSS Custom Properties) 及 HTML root element 上的屬性控制前端網頁的主題切換。 CSS Variables (或 CSS Custom Properties)是 CSS3 的新功能，讓您可以不用透過SASS、SCSS等預處理語言即可在原生 CSS 語法中使用變數，讓 CSS 語法也可以達到 Clean Code。 1 2 3 4 5 6 7 8 9 10 11 :root { --primary-color: blue; } p { color: var(--primary-color); } h1 { color: var(--primary-color); } ▲範例：透過 CSS Variable 指定主題色彩的顏色上面是一個簡單的範例，透過一個 –primary-color 的變數指定主題色彩，並套用到網頁中不同元的的樣式之中，未來要修改主題色時，只需要更新該變數，就可以一次性切換頁面中元件(如範例中的與標籤)的主題色，而不用一項一項的修改 CSS 樣式。 Theme 主題切換從前面的說明中可以得知，宣告 Theme 相關的 CSS Variables 時通常會將變數的定義寫在 :root 的區塊中讓全域的 element 元件都可以取用，這意思就是說 CSS 變數需要定義在 document....