Signed Exchange (SXG)

SXG 是一种传送机制,可让您验证资源的来源,而无需考虑其传送方式。

Katie Hempenius
Katie Hempenius
Devin Mullins
Devin Mullins

签名交换 (SXG) 是一种提交机制,可独立于资源提交方式来对资源的来源进行身份验证。通过启用可保护隐私的跨源预提取,实现 SXG 可以改善 Largest Contentful Paint (LCP)。此外,这种解耦还可以改进各种应用场景,例如离线互联网体验和从第三方缓存中提供内容。

本文将全面介绍 SXG:其工作原理、用例和工具。

浏览器兼容性

基于 Chromium 的浏览器(Chrome 73、Edge 79 和 Opera 64 及更高版本)支持 SXG。

概览

作为其主要用例,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 Exchanges 规范

支持服务器端个性化

包含 Vary: Cookie 标头的 SXG 将仅向没有签名请求网址 Cookie 的用户显示。如果您的网站向已登录的用户显示不同的 HTML,您可以使用此功能来利用 SXG,而无需改变用户体验。详细了解如何使用动态 SXG 实现服务器端个性化

Web 打包

SXG 属于更广泛的 Web Packaging 规范提案系列。除了 SXG 之外,Web 打包规范的另一个主要组成部分是网站软件包(“捆绑的 HTTP 交换”)。Web Bundle 是 HTTP 资源和解读 bundle 所需的元数据的集合。

SXG 与 Web Bundle 之间的关系是一个常见的困惑点。SXG 和 Web Bundle 是两种不相互依赖的不同技术,Web Bundle 既可用于签名交换和未签名的广告交易平台,SXG 和 Web Bundle 共同追求的一个目标是创建一种“网站打包”格式,以便完整共享网站以供离线使用。

使用 Signed Exchange 加快网页加载速度

启用 Signed Exchange 有助于加快网页性能,从而影响您网站的 Core Web Vitals,尤其是 Largest Contentful Paint (LCP)。作为早期采用者,Google 搜索使用 SXG 为从搜索结果页加载的网页提供更快的页面加载体验。

Google 搜索会抓取并缓存 SXG(如果可用),并预提取用户可能会访问的 SXG,例如与第一条搜索结果对应的网页。

SXG 最适合与其他性能优化(例如使用 CDN 和减少渲染阻塞的子资源)搭配使用。实现后,请遵循以下建议,最大限度地利用预加载 SXG 带来的 LCP 优势。在许多情况下,此类优化可以使 Google 搜索近乎即时地完成网页加载:

Signed Exchange 的影响

从过往的实验中,我们发现启用 SXG 的预提取功能后,LCP 平均缩短了 300 到 400 毫秒。这有助于网站给用户留下更好的第一印象,通常对业务指标也有积极影响。

多家全球品牌和网站已从已签名广告交易中受益。下面以一个案例为例,介绍实现已签名广告交易如何帮助知名内容管理系统 (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,您可以使用规范网址(而非 AMP 网址)预提取和显示 AMP 内容。AMP 有自己的单独工具来生成 SXG。如需了解如何使用 Signed Exchange 提供 AMP 内容,请访问 amp.dev

使用 Chrome 开发者工具调试 SXG

若要直接查看 SXG,请使用 Chromium 浏览器,打开开发者工具,打开“Network”面板,然后访问此示例搜索页面。您可以通过在类型列中查找 signed-exchange 来识别已签名广告交易。

屏幕截图:开发者工具“Network”面板中的 SXG 请求
DevTools 中的网络面板

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

SXG 的“预览”标签页的屏幕截图
DevTools 中的预览标签页

工具

实现 SXG 包括生成与给定网址对应的 SXG,然后将该 SXG 传送给请求者(通常是抓取工具)。

证书

如需生成 SXG,您需要拥有可对 SXG 签名的证书,不过某些工具会自动获取这些证书。此页面列出了可以颁发此类证书的证书授权机构。您可以使用任何 ACME 客户端自动从 Google 证书授权机构获取证书。Web 打包工具服务器内置了 ACME 客户端,sxg-rs 也很快就会内置。

平台专用 SXG 工具

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

通用 SXG 工具

sxg-rs HTTP 服务器

sxg-rs http_server 充当用于分发 SXG 的反向代理。对于来自 SXG 抓取工具的请求,http_server 会对来自后端的响应进行签名,并以 SXG 的形式进行响应。如需了解安装说明,请参阅自述文件

Web 打包容器服务器

Web Packager 服务器 webpkgserver 是 sxg-rs http_server 的替代方案,采用 Go 编写。如需了解如何设置 Web Packager 服务器,请参阅如何使用 Web Packager 设置 Signed Exchange

Web 打包工具 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 是 Web 软件包规范提供的一个极小的 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 的示例。

Update Cache API

Google SXG Cache 提供了一个 API,网站所有者可以使用该 API 在 SXG 因 Cache-Control: max-age 而过期之前从缓存中移除 SXG。如需了解详情,请参阅 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,并在到期之前将其发送给用户。因此,许多预提取操作可以完全由缓存服务器处理。
  • 无论用户是否在网站上使用 Cookie,SXG 都可以向用户显示。因此,在导航后需要再次提取网页的次数会减少。

网页速度提升

由于预提取平台目前支持的预提取界面和功能,网页速度可能会进一步提升:

  • SXG 可向您网站有 Cookie 的用户展示。
  • 如果使用 Link 标头指定,SXG 还会预加载网页的子资源,例如 JavaScript、CSS、字体和图片。
  • 在不久的将来,Google 搜索中的 SXG 预提取功能将适用于更多搜索结果类型。

总结

Signed Exchange 是一种传送机制,使您可以独立于资源的传送方式来验证资源的来源和有效性。因此,SXG 可由第三方分发,同时保留完整的发布商归因。

深入阅读