Signed Exchange (SXG)

SXG 是一種傳送機制,可用來驗證 是資源來源,與資源的傳送方式無關。

Katie Hempenius
Katie Hempenius
Devin Mullins
Devin Mullins

Signed Exchange (SXG) 是一種傳送機制,可用來驗證資源的來源,與資源傳送方式無關。導入 SXG 可以啟用保護隱私權的跨來源預先擷取功能,改善 Largest Contentful Paint (LCP)。此外,這個分離的做法也開創了各種用途,例如離線網際網路體驗,以及從第三方快取提供內容。

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

瀏覽器相容性

以 Chromium 為基礎的瀏覽器支援 SXG (自 Chrome 73、Edge 79 和 Opera 64 起)。

總覽

做為主要用途,SXG 會使用快取來預先擷取及提供來源加密簽署的內容。這不僅有助於加快參照網站進行跨來源瀏覽的速度,還能確保網頁完整無更動,並確實歸為來源。任何可能的身分識別資訊都會隱藏,直到使用者前往相應網站為止,藉此保護使用者隱私。 Google 搜尋是 SXG 預先擷取功能的早期採用者,對於從 Google 搜尋獲得大部分流量的網站,SXG 也是加快網頁載入速度的重要工具。我們希望這項影響日後能擴大適用於更多推薦人。

運作方式

網站簽署要求/回應配對 (「HTTP Exchange」) 時, 以便驗證內容的來源和完整性 內容的發布方式因此,瀏覽器可以顯示 網址列的來源網站,而不是來源網站的網址 傳遞內容

說明 Signed Exchange 運作方式的圖表。瀏覽器與目標網站通訊的快取資料進行通訊

就一直以來, 利用第三方網站散佈內容 標示表示網站已與 發行商。這有安全性上的缺點;而且距離 2015 與 讓內容更易於攜帶

SXG 格式

SXG 會封裝在二進位編碼檔案中,具有兩個 HTTP Exchange 和 簽名 包含廣告交易平台HTTP Exchange 包含要求網址 以及 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 的到期日。A 罩杯 SXG 的效期最多不超過 7 天。如要進一步瞭解 Signed HTTP Exchanges 中的簽名標頭 spec

支援伺服器端個人化

具有 Vary: Cookie 標頭的 SXG 只會向沒有 已為已簽署要求網址設定 Cookie如果您的網站 您就可以利用這項功能充分運用 SXG 且不必改變使用者體驗進一步瞭解伺服器端個人化 使用 Dynamic SXG 進行連線

網路套件

SXG 是涵蓋範圍較廣的網路 包裝規格提案系列。此外, 將對 SXG 而言,網路封包規格的另一個主要元件是 Web Bundle (「整合式 HTTP 廣告交易平台」)。Web Bundle 是一組 HTTP 資源 解讀套件所需的中繼資料

SXG 與 Web Bundle 之間的關係經常會讓人感到困惑。 SXG 和 Web Bundle 是兩種不同的技術 other:Web Bundle 可與已簽署和未簽署的廣告交易平台搭配使用。常見的 同時運用 SXG 和 Web Bundle 的進階目標,開發出「網頁包裝」 格式,允許網站完整共用內容,方便離線使用。

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

啟用 Signed Exchange 有助於提高網頁效能,並影響您網站的 Core Web Vitals (在最大內容繪製 (LCP) 中)。Google 搜尋早期採用 SXG 技術,可為從搜尋結果網頁載入的網頁,為使用者提供更快速的網頁載入體驗。

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

SXG 最適合與其他效能最佳化搭配運作,例如使用 CDN 以及減少禁止轉譯的子資源。實作後,請按照這些建議操作,利用預先擷取 SXG 充分發揮 LCP 的優勢。在多數情況下,這類最佳化作業可能會導致網頁幾乎都是透過 Google 搜尋載入網頁:

Signed Exchange 的影響

根據過往實驗結果,對於已啟用 SXG 的預先擷取功能,LCP 平均減少了 300 毫秒至 400 毫秒。這樣一來,網站對使用者的第一次印象就會更好,通常也能對業務指標產生正面影響。

許多全球品牌和網站都受益於 Signed Exchange。本個案研究將說明 RebelMouse (知名內容管理系統 (CMS)) 採用 Signed Exchange 後如何幫助其改善客戶的成效和業務指標

  • 美國可用性使 LCP 提升了 41%
  • Paper Magazine 發現,每位使用者的工作階段數增加了 27%
  • MLT 網誌網頁載入時間縮短了 21%

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

建立索引

網頁的 SXG 和非 SXG 表示法未經過排名或建立索引 因為這在 Google 搜尋中有差異SXG 最終是推送機制,而非 並變更基本內容

AMP

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

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

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

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

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

「預覽」的螢幕截圖SXG 的 Tab 鍵
開發人員工具中的「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 檢索器的要求,http_server 會在 並傳回 SXG 回應。安裝 相關說明,請參閱 README 檔案。

Web Packager 伺服器

網頁封裝程式 伺服器 webpkgserver,是 sxg-rs http_server 的替代選項 (以 Go 編寫)。適用對象 如需設定 Web Packager 伺服器的操作說明,請參閱如何設定 與廣告交易平台整合

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 是一個 Rust 程式庫,適用於 產生 SXG 樣本這是最強大的 SXG 程式庫,也是 而且cloudflare_workerfastly_compute工具的基本原則

  • libsxg 是最低的 C 程式庫 產生 SXG 樣本做為 NGINX SXG 模組的基礎 Envoy SXG 濾鏡。

  • go/signed-exchange敬上 是最精簡的 Go 程式庫,由 webpackage 規格提供 參照 導入 產生 SXG 樣本這會做為其參考 CLI 工具的基礎 gen-signedexchange敬上 和更實用的 Web Packager 工具

內容協商

當「Accept」標頭指出 application/signed-Exchange 的 q-值大於或等於 text/html 的 q-value 時,伺服器就應提供 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 到期前,從快取中移除 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 搜尋的預先擷取功能將適用於更多搜尋結果類型。

結論

Signed Exchange 是一種傳送機制,用來 資源的來源和有效性 (無論資源的來源為何) 廣告放送。因此,SXG 可以由第三方分散 完整保留發布商歸因的資訊

延伸閱讀