Signed Exchange (SXG)

SXG 是一種提交機制，可不受資源提交方式影響，驗證資源的來源。

Katie Hempenius
Katie Hempenius
X
Devin Mullins
Devin Mullins
X GitHub

已簽署的交換 (SXG) 是一種提交機制，可驗證資源的來源，不受其提交方式影響。導入 SXG 可以啟用保護隱私權的跨來源預先擷取功能，改善 Largest Contentful Paint (LCP)。此外，這個分離的做法也開創了各種用途，例如離線網際網路體驗，以及從第三方快取提供內容。

本文針對 SXG 的運作方式、用途和工具提供全面總覽。

瀏覽器相容性

Chromium 型瀏覽器支援 SXG (自 Chrome 73、Edge 79 和 Opera 64 起)。

總覽

做為主要用途，SXG 會使用快取來預先擷取及提供來源加密簽署的內容。這有助於加快來自參照網站的跨來源導覽，同時確保網頁保持不變，並正確歸因於原始來源。任何可能會洩漏身分的資訊都會隱藏，直到使用者前往網站為止，藉此保護使用者的隱私。Google 搜尋是 SXG 預先擷取功能的早期採用者，對於從 Google 搜尋獲得大量流量的網站而言，SXG 可說是一項重要的工具，可讓使用者更快載入網頁。我們希望這項功能日後能擴及更多導流來源。

運作方式

網站會以某種方式簽署要求/回應組合 (「HTTP 交換」)，讓瀏覽器能夠不受內容分發方式影響，驗證內容的來源和完整性。因此，瀏覽器可以在網址列中顯示原始網站的網址，而非提供內容的伺服器網址。

說明 Signed Exchange 運作方式的圖表。瀏覽器與快取通訊，快取再與目的地網站通訊

過去，網站如果希望使用第三方來發布內容，同時維持歸因，就必須與發布商共用其 SSL 憑證。這會帶來安全性缺點，而且與讓內容真正可攜的目標相去甚遠。

SXG 格式

SXG 會封裝在「二進位編碼」檔案中，其中包含兩個主要元件：HTTP 交換和涵蓋交換作業的簽名。HTTP 交換內容包括要求網址、內容協商資訊和 HTTP 回應。

以下是已解碼的 SXG 檔案範例。

format version: 1b3
request:
  method: GET
  uri: https://example.org/
  headers:
response:
  status: 200
  headers:
    Cache-Control: max-age=604800
    Digest: mi-sha256-03=kcwVP6aOwYmA/j9JbUU0GbuiZdnjaBVB/1ag6miNUMY=
    Expires: Mon, 24 Aug 2020 16:08:24 GMT
    Content-Type: text/html; charset=UTF-8
    Content-Encoding: mi-sha256-03
    Date: Mon, 17 Aug 2020 16:08:24 GMT
    Vary: Accept-Encoding
signature:
    label;cert-sha256=<em>ViFgi0WfQ+NotPJf8PBo2T5dEuZ13NdZefPybXq/HhE=</em>;
    cert-url=&quot;https://test.web.app/ViFgi0WfQ-NotPJf8PBo2T5dEuZ13NdZefPybXq_HhE&quot;;
    date=1597680503;expires=1598285303;integrity=&quot;digest/mi-sha256-03&quot;;sig=<em>MEUCIQD5VqojZ1ujXXQaBt1CPKgJxuJTvFlIGLgkyNkC6d7LdAIgQUQ8lC4eaoxBjcVNKLrbS9kRMoCHKG67MweqNXy6wJg=</em>;
    validity-url=&quot;https://example.org/webpkg/validity&quot;
header integrity: sha256-Gl9bFHnNvHppKsv+bFEZwlYbbJ4vyf4MnaMMvTitTGQ=</p>

<p>The exchange has a valid signature.
payload [1256 bytes]:</p>
<pre class="prettyprint"><code>&lt;title&gt;SXG example&lt;/title&gt;
&lt;meta charset=&#34;utf-8&#34;&gt;
&lt;meta http-equiv=&#34;Content-type&#34; content=&#34;text/html; charset=utf-8&#34;&gt;
&lt;style type=&#34;text/css&#34;&gt;
body {
    background-color: #f0f0f2;
    margin: 0;
    padding: 0;
}
&lt;/style&gt;
</code></pre>
<div>
    <h1>Hello</h1>
</div>

<p>

簽章中的 expires 參數表示 SXG 的到期日。SXG 的有效期限最多為 7 天。如要進一步瞭解簽名標頭，請參閱 Signed HTTP Exchanges 規格。

支援伺服器端個人化

使用者如果沒有已簽署的要求網址 Cookie，則系統會顯示包含 Vary: Cookie 標頭的 SXG。如果您的網站向登入的使用者顯示不同的 HTML，您可以使用這項功能來充分運用 SXG，而不會改變該體驗。如要進一步瞭解透過動態 SXG 進行伺服器端個人化設定，請參閱相關說明。

網路套件

SXG 屬於更廣泛的 Web Packaging 規格提案系列。除了 SXG 之外，Web Packaging 規格的其他主要元件是 Web 套件 (「已套件的 HTTP 交換」)。Web Bundle 是 HTTP 資源和解讀套件的必要中繼資料集合。

許多人常常搞不清楚 SXG 和網頁套件之間的關係。SXG 和 Web 套件是兩種不相依賴的獨立技術，Web 套件可搭配已簽署和未簽署的交換服務使用。SXG 和網頁套件都致力於建立「網頁封裝」格式，讓網站可完整分享，供離線使用。

使用 Signed Exchange 加快網頁載入速度

啟用已簽署的交易可加快網頁效能，進而影響網站的 Core Web Vitals，尤其是最大內容繪製 (LCP)。作為早期採用者，Google 搜尋使用 SXG 為使用者提供更快的網頁載入體驗，這些網頁是從搜尋結果網頁載入。

Google 搜尋會在可用時檢索並快取 SXG，並預先擷取使用者可能造訪的 SXG，例如對應於第一個搜尋結果的網頁。

搭配其他效能最佳化功能 (例如使用 CDN 和減少轉譯阻斷子資源) 使用 SXG 時，效果會最佳。實作完畢後，請按照這些建議操作，透過預先擷取 SXG 充分發揮 LCP 的優勢。在多數情況下，這類最佳化作業可能會導致網頁幾乎都是透過 Google 搜尋載入網頁：

Signed Exchange 的影響

根據過去的實驗，我們發現啟用 SXG 的預先載入功能可將 LCP 縮短 300 到 400 毫秒。這有助於網站在使用者心中留下良好的第一印象，通常也會對業務指標產生正面影響。

許多全球品牌和網站都受益於 Signed Exchange。以下是個案研究，讓我們看看導入簽署式交易後，知名內容管理系統 (CMS) 服務商 RebelMouse 如何協助客戶改善成效和業務指標：

  • Narcity 改善 LCP 達 41%
  • Paper Magazine 發現每位使用者的工作階段數增加了 27%
  • MLT 網誌減少網頁載入時間 21%

Cloudflare 發現，SXG 針對 98% 的網站進行了 TTFB 測試，改善了 85% 網站的 LCP，同時符合 SXG 資格的網頁載入速度中位數加快了 20% 以上。

建立索引

Google 搜尋不會對網頁的 SXG 和非 SXG 表示法進行不同的排名或索引。SXG 最終是一種傳遞機制，不會變更基礎內容。

AMP

AMP 內容可透過 SXG 放送。使用 SXG 可預先擷取 AMP 內容，並使用標準網址 (而非 AMP 網址) 顯示內容。AMP 有專屬的工具可用來產生 SXG。請前往 amp.dev 瞭解如何使用已簽署的交換機制提供 AMP。

使用 Chrome 開發人員工具偵錯 SXG

如要親眼查看 SXG，請使用 Chromium 瀏覽器，開啟開發人員工具，開啟「Network」面板，然後前往這個範例搜尋頁面。如要辨識已簽署的交易，請在「Type」欄中尋找 signed-exchange。

螢幕截圖：顯示開發人員工具「網路」面板中的 SXG 要求
開發人員工具中的「Network」面板

「Preview」分頁提供更多關於 SXG 內容的資訊。

SXG 的「Preview」分頁螢幕截圖
開發人員工具中的「預覽」分頁

工具

實作 SXG 是指產生與指定網址對應的 SXG，然後將該 SXG 提供給要求者 (通常是檢索器)。

憑證

如要產生 SXG，您需要能簽署 SXG 的憑證，儘管部分工具會自動取得這類憑證。這個頁面列出可核發這類憑證的憑證授權單位。您可以使用任何 ACME 用戶端，自動從 Google 憑證授權單位取得憑證。Web Packager Server 有內建的 ACME 用戶端，sxg-rs 也即將提供。

平台特定的 SXG 工具

這些工具支援特定的技術堆疊。如果您已使用其中一個工具支援的平台，可能會發現設定起來比通用工具更容易。

一般用途 SXG 工具

sxg-rs HTTP 伺服器

sxg-rs http_server 會做為反向 Proxy，用於提供 SXG。對於來自 SXG 檢索器的要求，http_server 會為後端的回應簽署，並以 SXG 回應。如需安裝操作說明，請參閱 README。

Web Packager 伺服器

webpkgserver 是 sxg-rs http_server 的替代方案，後者是以 Go 編寫。如需設定 Web Packager 伺服器的操作說明，請參閱如何使用 Web Packager 設定 Signed Exchange。

Web Packager CLI

Web Packager CLI 會產生與指定網址相對應的 SXG。

webpackager \
    --private\_key=private.key \
    --cert\_url=https://example.com/certificate.cbor \
    --url=https://example.com

產生 SXG 檔案後，請將檔案上傳至您的伺服器，使用 application/signed-exchange;v=b3 MIME 類型提供。此外，您需要以 application/cert-chain+cbor 提供 SXG 憑證。

SXG 程式庫

您可以使用下列程式庫建構自己的 SXG 產生器：

  • sxg_rs 是用於產生 SXG 的 Rust 程式庫。這是功能最豐富的 SXG 程式庫，也是 cloudflare_worker 和 fastly_compute 工具的基礎。

  • libsxg 是產生 SXG 的最低 C 程式庫。做為 NGINX SXG 模組和 Envoy SXG 篩選器的基礎。

  • go/signed-exchange 是網頁套件規格提供的最低 Go 程式庫，做為產生 SXG 的參考實作。這項工具會用於參考 CLI 工具 gen-signedexchange 和功能更豐富的 Web Packager 工具。

內容協商

如果 Accept 標頭指出 application/signed-exchange 的 q 值大於或等於 text/html 的 q 值，伺服器就應放送 SXG。實際上，這表示原始伺服器會將 SXG 提供給檢索器，但不會提供給瀏覽器。許多上述工具都會在預設情況下執行這項操作，但如果是其他工具，則可使用下列規則運算式，比對應提供為 SXG 的要求的 Accept 標頭：http Accept: /(^|,)\s\*application\/signed-exchange\s\*;\s\*v=[[:alnum:]\_-]+\s\*(,|$)/

這項最佳化建議包含 Apache 和 nginx 的範例。

更新快取 API

Google SXG 快取提供 API，網站擁有者可在 SXG 因 Cache-Control: max-age 而到期前，從快取中移除 SXG。詳情請參閱更新快取 API 參考資料。

連結至 SXG

任何網站都可以使用 和 標記，快取、提供及預先擷取連結網頁的 SXG (如有)： html <a href="https://example.com/article.html.sxg"> <link rel="prefetch" as="document" href="https://example.com/article.html.sxg"> 這篇文章說明如何使用 nginx 發布 SXG。

獨特優勢

跨來源預先擷取功能可透過多種技術啟用，SXG 就是其中之一。決定要使用的技術時，您可能需要在不同方面的最佳化成效之間取得平衡。以下各節將說明 SXG 在可能解決方案中提供的幾個獨特價值。隨著可用解決方案的空間不斷演進，這些因素也可能隨之變動。

放送較少要求

使用跨網站預先擷取功能時，您的伺服器可能需要處理其他要求。這類情況是指網頁已預先擷取，但使用者未造訪該網頁，或是系統無法向使用者顯示預先擷取的位元組。對於 SXG，這些額外的未使用要求可以大幅減少：

  • 系統會快取 SXG，並在過期前傳送給使用者。因此，許多預先擷取作業都可以由快取伺服器單獨處理。
  • 無論使用者是否在您的網站上使用 Cookie，您都可以向他們顯示 SXG。因此，在導覽後，系統需要重新擷取網頁的次數就會減少。

改善網頁速度

由於預先載入途徑和目前支援的功能，網頁速度可能會進一步提升：

  • 您可以向具備網站 Cookie 的使用者顯示 SXG。
  • 當您使用 Link 標頭指定時，SXG 也會預先擷取網頁的子資源，例如 JavaScript、CSS、字型和圖片。
  • 不久後，Google 搜尋的 SXG 預先擷取功能將可用於更多搜尋結果類型。

結論

Signed Exchange 是一種傳遞機制，可讓您獨立驗證資源的來源和有效性，不受資源的傳送方式影響。因此，第三方可以發布 SXG，同時保留完整的發布商歸因資訊。

延伸閱讀