Sec-CH-UA 是什麼？取代 UserAgent 的新標準

上次提到了好用但又混亂的 UserAgent，以及它被公認的各項缺點，因此順便帶到了 Sec-CH-UA 這個 HTTP 標頭，是網路標準單位嘗試想要用來取代 UserAgent 的標頭，屬於 User-Agent Client Hints 協定下的一個功能。

考量到上一篇的篇幅已經很大了，所以夏格飛就獨立拉出一篇文章來介紹 Sec-CH-UA 吧 (天啊這個名稱還真難打)。

本文章目次

先認識 User-Agent Client Hints

User-Agent Client Hints 是現代化瀏覽器推出的一組 API，又稱為用戶端提示，用來標準化存取 UserAgent 內的資訊的介面。讓開發者不用再依賴各個實作方式不同的外部套件，而可以用一個標準、跨平台的寫法，就能正確的取得裝置、瀏覽器等資訊。

主要的實作都放置在 navigator.userAgentData 下面:

navigator.userAgentData.brands;
navigator.userAgentData.mobile;
navigator.userAgentData.platform;

// Get more data
navigator.userAgentData
  .getHighEntropyValues([
    "architecture",
    "model",
    "platform",
    "platformVersion",
    "fullVersionList",
  ])
  .then((ua) => {
    console.log(ua);
  });

/*
{
    "architecture": "x86",
    "brands": [
        {
            "brand": "Not)A;Brand",
            "version": "99"
        },
        {
            "brand": "Google Chrome",
            "version": "127"
        },
        {
            "brand": "Chromium",
            "version": "127"
        }
    ],
    "fullVersionList": [
        {
            "brand": "Not)A;Brand",
            "version": "99.0.0.0"
        },
        {
            "brand": "Google Chrome",
            "version": "127.0.6533.120"
        },
        {
            "brand": "Chromium",
            "version": "127.0.6533.120"
        }
    ],
    "mobile": false,
    "model": "",
    "platform": "Windows",
    "platformVersion": "15.0.0"
}
*/

詳細用法可以參考 MDN 文件或 Google 文件。不過 NavigatorUAData 這組物件目前(2024)支援度不高，請見 Can I Use。

認識 Sec-CH-UA

Sec-CH-UA 是以 HTTP 標頭 (header) 為主，它也屬於「User-Agent Client Hints」的範疇。雖然前面提到 NavigatorUAData 的支援度不高，但 Header 就不受影響了，隨時可以開始使用。

這個標頭提供了一種更靈活和隱私友好的方式，讓網站可以獲取有關用戶瀏覽器和裝置的資訊。他是用來取代傳統的 User-Agent 標頭，因為 User-Agent 標頭通常包含過多的用戶端資訊，可能會帶來隱私風險。相較之下，Sec-CH-UA 只會在需要時提供特定的信息。

Sec-CH-UA 的由來

Sec-CH-UA 及其相關的 HTTP Client Hints 是由Google 在 Chromium 瀏覽器項目中首先引入並推廣的，目的是改善隱私保護以及為網頁開發者提供更靈活的用戶端資訊請求方式。後來，則由 IETF（Internet Engineering Task Force）和W3C（World Wide Web Consortium）等標準制定組織進行規範和標準化，最終的標準叫做 IETF RFC 8942（Client Hints）。

使用方式

User-Agent Client Hints 需要先有一個 Accept-CH 的標頭，描述可接受的 UserAgent 標頭，從伺服器發送給使用者，然後才能開始使用。這是因為 Client Hints 的機制是基於「漸進式增強」的概念設計的。

注意， Client Hints 與 Header 都只會透過 HTTPS 發送。

Accept-CH

伺服器可以發送 Accept-CH 標頭來聲明它支援的客戶端標頭，這個做法稱為用戶端提示自動選取資源：

Accept-CH: Viewport-Width, Width

也可以用 Meta 標籤

<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />

有了這個預先宣告的要求後，瀏覽器就可以根據需求發送對應的 Headers

Viewport-Width: 460
Width: 230

為什麼需要 `Accept-CH` 才能發送 Client Hints？

隱私保護：Client Hints 以「按需提供」的方式工作，僅在伺服器明確要求時，瀏覽器才會發送這些額外的用戶端信息，這樣可以避免暴露過多的細節，從而提高隱私保護。
性能優化：因為僅在需要時才傳遞特定的 Client Hints，這減少了不必要的數據傳輸，從而提升性能。

哪些標頭一定要 AcceptCH 才能發送？

以下是一些常見的 Client Hints 標頭，需要通過 Accept-CH 來宣告才能被伺服器發送：

DPR: Device Pixel Ratio（設備像素比）
Viewport-Width: 畫面寬度（以 CSS 像素為單位）
Width: 客戶端的顯示寬度（以 CSS 像素為單位）
Save-Data: 用戶是否啟用了節省數據的模式
Device-Memory: 設備的內存容量（以 GB 為單位）

更詳細的名單可以看 MDN 的文件。

一開始進入網站時怎麼辦

前面提到，一定要有 Accept-CH 標頭，才能開始使用 Client Hints 標頭等資訊。那一開始進入網站時怎麼辦?

目前關於在首次進入網站就處理好 Accept-CH 的方案，各大巨頭都還在討論中，尚未有一致的結果，所以你至少要第二次呼叫網站頁面，才能取用使用者的裝置詳細資訊。

Google 建議企業在建置網站時，走「漸進式增強」的路線，讓使用者一步一步的同意你想要索取的個人資訊，而不是一進入網站就全部放送。

Sec-CH-UA 標頭

Sec-CH-UA 是一系列用來取代 User-Agent 的標頭，下面是一個典型的 Sec-CH-UA 標頭範例：

Sec-CH-UA: "Chromium";v="91", "Google Chrome";v="91", "Not A Brand";v="99"

這表明用戶使用的是基於 Chromium 的瀏覽器，具體是 Google Chrome 91 版。此外，它還標明了這個瀏覽器並不屬於其他任何品牌（Not A Brand），這是一個隱私保護的策略。

網站可以通過特定的資訊來根據用戶設備和瀏覽器版本調整其內容或功能。這些資訊通常以較簡潔的方式返回，例如瀏覽器名稱和版本，避免暴露不必要的細節。

另外，也可以更精確的編寫 Sec-CH-UA 的不同屬性，例如：

標頭	範例值	說明
`Sec-CH-UA`	`"Chromium";v="84","Google Chrome";v="84"`	瀏覽器品牌清單及其重要版本。
`Sec-CH-UA-Mobile`	`?1`	布林值，指出瀏覽器是否在行動裝置上 (`?1` 代表 true) 或否 (`?0` 代表 false)。
`Sec-CH-UA-Full-Version`	`"84.0.4143.2"`	[已淘汰]瀏覽器的完整版本。
`Sec-CH-UA-Full-Version-List`	`"Google Chrome";v="84.0.4143.2"`	瀏覽器品牌及其完整版本清單。
`Sec-CH-UA-Platform`	`"Android"`	裝置的平台，通常是作業系統 (OS)。
`Sec-CH-UA-Platform-Version`	`"10"`	平台或 OS 的版本。
`Sec-CH-UA-Arch`	`"arm"`	裝置的基礎架構。儘管這可能與顯示網頁無關，不過網站會需要提供預設格式的下載項目。
`Sec-CH-UA-Model`	`"Pixel 3"`	裝置型號。
`Sec-CH-UA-Bitness`	`"64"`	基礎架構的位元程度 (即整數或記憶體位址的大小，以位元為單位)

詳細請見

Chrome 自動發送的 Sec-CH-UA

一些非關隱私的 Sec-CH-UA 是可以一開始就發送的，不需要透過 AcceptCH 同意。自 Chrome 89 以後，所有網站則都會自動發送以下幾個預設的 Sec-CH-UA 標頭

Sec-CH-UA: "Chromium";v="93", "Google Chrome";v="93", " Not;A Brand";v="99"
Sec-CH-UA-Mobile: ?0
Sec-CH-UA-Platform: "macOS"

下面這些 Sec-CH-UA 標頭，它們在標準行為中不需要 Accept-CH 宣告就能被伺服器發送：

Sec-CH-UA: 提供用戶代理的基本信息（例如品牌和版本）。
Sec-CH-UA-Mobile: 指示用戶代理是否在移動設備上運行。
Sec-CH-UA-Platform: 提供用戶代理的操作系統平台信息。
Sec-CH-UA-Platform-Version: 提供用戶代理的操作系統平台版本。
Sec-CH-UA-Arch: 指示用戶代理的處理器架構。
Sec-CH-UA-Model: 提供用戶代理設備的型號（如果可用）。

流程範例

總結一下前面提到的流程，我們做個範例展示。一開始，首次進入頁面，Chrome 會先發送基礎的 UA 資訊給伺服器

GET /downloads HTTP/1.1
Host: example.site

Sec-CH-UA: "Chromium";v="93", "Google Chrome";v="93", " Not;A Brand";v="99"
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Platform: "Android"

接著伺服器回應 (Response)，包含了一個 Accept-CH

HTTP/1.1 200 OK
Accept-CH: Sec-CH-UA-Full-Version-List

瀏覽器授予伺服器存取附加資訊的權限，並在所有後續請求中發送回額外的提示。

GET /downloads/app1 HTTP/1.1
Host: example.site

Sec-CH-UA: " Not A;Brand";v="99", "Chromium";v="98", "Google Chrome";v="98"
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Full-Version-List: " Not A;Brand";v="99.0.0.0", "Chromium";v="98.0.4738.0", "Google Chrome";v="98.0.4738.0"
Sec-CH-UA-Platform: "Android"

這裡可以用自己的瀏覽器玩玩看標頭或 JS 的 API。

結論: 為什麼 Sec-CH-UA 很重要？

Sec-CH-UA 及其他 Client Hints 是為了提高用戶隱私和安全，避免像 User-Agent 標頭一口氣就丟出所有資訊，可能暴露的過多使用者隱私。它提供了一種更細緻的控制方式，讓開發者可以選擇性地請求需要的資料，而不是一股腦地暴露所有資訊。

要注意的是，雖然標準已經通過，但是瀏覽器上面實作的 Client User Hints 與 Sec-CH-UA 都還是實驗狀態，未來有機會變更實作方式或 API。所以使用時還是盡量謹慎。不過，作為一個 UserAgent 的替代機制，目前算是很完整了。

我們會繼續介紹更多網站設計與技術新知，如果您想收看更多新知，歡迎追蹤夏格飛 - Threads | Facebook