Trocas assinadas (SXGs)

Um SXG é um mecanismo de entrega que permite autenticar a origem de um recurso independente de como ele foi entregue.

Katie Hempenius
Katie Hempenius
X
Devin Mullins
Devin Mullins
X GitHub

As trocas assinadas (SXG, na sigla em inglês) são um mecanismo de entrega que permite autenticar a origem de um recurso independentemente de como ele foi entregue. A implementação de SXGs pode melhorar a maior exibição de conteúdo (LCP, na sigla em inglês) ativando a pré-busca de origem cruzada que preserva a privacidade. Além disso, essa separação avança em uma variedade de casos de uso, como experiências off-line na Internet e veiculação de caches de terceiros.

Este artigo oferece uma visão geral abrangente da SXG: como ela funciona, casos de uso e ferramentas.

Compatibilidade com navegadores

O SXG tem suporte de navegadores baseados no Chromium (a partir das versões: Chrome 73, Edge 79 e Opera 64).

Visão geral

Como caso de uso principal, o SXG usa um cache para fazer a pré-busca e fornecer conteúdo assinado criptograficamente pela origem. Isso ajuda a acelerar a navegação entre origens de sites de referência, além de garantir que as páginas permaneçam inalteradas e sejam atribuídas corretamente à origem. Qualquer informação potencialmente identificável é oculta até que o usuário navegue para um site, protegendo a privacidade dele. A Pesquisa Google foi uma das primeiras a adotar os recursos de pré-carregamento de SXGs. Para sites que recebem grande parte do tráfego da Pesquisa Google, as SXGs podem ser uma ferramenta importante para oferecer carregamento de páginas mais rápido aos usuários. Esperamos que esse impacto se estenda a outros remetentes com o tempo.

Como funciona

Um site assina um par de solicitação/resposta (uma "troca HTTP") de uma forma que permite ao navegador verificar a origem e a integridade do conteúdo, independentemente de como ele foi distribuído. Como resultado, o navegador pode mostrar o URL do site de origem na barra de endereço, em vez do URL do servidor que entregou o conteúdo.

Diagrama explicando como as trocas assinadas funcionam. Navegador se comunicando com o cache, que se comunica com o site de destino

Historicamente, a única maneira de um site usar um terceiro para distribuir o conteúdo mantendo a atribuição era compartilhar os certificados SSL com o distribuidor. Isso tem desvantagens de segurança. Além disso, é muito difícil tornar o conteúdo realmente portátil.

Formato SXG

Um SXG é encapsulado em um arquivo codificado em binário que tem dois componentes principais: uma troca HTTP e uma assinatura que abrange a troca. A troca HTTP consiste em um URL de solicitação, informações de negociação de conteúdo e uma resposta HTTP.

Confira um exemplo de um arquivo 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>

O parâmetro expires na assinatura indica a data de validade de uma SXG. Um XG pode ser válido por no máximo 7 dias. Encontre mais informações sobre o cabeçalho de assinatura na especificação de trocas HTTP assinhadas.

Suporte para personalização do lado do servidor

Uma SXG que contém um cabeçalho Vary: Cookie só é mostrada para usuários que não têm cookies para o URL de solicitação assinado. Se o site apresentar HTMLs diferentes para os usuários conectados, use esse recurso para aproveitar as SXGs sem alterar essa experiência. Confira detalhes sobre a personalização do lado do servidor com SXG dinâmico.

Embalagem da Web

A SXG faz parte da família mais ampla de propostas de especificações de Empacotamento da Web. Além dos SXGs, o outro componente principal da especificação de embalagem da Web é pacotes da Web (“trocas HTTP agrupadas”). Os pacotes da Web são uma coleção de recursos HTTP e os metadados necessários para interpretar o pacote.

A relação entre SXGs e pacotes da Web é um ponto comum de confusão. As SXGs e os pacotes da Web são duas tecnologias distintas que não dependem uma da outra. Os pacotes da Web podem ser usados com trocas assinadas e não assinadas. Um objetivo comum avançado por SXGs e pacotes da Web é a criação de um formato de "embalagem da Web" que permite que os sites sejam compartilhados na íntegra para consumo off-line.

Como acelerar o carregamento de páginas com trocas assinadas

Ativar as trocas assinadas pode ajudar a acelerar o desempenho da página da Web e, assim, afetar as Core Web Vitals do seu site, em particular a Largest Contentful Paint (LCP). Como pioneira, a Pesquisa Google usa SXGs para oferecer aos usuários uma experiência de carregamento mais rápida das páginas carregadas na página de resultados da pesquisa.

A Pesquisa Google rastreia e armazena em cache as SXGs quando disponíveis e faz a pré-busca das SXGs que o usuário provavelmente vai visitar, por exemplo, a página correspondente ao primeiro resultado da pesquisa.

O SXG funciona melhor em conjunto com outras otimizações de desempenho, como o uso de CDNs e a redução de subrecursos que bloqueiam a renderização. Após a implementação, siga estas recomendações para maximizar o benefício do LCP com a pré-busca de SXGs. Em muitos casos, essa otimização pode resultar em carregamentos de página quase instantâneos da Pesquisa Google:

Impacto das trocas assinadas

Em experimentos anteriores, observamos uma redução média de 300 a 400 ms na LCP com os prefetches ativados para SXGs. Isso ajuda os sites a causar uma melhor primeira impressão nos usuários e, muitas vezes, tem um impacto positivo nas métricas de negócios.

Várias marcas e sites globais já se beneficiaram dos Signed Exchanges. Como estudo de caso, vamos analisar como a implementação de trocas assinadas ajudou a RebelMouse, um sistema de gerenciamento de conteúdo (CMS) importante, a melhorar a performance dos clientes e as métricas de negócios:

  • Narcity melhorou o LCP em 41%
  • A Paper Magazine notou um aumento de 27% nas sessões por usuário
  • O blog MLT reduziu o tempo de carregamento da página em 21%

A Cloudflare descobriu que as SXGs melhoraram o TTFB em 98% dos sites testados e melhoraram o LCP em 85% dos sites, com uma melhoria média de mais de 20% nas cargas de página qualificadas para SXG.

Indexação

As representações SXG e não SXG de uma página não são classificadas ou indexadas de forma diferente pela Pesquisa Google. O SXG é um mecanismo de entrega, ou seja, ele não muda o conteúdo.

AMP

O conteúdo AMP pode ser entregue usando SXG. O SXG permite que o conteúdo AMP seja pré-carregado e exibido usando o URL canônico, em vez do URL de AMP.O AMP tem ferramentas separadas para gerar SXGs.Saiba como veicular AMP usando trocas assinadas em amp.dev.

Depurar SXGs com o Chrome DevTools

Para conferir um SXG, use um navegador Chromium, abra o DevTools, abra o painel "Rede" e acesse esta página de exemplo de pesquisa. As trocas assinadas podem ser identificadas procurando signed-exchange na coluna Tipo.

Captura de tela mostrando uma solicitação de SXG no painel &quot;Network&quot; do DevTools
O painel Rede no DevTools

A guia Prévia oferece mais informações sobre o conteúdo de um SXG.

Captura de tela da guia &quot;Visualização&quot; de um SXG
A guia Preview no DevTools

Ferramentas

A implementação de SXGs consiste em gerar a SXG correspondente a um determinado URL e, em seguida, veicular essa SXG para os solicitantes (geralmente rastreadores).

Certificados

Para gerar uma SXG, você vai precisar de um certificado que possa assinar SXGs, embora algumas ferramentas as adquiram automaticamente. Esta página lista as autoridades certificadoras que podem emitir esse tipo de certificado. É possível receber certificados automaticamente da autoridade certificadora do Google usando qualquer cliente ACME. O servidor do Web Packager tem um cliente ACME integrado, e o sxg-rs terá em breve.

Ferramentas de SXG específicas da plataforma

Essas ferramentas oferecem suporte a pilhas de tecnologia específicas. Se você já usa uma plataforma com suporte a uma dessas ferramentas, pode ser mais fácil configurá-la do que uma ferramenta de uso geral.

Ferramentas de SXG de uso geral

Servidor HTTP sxg-rs

O sxg-rs http_server atua como um proxy reverso para servir SXGs. Para solicitações de rastreadores de SXG, o http_server vai assinar as respostas do back-end e responder com uma SXG. Para instruções de instalação, consulte o README (link em inglês).

Servidor do empacotador da Web

O Servidor do Web Packager, webpkgserver, é uma alternativa ao http_server sxg-rs, escrito em Go. Para instruções sobre como configurar o servidor do Web Packager, consulte Como configurar trocas assinadas usando o Web Packager.

CLI do Web Packager

O CLI do Web Packager gera um SXG correspondente a um determinado URL.

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

Depois que o arquivo SXG for gerado, faça upload dele no seu servidor e ofereça-o com o tipo MIME application/signed-exchange;v=b3. Além disso, você precisará oferecer o certificado SXG como application/cert-chain+cbor.

Bibliotecas SXG

Essas bibliotecas podem ser usadas para criar seu próprio gerador de SXG:

  • sxg_rs é uma biblioteca Rust para gerar SXGs. É a biblioteca SXG mais completa e é usada como base para as ferramentas cloudflare_worker e fastly_compute.

  • libsxg é uma biblioteca C mínima para gerar SXGs. Ele é usado como base para o módulo SXG do NGINX e o filtro SXG do Envoy.

  • O go/signed-exchange é uma biblioteca Go mínima fornecida pela especificação do pacote da Web como uma implementação de referência para gerar SXGs. Ele é usado como base para a ferramenta CLI de referência, gen-signedexchange, e as ferramentas do Web Packager com mais recursos.

Negociação de conteúdo

Os servidores precisam oferecer SXGs quando o cabeçalho "Accept" indicar que o valor q para application/signed-exchange é maior ou igual ao valor q para text/html. Na prática, isso significa que um servidor de origem vai fornecer SXGs para rastreadores, mas não para navegadores. Muitas das ferramentas acima fazem isso por padrão, mas, para outras ferramentas, a seguinte expressão regular pode ser usada para corresponder ao cabeçalho "Accept" das solicitações que devem ser enviadas como SXG: http Accept: /(^|,)\s\*application\/signed-exchange\s\*;\s\*v=[[:alnum:]\_-]+\s\*(,|$)/

Esta recomendação inclui exemplos para o Apache e o Nginx.

API Update cache

O Cache de SXG do Google tem uma API que os proprietários de sites podem usar para remover SXGs do cache antes que eles expirem devido a Cache-Control: max-age. Consulte a referência da API update cache para mais detalhes.

Como vincular ao SXG

Qualquer site pode armazenar em cache, veicular e fazer a pré-busca de SXGs das páginas vinculadas, quando disponível, usando as tags e : html <a href="https://example.com/article.html.sxg"> <link rel="prefetch" as="document" href="https://example.com/article.html.sxg"> Este artigo mostra como usar o nginx para distribuir SXGs.

Vantagens exclusivas

A SXG é uma das muitas tecnologias possíveis para ativar a pré-busca entre origens. Ao decidir qual tecnologia usar, talvez seja necessário fazer uma troca entre a otimização de diferentes aspectos. As seções a seguir ilustram alguns dos valores exclusivos que o SXG oferece no espaço de soluções possíveis. Esses fatores podem mudar com o tempo, à medida que o espaço de soluções disponíveis evolui.

Menos solicitações para veicular

Com o pré-carregamento entre sites, seu servidor pode precisar atender a outras solicitações. Isso corresponde aos casos em que uma página foi pré-buscada, mas o usuário não a visitou ou os bytes pré-buscados não foram mostrados ao usuário. Para SXG, essas solicitações adicionais não utilizadas podem ser significativamente reduzidas:

  • Os SXGs são armazenados em cache e podem ser enviados aos usuários até expirarem. Assim, muitos prefetches podem ser processados apenas pelo servidor de cache.
  • As SXGs podem ser mostradas aos usuários com e sem cookies no seu site. Assim, a página precisa ser buscada menos vezes após a navegação.

Melhoria na velocidade da página

Você pode notar uma melhoria adicional na velocidade da página devido às plataformas de pré-carregamento e aos recursos que ela oferece atualmente:

  • As SXGs podem ser exibidas para usuários com cookies no seu site.
  • O SXG também faz o pré-carregamento de subrecursos para suas páginas, como JavaScript, CSS, fontes e imagens, quando especificado usando um cabeçalho Link.
  • Em breve, a pré-busca de SXGs na Pesquisa Google vai estar disponível em mais tipos de resultados de pesquisa.

Conclusão

As trocas assinadas são um mecanismo de entrega que permite verificar a origem e a validade de um recurso independentemente de como ele foi entregue. Como resultado, os SXGs podem ser distribuídos por terceiros, mantendo a atribuição completa do editor.

Leitura adicional