你好，小狼们 🙂 （是的，这是炎热的天气，它让我很高兴……抱歉），
感谢您点击我的文章😁，像往常一样我们会努力制作高质量的作品，希望您喜欢…
本周，我们将讨论签名交换，这是一项鲜为人知的技术，但我发现它非常有趣，所以我们将与您分享所有这些！
简而言之，签名交换允许什么？
签名交换是 Google 提供的一项技术，允许您通过 Google（和其他兼容公司）缓存您的页面和“资产”（例如 CSS），并允许他们向您的客户预加载您的内容，而无需让他们连接到您的服务器。
到这里，文章就结束了，祝大家有美好的一天🤣！ …但是不，我们会走得更远。
一些背景知识
现在是 2023 年 1 月，我想对我的 CMS 进行一些更改、改进和刷新…
当我在互联网上闲逛时，我发现了一篇文章（我不记得在哪里，并且是英文的），其中说从现在开始，签名交换也可以与“桌面”版本的谷歌一起使用……
“交换什么？”
所以我开始对技术产生了兴趣，尽管我并没有对它抱有太大的期望，事实上，当谷歌发布“AMP”页面（“加速移动页面”）时，SEO一度开始困扰我。
基本上，有了 AMP，一切都由 Google 负责。 对我来说有什么问题，浏览器应该显示内容的实际 URL，而不是以 Google 域开头的内容……
因此，我开始挖掘，查看有关该主题的少数资源（文章、视频），在挖掘的同时，我告诉自己它仍然非常有趣，我想将其放在我的网站上马尔尚兄弟的成员。
事实上，我们创建了一个“二进制数据包”，其中包含 HTTP 请求及其响应，例如 HTTP 请求允许您加载当前所在的页面，因此响应包含标头和正文（在我们的例子中）页面的 HTML）。
创建此数据包后，我们使用链接到包含域名以及“CanSignHttpExchanges”属性的证书（公钥）的私钥对其进行签名。 此签名允许客户端验证数据包确实是由资源的真实发布者发出的并且未被更改。 这将允许浏览器在地址栏中显示您的域和 URL，即使从技术上讲资源是从其他服务器加载的。
事实上，要设置签名交换，您必须在 Web 服务器前面设置一个“反向代理”，它将拦截为资源创建签名交换的请求，并创建此签名交换，您还需要创建一个证书（及其私钥）来签署交换，当我进行研究时，只有 DigiCert 和 Google 提供了此类证书的验证。
从实用的角度来说，我建议你 这个扩展，与所有基于 Chromium 的浏览器兼容，它将允许您检查页面是否可以通过签名交换正常工作。
Les“反向代理”开源兼容
首先，如果本章中有任何混乱和不清楚的地方，请原谅，事实上，这项技术还很年轻，在正确的地方拥有正确的信息有点复杂……
NGINX 的模块
你可以在这里找到，NGINX 的一个模块，没有使用过它，我不知道它的价值，但 Google 在其文档中谈到了它。
“sxg-rs”HTTP 服务器
在这里找到 Rust 中管理签名交换的反向代理的实现，话虽这么说，请小心，我真的没有感觉到 Google 他们正在推广这个项目……
Le Web 打包服务器
跳到那里，到这里，Go的另一个实现，我对这个项目更有信心了。
云耀
Cloudflare 使用其界面中的一个简单按钮提供签名交换的激活，此选项是其付费服务的一部分。
要激活它，请转到“Spped”>“优化”>“其他”
为什么我选择 Cloudflare 作为反向代理？
他们是我“值得信赖”的公司之一，我认识他们已有 10 年了（谢谢， 科本， 当时。 此外，他的博客还使用签名交易所），尽管他们现在拥有权力，但他们从未提高价格，也没有做过任何真正有害的事情（据我所知），而且，很容易“退出”他们的服务，一个简单的操作DNS变更结束。
我想过度使用签名交换，缓存 HTML 很好，但是加载网页时的问题是折叠上方的 CSS，它会阻止页面的渲染…所以，必须缓存…
因此，我可以选择要么花时间在我的基础设施中实现 Google 提供的反向代理，要么让 Cloudflare 来实现并专注于用户体验，看看我将如何缓存 HTML 和 CSS 。
我选择信任 Cloudflare，如果事情进展不顺利，我总是可以回去。
一切都会发生在您的服务器返回的内容中，特别是“缓存”标头，它将允许 Google（或希望利用您网站的签名交换的其他第三方）知道如何管理它。
您必须已经将“私有”更改为“公共”，以向 CDN 和 Google 解释他们可以将此资源保留在缓存中。
然后，您必须定义共享缓存必须将资源保留在缓存中的秒数，这是通过“s-maxage”变量完成的。
在 Symfony 项目中，您可以这样做：
一旦您创建了将正确的标头添加到响应中的函数，您所要做的就是创建一个“侦听器”，它将检查是否必须修改响应，如果必须这样做，则它会调用我们之前创建的函数。
在这里我们看到变量“ROUTE_TO_CDN_CACHE”，这些是您想要“公开”的 Symfony 路由。
当用户拥有会话 cookie 时页面会发生变化吗？
啊，是的，呃…想象一下来自谷歌的用户，他们看到一个通用页面，右上角没有漂亮的用户名，而且商店没有他们的购物篮…这不太好。
Google 建议使用“Vary: Cookie”标头告诉浏览器不要使用签名交换，并在浏览器为该域保存 cookie 时正常从服务器加载页面。
是的，但我不喜欢它，这不是一个很好的用户体验……它很糟糕，我们仍然希望从超快的加载时间中受益……
对于 Marchand Brothers 在线奶酪店，我也想要签名交换，那么我是如何做到的呢？
非常简单，所有的产品页面、主页、类别，我们用我之前给你的代码将它们放在“公共”中（顺便说一下，我从那里提取了这段代码），我们使用 Varnish 来清理发送的所有 cookie客户端向服务器发送数据，以避免任何数据泄露。
页面加载后，我们使用 Fetch 发出第二个 HTTP 请求，该请求检查我们是否已连接，如果是，我们将替换页面上更改的部分……在我们的例子中，是用户空间和购物篮。
最后，我们使用“localStorage”创建一个本地缓存，以保留对此请求的响应，以进行页面更改……
就是这样，我们正确使用了签名交换…每个人都获得了良好的用户体验😍
使用 CSS 文件进行签名交换
在 Google 缓存 HTML 很好…但我们想要加载 立即的，不存在用户等待 CSS 下载和解释以查看页面的问题。
要使用 Cloudflare 的反向代理执行此操作，只需在响应中添加 HTTP 标头，使用“链接”标头告诉浏览器预加载资源。
Cloudflare 将通过添加指向另一个签名交换（即 CSS 签名交换）的链接来负责修改为 HTML 生成的签名交换。
在这里，我基于 Cloudflare，但在协议中，明确指出可以创建链接签名交换，因此我认为其他实现是兼容的（但必须这样做）。
验证签名的交换是否正常工作
为此，您只需要基于 Chromium 和 Google 的浏览器…
一旦您的签名交换设置完成，您将能够在浏览器的“网络”选项卡中看到，它直接从 Google 加载您的资源，甚至在用户点击您的网站之前，提醒您，这不会创建没有连接到您的服务器（出于保密原因）。
结论
好了，这篇文章即将结束，我希望你喜欢它并教会你一些东西。
祝你度过愉快的一周，很快再见。
