Signed Exchange (SXG)

SXG 是一種傳遞機制，能夠獨立驗證資源的來源，與驗證方式無關。

Katie Hempenius
Katie Hempenius
X
Devin Mullins
Devin Mullins
X GitHub

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 的優勢。詳情請參閱使用動態 SXG 的伺服器端個人化。

網路封裝

SXG 屬於較廣泛的 Web 封裝規格提案系列。除了 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，讓使用者能更快速地從搜尋結果網頁載入頁面。

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

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

Signed Exchange 的影響

從過往的實驗中，我們觀察到從支援 SXG 的預先擷取作業中，LCP 平均減少了 300 毫秒至 400 毫秒。這麼做有助於讓使用者對網站留下好印象，且通常也能對業務指標產生正面影響。

許多全球品牌和網站都已透過 Signed Exchange 獲益。本個案研究將說明 Signed Exchange 如何幫助 RebelMouse 是知名內容管理系統 (CMS) 改善客戶成效與業務指標：

  • 立體讓 LCP 提高 41%
  • 紙本雜誌發現每位使用者的工作階段數提高了 27%
  • MLT 網誌網頁載入時間減少了 21%

Cloudflare 發現改善了 98% 測試網站的 TTFB，並改善了 85% 網站的 LCP，符合 SXG 標準的網頁載入中位數改善幅度超過 20%。

建立索引

網頁在 SXG 和非 SXG 表示法中，Google 搜尋不會有不同的排名或索引方式。SXG 最終為傳遞機制，並不會變更基礎內容。

AMP

AMP 內容可以使用 SXG 放送。SXG 允許系統預先擷取及顯示 AMP 內容，並使用其標準網址 (而非 AMP 網址) 顯示。AMP 有各自專屬的工具來產生 SXG。瞭解如何在 amp.dev 上使用 Signed Exchange 提供 AMP。

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

如要親身體驗 SXG，請使用 Chromium 瀏覽器、開啟開發人員工具、開啟「網路」面板，然後前往這個搜尋頁面範例。如要找出 Signed Exchange，請在「類型」欄中尋找 signed-exchange。

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

「Preview」分頁會提供關於 SXG 內容的詳細資訊。

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

工具

實作 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 (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 類型提供。此外，您需要將 SXG 憑證做為 application/cert-chain+cbor 提供。

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。上述許多工具預設會執行這項作業，但若是其他工具，可使用下列規則運算式來比對應以 SXG 形式提供的要求的 Accept 標頭： http Accept: /(^|,)\s\*application\/signed-exchange\s\*;\s\*v=[[:alnum:]\_-]+\s\*(,|$)/

這項建議提供 Apache 和 nginx 的範例。

更新快取 API

Google SXG 快取的 API 可供網站擁有者在 SXG 因 Cache-Control: max-age 到期前從快取中移除。詳情請參閱「更新快取 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 可以由第三方發布，同時維持完整的發布者歸因。

其他資訊