[轉職IT必修課] 瀏覽器原理：你用瀏覽器輸入網址後，背後發生什麼事？DNS、三方交握、加密通訊等概念簡介

東東 — Fri, 04 Oct 2024 08:09:37 +0000

當你在瀏覽器 (如 Chrome 或 Safari) 輸入網址時，系統在背後會發生以下動作：

一、在本地端解析網網域名稱

你輸入的網址 (如 www.bytebytego.com) 電腦是看不懂的，

需要轉換成電腦能理解的地址，也就是 IP 位址 (如172.67.73.33)。

瀏覽器首先會在不同的「快取」(cache，是暫時儲存資料的地方) 中尋找：

• 瀏覽器自己的快取

• 電腦作業系統的快取

• 本地網路 (你家、辦公室或學校) 的快取

• 網路服務商 (ISP) 的快取

快取的內容到底包含什麼東西呢？

就像是一本通訊錄，記錄著網址和 I P位址的對應關係。

如果這些地方都找不到，就會向DNS (網域名稱系統，像是網路世界的電話簿) 詢問。

二、向外查詢 IP 位址

DNS 系統包含多個 DNS 伺服器，它們會互相詢問，直到找到正確的IP位址。

詢問的順序如下：

1. 你的設備會詢問本地 DNS 解析器。

像中華電信的DNS 解析器 IP 為 168.95.1.1、168.95.192.1，

Google 的 DNS 解析器 IP 為 8.8.8.8 和 8.8.4.4。

2. 如果本地解析器沒有答案，它會詢問根網域伺服器。

根網域 (Root Domain) 伺服器是網際網路 DNS 層級結構中最高層級的 DNS 伺服器，

它們儲存所有頂級網域（如 .com、.org、.net 等）的 DNS 伺服器資訊。

DNS 名稱解析
圖片來源：https://www.bytebytego.com/

3. 根伺服器會指引到相應的頂級網域伺服器。

當根伺服器收到查詢時，它們會指向適當的頂級網域伺服器 (Top-Level Domain Server)，

根網域伺服器不直接知道 bytebytego.com 的 IP 地址，

但它知道 .com 頂級網域伺服器的位置。

根伺服器會說：「我不知道 www.bytebytego.com 的 IP，

但我知道負責 .com 的伺服器在哪裡，去問問它們吧。」

4. TLD 伺服器會指引到負責特定網域的權威網域伺服器

權威網域伺服器 (Ahthoritative Name Server) 管理的，

這通常是由該網域所屬公司 (例如：bytebytego)，

或其選擇的 DNS 服務提供商 (例如可能是 Namecheap) 來維護。

這個過程叫做「遞迴 DNS 查詢」，就像是在多個部門間傳遞訊息，直到找到答案。

三、建立連線並發送請求

知道 IP 位址後，瀏覽器就會向該位址發送請求。

為了安全，現在大多使用 HTTPS 協定，你會在網址前看到一個小鎖頭圖示。

像是這樣 (現在要點開才能看到鎖頭)：

在網址前看到一個小鎖頭圖示
圖片來源：擷圖自 Chrome 瀏覽器

建立安全連線的過程包括：

1. TCP 三方交握 (像是在握手確認彼此身份)

a. 第一次握手

客戶端(也就是瀏覽器)：「嘿！伺服器，你在嗎？我想和你說話！」

技術上：客戶端發送一個 SYN（同步）封包。

b. 第二次握手

伺服器：「嗨客戶端！我在這兒。你能聽到我嗎？」

技術上：伺服器回應一個 SYN-ACK（同步-確認）封包。

c. 第三次握手：

客戶端：「太好了，我聽得很清楚。讓我們開始聊天吧！」

技術上：客戶端發送一個 ACK（確認）包。

現在，雙方都確認可以聽到對方，建立了連結。

2. 交換加密金鑰 (像是交換只有雙方知道的密碼)

這就像兩個人想秘密交談，但擔心周圍有人偷聽：

a. 伺服器出示證書：

伺服器：「看，這是我的身份證（SSL證書）。你可以相信我。」

這個證書包含伺服器的公鑰。

b. 客戶端驗證證書：

客戶端檢查證書是否有效，就像檢查身份證的真偽。

c. 客戶端生成會話金鑰 (Session Key)：

客戶端：「好的，我相信你。我們來用這個特殊的密碼本吧。」

客戶端創建一個隨機的會話金鑰（相當於密碼本），指的是加密的方法。

d. 加密傳送會話金鑰：

客戶端用伺服器的公鑰加密會話金鑰。

就像把密碼本放在只有伺服器能打開的盒子裡。

e. 伺服器解密會話金鑰：

服務器用自己的私鑰打開”盒子”，獲得會話金鑰。

f. 開始加密通訊：

雙方：「太好了，現在我們可以用這個特殊的密碼本安全地交談了！」

之後的所有通信都用這個會話金鑰加密。

這確保了你和網站之間的通訊是加密的,別人無法竊聽或篡改。

建立通訊
圖片來源：https://www.bytebytego.com/

四、處理回應

(一) 網站回應 (Response)

網站伺服器收到請求後，會處理並發送回應。

回應通常包含三部分：

1. HTML (網頁的基本結構)

就是告訴瀏覽器：

這裡放個標題，那裡放段文字，這邊擺張圖片。

它就像是在紙上畫房子的平面圖。

2. CSS (控制網頁外觀)

CSS就是告訴瀏覽器：

這個標題要大一點、藍色的；

段文字要靠右邊、加個底線。

它就像是一個裝潢師，負責讓整個網頁看起來漂亮。

3. JavaScript (控制網頁行為)

JavaScript讓網頁變「聰明」了，它能理解你的操作並作出反應。

比如，你在購物網站點了「加入購物車」，

不需要重新載入整個頁面，購物車的數字就會立即更新，

這就是JavaScript在工作。

處理回應
圖片來源：https://www.bytebytego.com/

(二)、瀏覽器動作

瀏覽器接收這些資料後，會進行以下步驟：

1. 解析 HTML 生成 DOM 樹 (Document Object Model Tree)

DOM 樹就是這個網頁的組織結構，它顯示不同元素之間的關係，

第一層是網頁的標籤，

第二層是標籤，

第三層是

或其他容器標籤。

DOM 樹就是將網頁結構變成瀏覽器能理解的格式。

DOM 樹
圖片來源 Claude 生成

2. 解析 CSS 生成 CSSOM 樹

CSSOM 樹（CSS Object Model Tree）是與 DOM 樹相對應的另一個重要概念。

CSSOM 樹是瀏覽器對網頁所有 CSS 樣式的內部表示。

它與 DOM 樹平行存在，共同決定網頁的最終呈現。

簡單說就是，將樣式資訊轉換成瀏覽器能理解的格式。

CSSOM 樹
圖片來源 Claude 生成

3. 結合 DOM 和 CSSOM 生成渲染樹 (Render Tree)

渲染樹是用來決定每個元素應該如何顯示

就像是在精心策劃一場時裝秀，

將「誰要出場」(DOM) 和「穿什麼衣服」(SSSOM) 的訊息結合起來，

形成一個清晰的「演出計劃」。

4. 根據渲染樹繪製網頁

如前段的「演出計劃」，告訴瀏覽器究竟該在螢幕上畫出什麼，怎麼畫。

這個過程看似複雜，但瀏覽器都自動完成了，

讓我們能夠看到美觀且功能完整的網頁。

就是讓瀏覽器把網頁畫出來給你看的意思。

這整個過程通常在幾秒內完成，

涉及網路通訊、資料加密、以及複雜的瀏覽器渲染機制。

雖然背後技術複雜，但對使用者來說，

只是輸入網址後稍等片刻，網頁就呈現在眼前了。

The post [轉職IT必修課] 瀏覽器原理：你用瀏覽器輸入網址後，背後發生什麼事？DNS、三方交握、加密通訊等概念簡介 first appeared on 東東 GCP 教學 - GCP 實戰講師.

基本 IT 知識學習資源整理

東東 — Thu, 25 Jul 2024 03:28:59 +0000

如果你想轉職成為雲端架構師，

但是你沒學過 IT 基礎知識，

例如 DNS、TCP/IP、Web Server 等，

可以先看一下這些影片，

先用輕鬆的方式體驗一下，

同時確認你是否看得下去 (確認你是不是真的有決心)，

我這邊就列一點點，各你參考看看，

你先可以挑有興趣的看，不用給自己壓力全部都要會。

網路基礎：

Linux 操作：

DNS 概念：

前端、後端、資料庫：

如果資料庫要學更完整：

如果想要寫程式可以先看這影片：

這邊要補充，要進資訊產業當工程師，不是只有軟體工程師，

還有 MIS、網路管理、資料庫管理 (PM)、系統工程師、DevOps 工程師等等，

所以我才把寫程式放後面一點，

怕大家想到 IT 就以為是要寫程式。

放輕鬆看喔，看不懂就多看幾遍，

當你看完影片，覺得可以適應這些 IT 術語，

可以再評估是不是真的要找個專業的課程來上，

才不會太早就花了冤枉錢喔！

The post 基本 IT 知識學習資源整理 first appeared on 東東 GCP 教學 - GCP 實戰講師.

IT基礎 - 東東 GCP 教學 - GCP 實戰講師