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 Exchange 規格。

支援伺服器端個人化

只有不具備已簽署要求網址 Cookie 的使用者，才會看到含有 Vary: Cookie 標頭的 SXG。如果網站會向登入使用者顯示不同的 HTML，您可以使用這項功能，在不改變體驗的情況下，充分運用 SXG。請參閱使用動態 SXG 進行伺服器端個人化的詳細資料。

網頁封裝

SXG 屬於更廣泛的 Web Packaging 規格提案系列。除了 SXG 之外，Web Packaging 規格的另一個主要元件是 Web Bundle (「HTTP 交換組合」)。Web Bundle 包含 HTTP 資源和解讀套件所需的中繼資料。

SXG 和 Web Bundle 之間的關係常讓人混淆。SXG 和 Web Bundles 是兩種不同的技術，彼此不互相依賴，Web Bundles 可與已簽署和未簽署的交換搭配使用。SXG 和 Web Bundle 的共同目標是建立「網頁封裝」格式，讓網站能完整共用，供離線使用。

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

啟用 Signed Exchange 有助於提升網頁效能，進而影響網站的 Core Web Vitals，尤其是Largest Contentful Paint (LCP)。Google 搜尋是早期採用者，會使用 SXG 讓使用者從搜尋結果網頁載入網頁時，享有更快的網頁載入體驗。

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

SXG 最好與其他效能最佳化措施搭配使用，例如使用 CDN 和減少會阻礙轉譯的子資源。實作後，請按照這些建議，充分發揮預先擷取 SXG 的 LCP 效益。在許多情況下，這類最佳化作業可讓 Google 搜尋的載入網頁速度近乎即時：

Signed Exchange 的影響

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

許多全球品牌和網站已從 Signed Exchange 受益。接下來，我們透過個案研究，瞭解知名內容管理系統 (CMS) RebelMouse 如何透過實作 Signed Exchange，改善客戶的成效和業務指標：

  • Narcity 將 LCP 提升 41%
  • Paper Magazine 發現每位使用者工作階段數增加 27%
  • MLT Blog 將網頁載入時間縮短 21%

Cloudflare 發現，在測試的網站中，SXG 改善了 98% 網站的第一個位元組時間，並改善了 85% 網站的最大內容繪製，符合 SXG 資格的網頁載入時間中位數改善幅度超過 20%。

建立索引

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

AMP

AMP 內容可透過 SXG 傳送。SXG 可預先擷取 AMP 內容，並使用標準網址 (而非 AMP 網址) 顯示。AMP 有專屬的工具，可用於產生 SXG。請前往 amp.dev，瞭解如何使用 Signed Exchange 放送 AMP。

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

如要親自查看 SXG，請使用 Chromium 瀏覽器，開啟開發人員工具，開啟「網路」面板，然後造訪這個範例搜尋網頁。如要找出 Signed Exchange，請在「Type」(類型) 欄中尋找 signed-exchange。

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

「預覽」分頁會提供更多 SXG 內容相關資訊。

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

工具

如要導入 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 伺服器

Web Packager Server webpkgserver 是以 Go 語言編寫，可替代 sxg-rs http_server。如需設定 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 是 webpackage 規格提供的精簡 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，網站擁有者可使用該 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。因此，在導覽後，需要再次擷取頁面的次數會減少。

提升網頁速度

由於目前支援的預先擷取介面和功能，您可能會發現網頁速度進一步提升：

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

結論

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

延伸閱讀