Intercambios firmados (SXG)

Un SXG es un mecanismo de entrega que permite autenticar el origen de un recurso, independientemente de cómo se haya entregado.

Katie Hempenius
Katie Hempenius
X
Devin Mullins
Devin Mullins
X GitHub

Los intercambios firmados (SXG) son un mecanismo de entrega que permite autenticar el origen de un recurso, independientemente de cómo se entregó. La implementación de SXG puede mejorar la métrica Largest Contentful Paint (LCP) mediante la habilitación de la carga previa de origen cruzado que preserva la privacidad. Además, esta separación promueve una variedad de casos de uso, como las experiencias de Internet sin conexión y la entrega desde cachés de terceros.

En este artículo, se proporciona una descripción general completa de SXG: cómo funciona, los casos de uso y las herramientas.

Compatibilidad del navegador

SXG es compatible con los navegadores basados en Chromium (comenzando con las versiones Chrome 73, Edge 79 y Opera 64).

Descripción general

Como su caso de uso principal, SXG usa una caché para precargar y entregar contenido que el origen firmó de manera criptográfica. Esto ayuda a acelerar las navegaciones de origen cruzado desde sitios de referencia, a la vez que garantiza que las páginas permanezcan sin alteraciones y se atribuyan correctamente a su origen. Toda la información potencialmente identificatoria queda oculta hasta después de que el usuario navega a un sitio, lo que protege la privacidad del usuario. La Búsqueda de Google es un usuario pionero de las funciones de carga previa de SXG y, en el caso de los sitios que reciben una gran parte de su tráfico de la Búsqueda de Google, SXG puede ser una herramienta importante para proporcionar cargas de páginas más rápidas a los usuarios. Con el tiempo, esperamos que este impacto se extienda a más referentes.

Funcionamiento

Un sitio firma un par de solicitud-respuesta (un "intercambio HTTP") de una manera que permite que el navegador verifique el origen y la integridad del contenido, independientemente de cómo se distribuyó. Como resultado, el navegador puede mostrar la URL del sitio de origen en la barra de direcciones, en lugar de la URL del servidor que entregó el contenido.

Diagrama en el que se explica cómo funcionan los intercambios firmados. Navegador que se comunica con la caché y con el sitio de destino

Históricamente, la única manera de que un sitio usara un tercero para distribuir su contenido y, al mismo tiempo, mantener la atribución, era compartir sus certificados SSL con el distribuidor. Esto tiene desventajas de seguridad; además, es muy lejos de hacer que el contenido sea realmente portátil.

El formato SXG

Un SXG se encapsula en un archivo con codificación binaria que tiene dos componentes principales: un intercambio HTTP y una firma que cubre el intercambio. El intercambio HTTP consiste en una URL de solicitud, información de negociación de contenido y una respuesta HTTP.

Este es un ejemplo de un archivo SXG decodificado.

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>

El parámetro expires de la firma indica la fecha de vencimiento de un SXG. Un SXG puede tener una validez de 7 días como máximo. Obtén más información sobre el encabezado de firma en la especificación de intercambios HTTP firmados.

Compatibilidad con la personalización del servidor

Un SXG que contenga un encabezado Vary: Cookie se mostrará solo a los usuarios que no tengan cookies para la URL de la solicitud firmada. Si tu sitio presenta código HTML diferente a los usuarios que accedieron a sus cuentas, puedes usar esta función para aprovechar SXG sin alterar esa experiencia. Consulta los detalles sobre la personalización del servidor con Dynamic SXG.

Empaquetado web

SXG forma parte de la familia de propuestas más amplia de paquetes web. Además de los SXG, el otro componente importante de la especificación del empaquetado web son los paquetes web (“intercambios HTTP agrupados”). Los paquetes web son una colección de recursos HTTP y los metadatos necesarios para interpretar el paquete.

La relación entre los SXG y los paquetes web es un punto de confusión común. SXG y Web Bundles son dos tecnologías distintas que no dependen unas de otras. Los paquetes web se pueden usar con intercambios firmados y no firmados. Un objetivo común de los SXG y los paquetes web es la creación de un formato de "empaquetado web" que permita compartir los sitios en su totalidad para el consumo sin conexión.

Acelera la carga de páginas con los intercambios firmados

Habilitar los intercambios firmados puede ayudar a acelerar el rendimiento de la página web y, por lo tanto, afectar las Métricas web esenciales de tu sitio en particular para el Procesamiento de imagen con contenido más grande (LCP). Como usuario pionero, la Búsqueda de Google usa SXG para brindarles a los usuarios una experiencia de carga más rápida de páginas que se cargan desde la página de resultados de búsqueda.

La Búsqueda de Google rastrea y almacena en caché los SXG cuando están disponibles, y carga previamente los SXG que es probable que el usuario visite (por ejemplo, la página correspondiente al primer resultado de la búsqueda).

SXG funciona mejor en conjunto con otras optimizaciones de rendimiento, como el uso de CDN y la reducción de los subrecursos que bloquean el procesamiento. Después de la implementación, sigue estas recomendaciones para maximizar el beneficio de LCP de la carga previa de SXG. En muchos casos, esa optimización puede generar cargas de páginas casi instantáneas provenientes de la Búsqueda de Google:

Impacto de los intercambios firmados

En experimentos anteriores, observamos una reducción promedio de 300 ms a 400 ms en el LCP de las cargas previas habilitadas con SXG. Esto ayuda a los sitios a dar una mejor primera impresión a los usuarios y, a menudo, tiene un impacto positivo en las métricas de la empresa.

Varias marcas y sitios internacionales ya se han beneficiado de los intercambios firmados. En un caso de éxito, veamos cómo la implementación de intercambios firmados ayudó a RebelMouse, un sistema de administración de contenido (CMS) destacado, a mejorar el rendimiento y las métricas comerciales de sus clientes:

  • Narcity mejoró el LCP en un 41%
  • Paper Magazine obtuvo un aumento del 27% en las sesiones por usuario.
  • El blog de MLT disminuyó el tiempo de carga de la página en un 21%

Cloudflare descubrió que SXG mejoró el TTFB en el 98% de los sitios que probó y el LCP para el 85% de los sitios, con una mejora promedio de más del 20% en las cargas de páginas aptas para SXG.

Indexación

Las representaciones SXG y que no son de SXG de una página no se clasifican ni indexan de manera diferente en la Búsqueda de Google. En definitiva, SXG es un mecanismo de entrega: no cambia el contenido subyacente.

AMP

El contenido de AMP se puede publicar mediante SXG. SXG permite que el contenido de AMP se cargue previamente y se muestre con su URL canónica, en lugar de que su URL de AMP.AMP tenga sus propias herramientas independientes para generar SXG.Obtén información sobre cómo publicar AMP con intercambios firmados en amp.dev.

Depura SXG con las Herramientas para desarrolladores de Chrome

Para ver un SXG de primera mano, usa un navegador Chromium, abre Herramientas para desarrolladores, abre el panel de Red y visita esta página de búsqueda de ejemplo. Los intercambios firmados se pueden identificar buscando signed-exchange en la columna Tipo.

Captura de pantalla que muestra una solicitud de SXG en el panel “Network” de Herramientas para desarrolladores
El panel Red en Herramientas para desarrolladores

En la pestaña Vista previa, se proporciona más información sobre el contenido de un SXG.

Captura de pantalla de la pestaña “Vista previa” de un SXG
La pestaña Vista previa en Herramientas para desarrolladores

Herramientas

La implementación de SXG consiste en generar el SXG que corresponde a una URL determinada y, luego, publicar ese SXG a los solicitantes (por lo general, rastreadores).

Certificados

Para generar un SXG, necesitarás un certificado que pueda firmar SXG, aunque algunas herramientas los adquieren automáticamente. En esta página, se enumeran las autoridades certificadoras que pueden emitir este tipo de certificado. Los certificados se pueden obtener automáticamente de la autoridad certificadora de Google mediante cualquier cliente de ACME. Web Packager Server tiene un cliente ACME integrado, y los sxg-rs pronto lo tendrán.

Herramientas de SXG específicas de la plataforma

Estas herramientas admiten paquetes tecnológicos específicos. Si ya usas una plataforma compatible con una de estas herramientas, puede que te resulte más fácil de configurar que una herramienta de uso general.

Herramientas de SXG de uso general

Servidor HTTP sxg-rs

El sxg-rs http_server actúa como un proxy inverso para entregar SXG. Para las solicitudes de los rastreadores de SXG, http_server firmará las respuestas del backend y responderá con un SXG. Para obtener instrucciones de instalación, consulta el archivo README.

Servidor de empaquetador web

El servidor de empaquetador web, webpkgserver, es una alternativa a sxg-rs http_server, escrito en Go. Si deseas obtener instrucciones para configurar el servidor de Web Packager, consulta Cómo configurar los intercambios firmados con Web Packager.

CLI de Web Packager

La CLI de Web Packager genera un SXG correspondiente a una URL determinada.

webpackager \
    --private\_key=private.key \
    --cert\_url=https://example.com/certificate.cbor \
    --url=https://example.com

Una vez que se genere el archivo SXG, súbelo a tu servidor y publícalo con el tipo de MIME application/signed-exchange;v=b3. Además, deberás entregar el certificado SXG como application/cert-chain+cbor.

Bibliotecas de SXG

Estas bibliotecas podrían usarse para compilar tu propio generador de SXG:

  • sxg_rs es una biblioteca de Rust para generar SXG. Es la biblioteca SXG más útil y se usa como base para las herramientas cloudflare_worker y fastly_compute.

  • libsxg es una biblioteca de C mínima para generar SXG. Se usa como base para el módulo NGINX SXG y el filtro Envoy SXG.

  • go/signed-exchange es una biblioteca mínima de Go que proporciona la especificación del paquete web como una implementación de referencia de la generación de SXG. Se usa como base de su herramienta de CLI de referencia, gen-signedexchange, y las herramientas más útiles de Web Packager.

Negociación de contenido

Los servidores deben entregar SXG cuando el encabezado Accept indica que el valor q para la aplicación/exchange-firmado es mayor o igual que el valor q para text/html. En la práctica, esto significa que un servidor de origen publicará SXG para los rastreadores, pero no para los navegadores. Muchas de las herramientas anteriores hacen esto de forma predeterminada, pero para otras, se puede usar la siguiente expresión regular para hacer coincidir el encabezado Accept de las solicitudes que deben entregarse como SXG: http Accept: /(^|,)\s\*application\/signed-exchange\s\*;\s\*v=[[:alnum:]\_-]+\s\*(,|$)/

Esta recomendación incluye ejemplos para Apache y nginx.

API de Update cache

La caché de SXG de Google tiene una API que los propietarios de sitios pueden usar para quitar los SXG de la caché antes de que venzan debido a Cache-Control: max-age. Consulta la referencia de la API de actualización de caché para obtener más información.

Vinculación con SXG

Cualquier sitio puede almacenar en caché, entregar y cargar previamente los SXG de las páginas a las que está vinculado, cuando están disponibles, mediante las etiquetas y : html <a href="https://example.com/article.html.sxg"> <link rel="prefetch" as="document" href="https://example.com/article.html.sxg"> En este artículo, se muestra cómo usar nginx para distribuir SXG.

Ventajas únicas

SXG es una de las muchas tecnologías posibles para habilitar la carga previa de origen cruzado. Cuando decidas qué tecnología usar, es posible que debas optimizar diferentes aspectos. En las siguientes secciones, se ilustran algunos de los valores únicos que proporciona SXG en el espacio de posibles soluciones. Estos factores pueden cambiar con el tiempo a medida que evolucione el espacio de soluciones disponibles.

Menos solicitudes para publicar

Con la carga previa entre sitios, es posible que tu servidor deba entregar solicitudes adicionales. Esto corresponde a los casos en los que se realizó una carga previa de una página, pero el usuario no la visitó o no se pudieron mostrar los bytes cargados previamente. En el caso de SXG, estas solicitudes adicionales sin usar se pueden reducir de forma significativa:

  • Los SXG se almacenan en caché y se pueden enviar a los usuarios hasta que venzan. Por lo tanto, solo el servidor de caché puede controlar muchas cargas previas.
  • Los SXG se pueden mostrar a los usuarios con cookies y sin ellas en tu sitio. Por lo tanto, hay menos momentos en los que se deberá volver a recuperar la página después de la navegación.

Mejora de la velocidad de la página

Es posible que veas mejoras adicionales en la velocidad de la página debido a las plataformas de carga previa y las capacidades que admite actualmente:

  • Los SXG se pueden mostrar a los usuarios con cookies para tu sitio.
  • SXG también realiza una carga previa de subrecursos para tus páginas, como JavaScript, CSS, imágenes y fuentes, cuando se especifica con un encabezado Link.
  • En un futuro cercano, la carga previa de SXG desde la Búsqueda de Google estará disponible en más tipos de resultados de la búsqueda.

Conclusión

Los intercambios firmados son un mecanismo de entrega que permite verificar el origen y la validez de un recurso, independientemente de cómo se haya entregado. Como resultado, terceros pueden distribuir los SXG mientras se mantiene la atribución completa del publicador.

Lecturas adicionales