HTTP 和 HTTPS 背後的秘密，為什麼你的個資會被駭客盯上？
網頁上的「不安全」警告
相信大家在瀏覽網頁的時候，應該曾經有遇過這樣警示的網站。
上面大大的寫著「不安全」，看著就讓人感到不安。這時候我們會下意識關閉網頁，深怕遇到什麼不好的事。但大家有沒有想過，所謂「不好的事」到底是什麼事？而這其中大有文章，聽完我說完，希望幫助你更了解網路的世界。
瀏覽器是怎麼和伺服器「溝通」的？
要解釋這個「不安全」警語，必須先從最基礎的原理開始，就是「瀏覽器是怎麼和伺服器溝通的？」
市面上的瀏覽器不外乎有谷歌的 Chrome、微軟的 IE、蘋果的 Safari，這些都是大家耳熟能詳的瀏覽器。那什麼是伺服器？你可以把伺服器想像成是一台存放在遠方機房裡的主機，它全天候開機、準備好隨時回應我們的請求。當我們在瀏覽器輸入網址後，就會向遠端的伺服器發送請求，跟它要到資料，並渲染在瀏覽器上。
流程簡化後是長這樣：
瀏覽器輸入網址 → 發出請求 → 跟伺服器拿資料 → 呈現在畫面上
說完大綱，那接下來要進入更細節的講解咯～
那具體瀏覽器和伺服器是怎麼溝通的？用什麼溝通？溝通的細節是什麼？這時候就要提到一個協議：TCP/IP。
TCP 的歷史與一群大佬訂的協議
你有沒有想過，網際網路到底是怎麼來的？又是誰決定電腦該怎麼互相溝通的？
其實，最早可以追溯到 1970 年代，美國國防部的 ARPA（高等研究計畫署）開發了一套叫做 TCP/IP 的傳輸協定，它讓不同電腦能夠透過網路彼此傳送資料。這個協定簡單又實用，後來逐漸取代了理論上更完整但過於複雜的 OSI 七層模型，成為了現代網路的主流標準。
而透過 TCP 傳輸的資料，也包含網頁內容所使用的語言，比如 HTML、CSS、JavaScript 等等
那為什麼不同家的瀏覽器，卻都能使用同一種程式語言？這就跟另一個協會有關 — — W3C（全球資訊網協會）。
你可以把它想像成一群德高望重的人，他們負責制定像 HTML、CSS 這些語言的使用規範。等他們定義出這些標準後，就會發表出來。這時候，Chrome、Safari、IE 等等的瀏覽器就會選擇要不要跟上，並在後續根據 W3C 發布的標準去更新自己的瀏覽器。
但要完全跟上這些標準並不容易，因為背後會牽涉大量程式碼改動。這也是為什麼 IE 常常不支援某些語法，因為它更新慢、落後 W3C 的進度。但像 Chrome、Firefox 就更新得很快。但也會出現 W3C 發表的標準太困難，導致連 Chrome 都拒絕跟上的情況。
瀏覽器與伺服器的你儂我儂
大家理解 TCP 的由來後，我們來看看它具體是怎麼傳輸資訊的
當我在瀏覽器輸入網址時，會發出請求到遠方的伺服器。大家可以把它想像成通電話，而 TCP 協定就是規範這次「通話」的規則：
1. 瀏覽器先問：「聽到我說話嗎？」（SYN）
2. 伺服器回應：「可以喔～」（SYN/ACK）
3. 瀏覽器最後確認：「好，那我準備傳資料給你」（ACK）
這三次的對話，確保了瀏覽器與伺服器成功建立了穩定的連線。只有完成這個步驟後，瀏覽器才能正式開始請求網頁資料，而伺服器也才能回應內容。這個過程，就叫做「TCP 三向交握」（Three-Way Handshake）。
透過 TCP 傳了什麼？
當瀏覽器和伺服器「通話」後，開始向伺服器請求並傳輸資料。我們可以用一款網路封包分析工具「Wireshark」，來幫忙攔截、檢視、分析網路上傳輸的數據，它通常幫助工程師和資安人員了解網路流量的細節。
操作細節就不一一講解，不然會搞得大家很混亂。
軟體打開後是長這個樣子：
再操作之前，我已經打開了一個網頁，攔截了瀏覽器和伺服器通話過程中所有的文件，而大家看到這些密密麻麻的數字或許會覺得頭很大，老實說我其實之前也是有看沒有懂，但現在我來一一為大家講解瀏覽器背後秘密，等等也會揭曉為什麼有些網址會這麼的「不安全」。
在進入細節講解前，這邊先補充一個小知識點：
你看到的那些數字，其實都是網路傳輸中的資料，而這些資料都是以「封包」的形式進行傳輸，每個封包的大小限制為 1500 bytes。
舉個例子，如果是一張 15KB（15,360 bytes）的圖片，就會被拆分成大約 10 個封包來傳送。因此在圖示中，我們就會看到大約 10 筆資料的紀錄，這就是為什麼會出現那麼多行數字的原因。
而為了讓大家好理解，我幫大家標示了每筆資料所代表的意思：
· 當 TCP/IP 三向交握完成後 ——（圖中紅色標示）
· 瀏覽器會透過所謂的 HTTP（瀏覽器與伺服器的溝通協議）發送 GET 請求（從伺服器請求資料的方法）將User的資料傳送到伺服器 ——（圖中藍色標示）
· 瀏覽器與伺服器彼此確認收到請求，並為後續傳送資料做準備 ——（圖中橘色標示）
· 伺服器回狀態應200 OK（代表請求成功），並送出資料 ——（圖中綠色標示）
· 這時候瀏覽器在檢視程式碼時發現「啊～還有個CSS連結」，這時候會再次傳送另個 HTTP 請求 CSS 的封包檔案 ——（圖中紫色標示）
· 藉由不斷的來回傳送封包，一步步完整網頁
· 當一切都傳輸完畢，就會經由「 TCP 四次揮手」終止連線（可以想像成最後在通話中說再見）
由此一來，當所有封包傳送完畢，一個完整的網頁就渲染在你面前。
進入重頭戲：HTTP 和 HTTPS 的差異
這時候，你可能會驚訝：「所以我打開網頁，這所有的封包資料都會曝光？會不會有什麼駭客把它攔截，我的個資不就被看光光了？」
還真是這樣，所以有些網頁才會警示「不安全」。
這時候就要講到 HTTP 和 HTTPS 的差異，我們剛剛所演示的都來自一個 HTTP 的網頁內容
注意到了嗎？一個開頭是 http，另一個則是 https
HTTP 不安全的原因，就在於它少了一個字母「S」。
而這個「S」，其實就是代表多了一層 SSL 加密。只要 HTTP 添加了 SSL 協議，就會變成安全的 HTTPS。你可以想像成，在 HTTP 與 TCP 協定之間額外加入了一層 SSL 憑證（用於加密瀏覽器與伺服器之間的通訊），它為整個封包加密，所以駭客即使攔截到封包，也很難破解其中內容。
相反地，如果你是在沒有 SSL 加密的網站（也就是 HTTP 網站）上輸入個人資訊或信用卡帳號，這些敏感資料就可能被駭客輕易攔截並看光光。
這邊給大家看加密後的 HTTPS 所呈現的封包狀態：
你會發現原本的 HTTP 消失了，之後的流量變成 TLS 加密的 Application Data，所以是安全的。
那麼，SSL 憑證該如何取得呢？它其實可以透過購買得到。
像 GoDaddy 這種全球最大的網域註冊與網路服務商，也都有提供 SSL 憑證的購買服務。
但其實市面上也有免費的 SSL 憑證，比如 Cloudflare 就有提供免費的。
那你可能會好奇，這憑證長什麼樣？要怎麼安裝？
這邊來個簡單的講解，當你購買了 SSL 憑證，你會獲得：
· yourdomain.crt（憑證檔案）
· yourdomain.key（私鑰檔案）
· ca_bundle.crt（中級憑證）
安裝步驟：
1. 把憑證檔案放進伺服器上的指定文件夾。
2. 修改伺服器設定，讓程式碼「導向」這些憑證檔案。
3. 重啟伺服器，即可成功轉換成 HTTPS。
總結：
這樣寫完，其實真的講了不少內容。我盡量用白話、輕鬆的方式來解釋，主要也是希望自己能更清楚地掌握這些底層邏輯。
雖然這些觀念看似跟寫程式沒什麼直接關係，但了解這些基本關鍵其實很重要。這些觀念可以讓前端工程師跟後端協作時更順利，也希望大家看完後都能有些收穫～（累死…）