Signed Exchanges (SXGs)

SXG 是一种传输机制，可以独立于资源的传输方式来验证资源的来源。

Katie Hempenius
Katie Hempenius
X - Web开发指南
Devin Mullins

Signed Exchanges (SXG) 是一种传输机制，可以独立于资源的传输方式来验证资源的来源。实施 SXG 可以通过启用保护隐私的跨域预提取来改善最大内容渲染时间 (LCP)。此外，这种解耦还促进了各种用例，例如离线互联网体验和从第三方缓存提供服务。

本文全面概述了 SXG：其工作原理、用例和工具。

浏览器兼容性

基于 Chromium 的浏览器（版本：Chrome 73、Edge 79 和 Opera 64 起）支持 SXG。

概述

作为主要用例，SXG 使用缓存来预提取和提供已由来源加密签名的内容。这有助于加快来自引荐站点的跨域导航速度，同时确保页面保持不变并正确归属于其来源。在用户导航到站点后才会显示任何潜在的身份识别信息，从而保护用户的隐私。Google 搜索是 SXG 预提取功能的早期采用者，对于从 Google 搜索获得大量流量的站点，SXG 可能是为用户提供更快页面加载速度的重要工具。随着时间的推移，我们希望这种影响将扩展到其他引荐来源。

工作原理

站点以请求/响应对（“HTTP 交换”）的方式进行签名，使浏览器可以独立于内容的分布方式来验证内容的来源和完整性。因此，浏览器可以在地址栏中显示来源站点的 URL，而不是提供内容的服务器的 URL。

Diagram explaining how Signed Exchanges Works. Browser communicating with the cache which communicates with the destination site

从历史上看，站点使用第三方分发其内容同时保持归属的唯一方法是站点与分发商共享其 SSL 证书。这存在安全缺陷；此外，这与使内容真正可移植相去甚远。

SXG 格式

SXG 封装在 二进制编码 文件中，该文件有两个主要组成部分：HTTP 交换和覆盖交换的签名。HTTP 交换由请求 URL、内容协商信息和 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 Exchanges 规范。

支持服务器端个性化

包含 Vary: Cookie 标头的 SXG 将仅向没有已签名请求 URL 的 Cookie 的用户显示。如果您的网站向已登录用户显示不同的 HTML，则可以使用此功能来利用 SXG，而无需更改该体验。请参阅使用动态 SXG 进行服务器端个性化的详细信息。

Web Packaging

SXG 是更广泛的 Web Packaging 规范提案系列的一部分。除了 SXG 之外，Web Packaging 规范的另一个主要组成部分是 Web Bundles（“捆绑 HTTP 交换”）。Web Bundles 是 HTTP 资源集合和解释捆绑包所需的元数据。

SXG 和 Web Bundles 之间的关系是一个常见的混淆点。SXG 和 Web Bundles 是两种不同的技术，它们彼此不依赖—Web Bundles 可以与已签名和未签名的交换一起使用。SXG 和 Web Bundles 共同推进的一个共同目标是创建一种“Web Packaging”格式，该格式允许完全共享站点以供离线消费。

通过 Signed Exchanges 加速页面加载

启用 Signed Exchanges 可以帮助加快网页性能，从而影响您网站的核心 Web 指标，特别是最大内容渲染时间 (LCP)。作为早期采用者，Google 搜索使用 SXG 为用户提供从搜索结果页面加载的页面的更快页面加载体验。

Google 搜索会在 SXG 可用时抓取并缓存 SXG，并预提取用户可能访问的 SXG — 例如，与第一个搜索结果对应的页面。

SXG 与其他性能优化（例如使用 CDN 和减少渲染阻塞子资源）协同工作效果最佳。实施后，请遵循这些建议，以最大限度地提高从预提取 SXG 中获得的 LCP 收益。在许多情况下，此类优化可以使来自 Google 搜索的页面实现几乎即时加载

Signed Exchanges 的影响

从过去的实验中，我们观察到启用 SXG 的预提取平均可减少 300 毫秒到 400 毫秒的 LCP。这有助于网站给用户留下更好的第一印象，并且通常对业务指标产生积极影响。

几个全球品牌和网站已经从 Signed Exchanges 中受益。作为案例研究，让我们看看实施 Signed Exchanges 如何帮助杰出的内容管理系统 (CMS) RebelMouse 提高其客户的性能和业务指标

  • Narcity 的LCP 提高了 41%
  • Paper Magazine 注意到用户会话数增加了 27%
  • MLT Blog 的页面加载时间减少了 21%

Cloudflare 发现 SXG 将 98% 的站点的 TTFB 提高，并将 85% 的站点的 LCP 提高，SXG 合格页面加载的中位数改进超过 20%。

索引

Google 搜索对页面的 SXG 和非 SXG 表示形式的排名或索引没有区别。SXG 最终是一种传输机制，它不会更改底层内容。

AMP

AMP 内容可以使用 SXG 交付。SXG 允许使用其规范 URL（而不是其 AMP URL）预提取和显示 AMP 内容。AMP 有其自己的单独工具用于生成 SXG。了解如何在 amp.dev 上使用 Signed Exchanges 提供 AMP。

使用 Chrome DevTools 调试 SXG

要亲眼目睹 SXG，请使用 Chromium 浏览器，打开 DevTools，打开“网络”面板，然后访问此示例搜索页面。Signed Exchanges 可以通过在类型列中查找 signed-exchange 来识别。

Screenshot showing a SXG request within the 'Network' panel in DevTools
DevTools 中的网络面板

“预览”标签页提供了有关 SXG 内容的更多信息。

Screenshot of the 'Preview' tab for a SXG
DevTools 中的预览标签页

工具

实施 SXG 包括生成与给定 URL 对应的 SXG，然后将该 SXG 提供给请求者（通常是抓取工具）。

证书

要生成 SXG，您需要一个可以对 SXG 进行签名的证书，尽管某些工具会自动获取这些证书。此页面列出了可以颁发此类证书的证书颁发机构。可以使用任何 ACME 客户端从 Google 证书颁发机构自动获取证书。Web Packager Server 具有内置的 ACME 客户端，sxg-rs 也将很快推出。

特定于平台的 SXG 工具

这些工具支持特定的技术堆栈。如果您已经在使用其中一个工具支持的平台，您可能会发现它比通用工具更容易设置。

通用 SXG 工具

sxg-rs HTTP 服务器

sxg-rs http_server 充当用于提供 SXG 的反向代理。对于来自 SXG 抓取工具的请求，http_server 将对来自后端的响应进行签名，并使用 SXG 进行响应。有关安装说明，请参阅README。

Web Packager Server

Web Packager Server，webpkgserver，是 sxg-rs http_server 的替代方案，用 Go 编写。有关设置 Web Packager 服务器的说明，请参阅如何使用 Web Packager 设置 Signed Exchanges。

Web Packager CLI

Web Packager CLI 生成与给定 URL 对应的 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 Filter 的基础。

  • 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 到期之前将其从缓存中删除。有关详细信息，请参阅更新缓存 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 的用户显示。
  • 当使用 Link 标头指定时，SXG 还会预提取您页面的子资源，例如 JavaScript、CSS、字体和图像。
  • 在不久的将来，来自 Google 搜索的 SXG 预提取将在更多搜索结果类型中可用。

总结

Signed Exchanges 是一种传输机制，可以独立于资源的传输方式来验证资源的来源和有效性。因此，SXG 可以由第三方分发，同时保持完整的发布商归属。

延伸阅读