Signed Exchange（SXG）

SXG は、ユーザーの認証と認可を可能にする配信メカニズムです。 配信方法とは無関係に、リソースの送信元のみを指定できます。

Katie Hempenius
Katie Hempenius
X
Devin Mullins
Devin Mullins
X GitHub

Signed Exchange（SXG）は、配信方法に関係なくリソースの発行元を認証できるようにする配信メカニズムです。SXG を実装すると、プライバシー保護されたクロスオリジン プリフェッチを有効にすることで、Largest Contentful Paint（LCP）を改善できます。さらに、この分離により、オフラインのインターネット エクスペリエンスやサードパーティ キャッシュからのサービングなど、さまざまなユースケースが促進されます。

この記事では、SXG の仕組み、ユースケース、ツールなど、SXG の概要について説明します。

ブラウザの互換性

SXG は Chromium ベースのブラウザでサポートされています （Chrome 73、Edge 79、Opera 64 以降）。

概要

SXG の主なユースケースとして、SXG はキャッシュを使用して、送信元によって暗号署名されたコンテンツをプリフェッチして提供します。これにより、リファラーサイトからのクロスオリジン ナビゲーションが高速化されると同時に、ページが改ざんされず、発生元に適切に帰属することが保証されます。個人を特定できる可能性のある情報は、ユーザーがサイトに移動するまで非表示になるため、ユーザーのプライバシーが保護されます。 Google 検索は SXG プリフェッチ機能をいち早く採用しており、Google 検索からトラフィックの大部分を受け取っているサイトにとって、SXG はユーザーのページ読み込みを高速化するうえで重要なツールとなり得ます。今後、この影響がより多くのご紹介者様に広がっていくことを願っております。

仕組み

サイトは、リクエストとレスポンスのペア（「HTTP 交換」）に署名することで、 ブラウザでは、独立したユーザーとして、コンテンツの配信元と完全性を コンテンツの配信方法。その結果、ブラウザにはページの URL が アドレスバーに表示されているサイトの URL ではなく、 コンテンツを配信しました。

Signed Exchange の仕組みを説明する図。ブラウザがキャッシュと通信し、リンク先サイトと通信している

これまでは、クラウド コンピューティングで サードパーティを利用してコンテンツを配信しつつ、 関連付けられており、サイトが SSL 証明書を 提供していますこれにはセキュリティ上の欠点があります。しかも、AI は ポータビリティをもたらします

SXG 形式

SXG は、バイナリエンコードされたファイルにカプセル化され、 HTTP エクスチェンジと OAuth トークンの 署名 交換をカバーしていますHTTP エクスチェンジは、リクエスト URL、コンテンツ HTTP レスポンスの 3 つが含まれます

これは、デコードされた 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 の署名ヘッダーに、 仕様をご覧ください。

サーバーサイドのパーソナライズのサポート

Vary: Cookie ヘッダーを含む SXG は、ヘッダーを含まないユーザーにのみ表示されます 署名付きリクエスト URL に対する Cookie を保持します。サイトに異なる HTML が使用されている場合 この機能を使用して SXG を活用できます。 ユーザーエクスペリエンスを維持できますサーバーサイドのカスタマイズの詳細 Dynamic SXG との併用。

ウェブ パッケージング

SXG は、より広範なウェブ パッケージング仕様案ファミリー。その他の ウェブ パッケージ仕様のもう一つの主要コンポーネントは、Web Bundle です。 （「バンドルされた HTTP エクスチェンジ」）。ウェブバンドルは、HTTP リソースとネットワーク リソースの 必要なメタデータを格納します。

SXG と Web Bundle の関係は、よく混乱する点です。 SXG と Web Bundle は、それぞれに依存しない 2 つの異なるテクノロジーです other - ウェブバンドルは、Signed Exchange と UnSigned Exchange の両方で使用できます。共通 SXG と Web Bundle が進めた目標は、「ウェブ パッケージング」の開発です。 形式を使用すると、サイト全体をオフラインで利用するために共有できます。

Signed Exchange を使用してページ読み込みを高速化する

Signed Exchange を有効にすると、ウェブページのパフォーマンスが向上するため、特定の Largest Contentful Paint（LCP）において、サイトの Core Web Vitals が改善されます。アーリー アドプターとして、Google 検索では SXG を使用して、検索結果ページから読み込まれるページをより高速にユーザーがページ読み込みできるようにしています。

Google 検索では、SXG が利用可能であればクロールしてキャッシュし、ユーザーがアクセスする可能性の高い SXG（最初の検索結果に対応するページなど）をプリフェッチします。

SXG は、CDN の使用やレンダリング ブロック サブリソースの削減など、他のパフォーマンス最適化と組み合わせることで最適に機能します。実装したら、こちらの推奨事項に沿って、SXG のプリフェッチによる LCP のメリットを最大化します。多くの場合、このような最適化を行うと、Google 検索からページがほぼ瞬時に読み込まれるようになります。

Signed Exchange の影響

過去のテストでは、SXG 対応のプリフェッチによって LCP が平均 300 ～ 400 ミリ秒短縮されることが確認されています。これにより、サイトはユーザーの第一印象を改善し、多くの場合ビジネス指標にプラスの影響を与えます。

すでに世界的ないくつかのブランドやサイトが Signed Exchange の恩恵を受けています。ケーススタディとして、Signed Exchange を実装することで、主要なコンテンツ マネジメント システム（CMS）である RebelMouse が顧客の顧客満足度を向上させるのにどのように役立ったかを見てみましょう。パフォーマンス指標とビジネス指標:

  • Narcity が LCP を 41%改善
  • Paper Magazine、ユーザーあたりのセッション数が 27% 増加
  • MLT ブログでページの読み込み時間を 21%短縮

Cloudflare は、SXG がテストしたサイトの 98% で TTFB を改善し、85% のサイトで LCP を改善し、SXG 対応ページ読み込みで中央値が 20% 以上改善したことを確認しました。

インデックス登録

ページの SXG 表記と SXG 以外の表記は、ランキングやインデックス登録の対象となりません それぞれ異なりますSXG は、最終的には提供メカニズムであり、 基になるコンテンツを変更します。

AMP

AMP コンテンツは SXG を使用して配信できます。SXG では AMP コンテンツをプリフェッチできます。 AMP URL ではなく正規 URL を使用して表示しています。AMP には独自の URL を用意し、 SXG を生成するためのツールが用意されています。Signed Exchange を使用して AMP を提供する方法については、 amp.dev.

Chrome DevTools を使用した SXG のデバッグ

SXG を直接見るには、Chromium ブラウザで DevTools を開き、[ネットワーク] パネルを開いて、こちらのサンプル検索ページにアクセスします。Signed Exchange は、[タイプ] 列で「signed-exchange」を探すことで識別できます。

<ph type="x-smartling-placeholder">
</ph> 「ネットワーク」内の SXG リクエストを示すスクリーンショットパネル
DevTools の [Network] パネル

[プレビュー] タブには、SXG の内容に関する詳細情報が表示されます。

<ph type="x-smartling-placeholder">
</ph> [プレビュー] のスクリーンショットSXG のタブ
DevTools の [Preview] タブ

ツール

SXG の実装では、指定された URL に対応する SXG を生成します。 その SXG をリクエスト元（通常はクローラー）に提供します

証明書

SXG を生成するには、SXG に署名できる証明書が必要です（一部のツールでは自動的に取得されます）。このタイプの証明書を発行できる認証局の一覧は、こちらのページに記載されています。 証明書は ACME クライアントを使用して Google 認証局から自動的に取得できます。Web Packager Server には ACME クライアントが組み込まれています。sxg-rs も近日中に提供される予定です。

プラットフォーム固有の SXG ツール

これらのツールは、特定の技術スタックをサポートしています。すでに 使用している場合は、Compute Engine よりも 汎用のツールです。

汎用 SXG ツール

sxg-rs HTTP サーバー

sxg-rs http_server リバース プロキシとして機能し、 SXG のサービングですSXG クローラーからのリクエストの場合、http_server は バックエンドからのレスポンスを受信し、SXG で応答します。設置方法 手順については、 README です。

Web Packager サーバー

Web Packager Server、 webpkgserver は、Go で記述された sxg-rs http_server の代わりとなります。対象 Web Packager サーバーの設定手順については、署名付き URL を設定する方法をご覧ください。 直接やり取りできます。

Web Packager CLI

Web Packager CLI で SXG を生成する 特定の URL に対応するものとして識別されます。

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 ライブラリであり、 cloudflare_worker ツールと fastly_compute ツールのベース。

  • libsxg は、以下のタスクを行う最小限の C ライブラリです。 生成します。これは NGINX SXG モジュールの基礎として使用され、 Envoy SXG フィルタ。

  • go/signed-exchange は、webpackage の仕様で提供されている最小限の Go ライブラリです。 リファレンス 実装 生成します。これはリファレンス 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 Cache には、サイト所有者が Cache-Control: max-age によって期限切れになる前にキャッシュから SXG を削除するために使用できる API があります。詳細については、Update Cache 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 はキャッシュに保存され、期限が切れるまでユーザーに送信されます。そのため、プリフェッチの多くはキャッシュ サーバーだけで処理できます。
  • SXG は、サイト上の Cookie の有無にかかわらずユーザーに表示できます。そのため、ナビゲーション後にページを再度取得する必要がある回数が少なくなります。

ページの読み込み速度の改善

プリフェッチのサーフェスと現在サポートされている機能によって、ページの読み込み速度がさらに改善する可能性があります。

  • SXG は、サイトの Cookie を使用してユーザーに表示できます。
  • また、SXG は、Link ヘッダーで指定すると、ページのサブリソース（JavaScript、CSS、フォント、画像など）もプリフェッチします。
  • 近い将来、Google 検索からの SXG プリフェッチは、より多くの検索結果タイプで利用できるようになります。

まとめ

Signed Exchange は配信メカニズムであり、これを使用して、 リソースの状態と有効性を、リソースの状態とは無関係に 提供します。その結果 SXG はサードパーティによって 配信されながら パブリッシャーのアトリビューションを 維持します

関連情報