Signed Exchange (SXG)

SXG 是一種傳遞機制,因此可以不受傳送方式影響地驗證資源來源。

凱蒂漢佩紐斯
Katie Hempenius
穆林斯 (Devin Mullins)
Devin Mullins

Signed Exchange (SXG) 是一種傳送機制,可讓不受傳送方式影響資源來源驗證。導入 SXG 可以啟用保護隱私權的跨來源預先擷取功能,改善最大內容繪製 (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,而無需更動使用體驗。詳情請參閱使用 Dynamic SXG 的伺服器端個人化功能

網路包裝

SXG 是廣泛網路封裝規格提案系列的一部分。除了 SXG 以外,網路封裝規格的其他主要元件為 Web Bundle (「附帶的 HTTP 廣告交易平台」)。Web Bundle 是一組 HTTP 資源和解讀組合所需的中繼資料。

SXG 和 Web Bundle 之間的關係是經常混淆的地方。SXG 和 Web Bundle 是兩種無法相互依賴的不同技術。Web Bundle 可以搭配已簽署和未簽署的廣告交易平台使用。SXG 和 Web Bundle 優先採用的常見目標之一,就是建立一種「網路封裝」格式,允許網站在離線狀態下共用。

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

啟用 Signed Exchange 有助於加快網頁效能,進而影響網站的網站體驗核心指標報告 (特別呈現最大內容繪製 (LCP))。Google 搜尋早期採用 SXG 技術,可以加快從搜尋結果網頁載入網頁的速度,為使用者提供更快速的網頁載入體驗。

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

SXG 最適合與其他效能最佳化功能搭配使用,例如使用 CDN 以及減少禁止轉譯的子資源。實作完成後,請按照這些建議操作,充分發揮預先擷取 SXG 的 LCP 效益。在許多情況下,經過最佳化處理可能會導致 Google 搜尋幾乎瞬間載入網頁:

Signed Exchange 的影響

從過往的實驗結果,我們發現已啟用 SXG 的預先擷取功能,使 LCP 平均減少 300 毫秒至 400 毫秒。這有助於網站提升使用者的第一印象,並且經常為業務指標帶來正面影響。

目前已有多家全球品牌和網站因 Signed Exchange 而受益。您可以透過個案研究瞭解,知名內容管理系統 (CMS) RebelMouse 的導入作業,瞭解導入 Signed Exchange 後,如何改善客戶的成效和業務指標:

  • 影城使 LCP 提升了 41%
  • 《紙雜誌》發現每位使用者的工作階段數提升了 27%
  • MLT 網誌將網頁載入時間縮短 21%

Cloudflare 發現在測試過 SXG 的情況下,改善了 98% 網站的 TTFB,並改善了 85% 網站的 LCP,且在符合 SXG 資格的網頁載入中,載入時間中位數增加了超過 20%。

建立索引

Google 搜尋並未對網頁的 SXG 和非 SXG 表示法進行排名或建立索引。SXG 最終是提交機制,不會變更基礎內容。

AMP

你可以使用 SXG 傳送 AMP 內容。SXG 允許 AMP 內容使用其標準網址 (而非 AMP 網址) 預先擷取及顯示。AMP 有專屬的獨立工具,可用於產生 SXG。瞭解如何在 amp.dev 上使用 Signed Exchange 放送 AMP。

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

如要直接查看 SXG,請使用 Chromium 瀏覽器,開啟開發人員工具、開啟「網路」面板,然後造訪這個搜尋範例網頁。在「類型」欄中尋找 signed-exchange,即可識別 Signed Exchange。

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

「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 可做為提供 SXG 的反向 Proxy。如果要求來自 SXG 檢索器,http_server 會簽署來自後端的回應,並透過 SXG 回應。如需安裝操作說明,請參閱 README

Web Packager 伺服器

Web Packager Server 是以 Go 編寫的 sxg-rs http_server 替代方法。如需設定 Web Packager 伺服器的操作說明,請參閱如何使用 Web Packager 設定 Signed Exchangewebpkgserver

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 類型提供檔案。此外,您必須將 SXG 憑證做為 application/cert-chain+cbor 提供。

SXG 程式庫

以下程式庫可用於建構您自己的 SXG 產生器:

  • sxg_rs 是用於產生 SXG 的 Rust 程式庫。這是最實用的 SXG 程式庫,也是 cloudflare_workerfastly_compute 工具的基礎。

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

  • go/signed-exchange 是 webpackage 規格提供的最低 Go 程式庫,做為產生 SXG 的參考實作。這會做為其參考 CLI 工具、gen-signedexchange 和更強大的 Web Packager 工具的基礎。

內容協商

當 Accept 標頭指出 application/signed-exchange 的 q-value 大於或等於 text/html 的 q-value 時,伺服器應該提供 SXG。在實際執行上,這表示原始伺服器會向檢索器提供 SXG,但不會向瀏覽器提供 SXG。上述許多工具預設都會執行這項作業,但針對其他工具,下列規則運算式可用於比對應以 SXG 形式提供的要求 Accept 標頭: http Accept: /(^|,)\s\*application\/signed-exchange\s\*;\s\*v=[[:alnum:]\_-]+\s\*(,|$)/

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

更新快取 API

Google SXG 快取的 API 可讓網站擁有者在因 Cache-Control: max-age 而過期前,使用其中的 API 將 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,同時保有完整的發布者歸因。

其他資訊