Signed HTTP Exchange (SXG)

SXG adalah mekanisme pengiriman yang memungkinkan untuk mengotentikasi asal resource secara terpisah dari cara pengirimannya.

Katie Hempenius

Devin Mullins

Signed HTTP Exchange (SXG) adalah mekanisme pengiriman yang memungkinkan autentikasi asal resource secara terpisah dari cara pengirimannya. Menerapkan SXG dapat meningkatkan Largest Contentful Paint (LCP) dengan mengaktifkan pengambilan data lintas origin yang menjaga privasi. Selain itu, pemisahan ini memajukan berbagai kasus penggunaan seperti pengalaman internet offline dan penayangan dari cache pihak ketiga.

Artikel ini memberikan ringkasan komprehensif tentang SXG: cara kerja, kasus penggunaan, dan alatnya.

Kompatibilitas browser

SXG didukung oleh browser berbasis Chromium (dimulai dengan versi: Chrome 73, Edge 79, dan Opera 64).

Ringkasan

Sebagai kasus penggunaan utamanya, SXG menggunakan cache untuk mengambil data dan menyajikan konten yang telah ditandatangani secara kriptografi oleh origin. Hal ini membantu mempercepat navigasi lintas origin dari situs perujuk sekaligus memastikan halaman tetap tidak diubah dan diatribusikan dengan benar ke asalnya. Informasi apa pun yang dapat mengidentifikasi pengguna akan disembunyikan hingga pengguna membuka situs, sehingga melindungi privasi pengguna. Google Penelusuran adalah pengguna awal kemampuan pengambilan data SXG dan untuk situs yang menerima sebagian besar traffic-nya dari Google Penelusuran, SXG dapat menjadi alat penting untuk memberikan pemuatan halaman yang lebih cepat kepada pengguna. Seiring waktu, kami berharap dampak ini akan diperluas ke perujuk lainnya.

Cara Kerja

Situs menandatangani pasangan permintaan/respons ("pertukaran HTTP") dengan cara yang memungkinkan browser untuk memverifikasi asal dan integritas konten secara terpisah dari bagaimana konten didistribusikan. Hasilnya, {i>browser<i} dapat menampilkan URL situs asal di kolom URL, bukan di URL server yang menyajikan konten.

Secara historis, satu-satunya cara bagi situs untuk menggunakan pihak ketiga guna mendistribusikan kontennya dengan tetap mempertahankan atribusi tersebut ditujukan bagi situs untuk membagikan sertifikat SSL-nya dengan distributor. Sistem ini memiliki kelemahan keamanan; selain itu, ini jauh dari membuat konten benar-benar portabel.

Format SXG

SXG dienkapsulasi dalam file yang dienkode biner yang memiliki dua komponen utama: pertukaran HTTP dan tanda tangan yang membahas bursa. Pertukaran HTTP terdiri dari URL permintaan, konten informasi negosiasi, dan respons HTTP.

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>

Parameter expires dalam tanda tangan menunjukkan tanggal habis masa berlaku SXG. J SXG mungkin berlaku maksimal selama 7 hari. Temukan informasi selengkapnya di header tanda tangan di kolom Signed HTTP Exchanges spesifikasi.

Dukungan untuk personalisasi sisi server

SXG yang berisi header Vary: Cookie hanya akan ditampilkan kepada pengguna yang tidak memiliki cookie untuk URL permintaan yang ditandatangani. Jika situs Anda menyajikan HTML yang berbeda kepada pengguna yang login, Anda dapat menggunakan fitur ini untuk memanfaatkan SXG tanpa mengubah pengalaman tersebut. Lihat detail tentang personalisasi sisi server dengan Dynamic SXG.

Pengemasan Web

SXG merupakan bagian dari sistem Web Kelompok proposal spesifikasi pengemasan. Selain itu ke SXG, komponen utama lain dari spesifikasi Web Packaging adalah Web Bundle ("pertukaran HTTP yang dipaketkan"). Paket Web adalah kumpulan sumber daya HTTP dan metadata yang diperlukan untuk menafsirkan paket.

Hubungan antara SXG dan Paket Web adalah titik kebingungan yang umum. SXG dan Web Bundle adalah dua teknologi berbeda yang tidak bergantung pada masing-masing lainnya—Paket Web dapat digunakan dengan bursa yang ditandatangani dan tidak ditandatangani. Tanda umum sasaran yang ditetapkan oleh SXG dan Paket Web adalah pembuatan "kemasan web" format yang memungkinkan situs dibagikan secara utuh untuk dinikmati secara offline.

Mempercepat Pemuatan Halaman dengan Signed HTTP Exchange

Mengaktifkan Signed HTTP Exchange dapat membantu mempercepat performa halaman web sehingga memengaruhi Core Web Vitals situs Anda, di Largest Contentful Paint (LCP) tertentu. Sebagai pengguna awal, Google Penelusuran menggunakan SXG untuk memberi pengguna pengalaman pemuatan halaman yang lebih cepat untuk halaman yang dimuat dari halaman hasil penelusuran.

Google Penelusuran meng-crawl dan meng-cache SXG jika tersedia dan mengambil data SXG yang mungkin dikunjungi pengguna—misalnya, halaman yang sesuai dengan hasil penelusuran pertama.

SXG berfungsi paling baik bersama dengan pengoptimalan performa lainnya seperti penggunaan CDN dan pengurangan subresource yang memblokir render. Setelah menerapkan, ikuti rekomendasi ini untuk memaksimalkan manfaat LCP dari pengambilan data SXG. Dalam banyak kasus, pengoptimalan tersebut dapat mengakibatkan pemuatan halaman instan yang hampir berasal dari Google Penelusuran:

Dampak Signed HTTP Exchange

Dari eksperimen sebelumnya, kami telah mengamati rata-rata pengurangan LCP 300 md hingga 400 md dari pengambilan data yang mendukung SXG. Hal ini membantu situs memberikan kesan pertama yang lebih baik kepada pengguna dan sering kali memiliki dampak positif pada metrik bisnis.

Beberapa merek dan situs global telah mendapatkan manfaat dari Signed Exchanges. Sebagai studi kasus, mari lihat bagaimana penerapan Signed Exchange membantu RebelMouse, Sistem Pengelolaan Konten (CMS) terkemuka, meningkatkan kepuasan pelanggan mereka metrik performa dan bisnis:

• Narcity meningkatkan LCP sebesar 41%
• Paper Magazine mengalami peningkatan Sesi per pengguna sebesar 27%
• Blog MLT mengurangi waktu Muat Halaman sebesar 21%

Cloudflare menemukan bahwa SXG meningkatkan TTFB untuk 98% situs yang diuji, dan meningkatkan LCP untuk 85% situs, dengan peningkatan rata-rata lebih dari 20% dalam pemuatan halaman yang memenuhi syarat SXG.

Pengindeksan

Representasi SXG dan non-SXG halaman tidak diberi peringkat atau diindeks secara berbeda oleh Google Penelusuran. SXG pada akhirnya adalah mekanisme penyampaian, bukan mengubah konten yang mendasarinya.

AMP

Konten AMP dapat ditayangkan menggunakan SXG. SXG memungkinkan konten AMP untuk pengambilan data dan ditampilkan menggunakan URL kanonis, bukan URL AMP-nya.AMP memiliki alat untuk membuat SXG.Pelajari cara menayangkan AMP menggunakan Signed HTTP Exchange di amp.dev.

Melakukan debug SXG dengan Chrome DevTools

Untuk melihat SXG secara langsung, gunakan browser Chromium, buka DevTools, buka panel Jaringan, dan kunjungi contoh halaman penelusuran ini. Pertukaran Bertanda Tangan dapat diidentifikasi dengan mencari signed-exchange di kolom Jenis.

Tab Preview memberikan informasi selengkapnya tentang konten SXG.

Alat

Menerapkan SXG terdiri dari menghasilkan SXG yang sesuai dengan URL tertentu lalu menyajikan SXG tersebut kepada pemohon (biasanya crawler).

Sertifikat

Untuk membuat SXG, Anda memerlukan sertifikat yang dapat menandatangani SXG, meskipun beberapa alat memperolehnya secara otomatis. Halaman ini mencantumkan certificate authority yang dapat menerbitkan jenis sertifikat ini. Sertifikat dapat diperoleh secara otomatis dari otoritas sertifikat Google menggunakan klien ACME apa pun. {i>Web Packager Server<i} memiliki klien ACME bawaan, dan {i>sxg-rs<i} akan segera melakukannya.

Alat SXG khusus platform

Alat-alat ini mendukung technology stack tertentu. Jika Anda sudah menggunakan yang didukung oleh salah satu alat ini, Anda mungkin merasa lebih mudah menyiapkannya daripada sebuah alat serbaguna.

• sxg-rs/cloudflare_worker berjalan di Cloudflare Workers.

• sxg-rs/fastly_compute berjalan di Fastly Compute@Edge.

• Ditandatangani Otomatis Bursa adalah Fitur {i>Cloudflare<i} yang secara otomatis memperoleh sertifikat dan membuat {i>Signed HTTP Exchanges<i}.

• Modul NGINX SXG menghasilkan dan menayangkan SXG untuk situs yang menggunakan nginx. Penyiapan petunjuk dapat ditemukan di sini.

• Envoy SXG Filter menghasilkan dan menayangkan SXG untuk situs yang menggunakan Envoy.

Alat SXG tujuan umum

Server HTTP sxg-rs

Sxg-rs http_server bertindak sebagai reverse proxy untuk yang menyajikan SXG. Untuk permintaan dari crawler SXG, http_server akan menandatangani respons dari backend dan merespons dengan SXG. Untuk penginstalan petunjuk, lihat BACA.

Server Web Packager

Web Packager Server, webpkgserver, adalah alternatif untuk http_server sxg-rs, yang ditulis dalam Go. Sebagai petunjuk tentang menyiapkan server Web Packager, lihat Cara menyiapkan menggunakan Web Packager.

CLI Web Packager

Web Packager CLI menghasilkan SXG sesuai dengan URL tertentu.

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

Setelah file SXG dibuat, upload ke server Anda dan tayangkan dengan jenis MIME application/signed-exchange;v=b3. Selain itu, Anda perlu menayangkan sertifikat SXG sebagai application/cert-chain+cbor.

Library SXG

Library ini dapat digunakan untuk membangun generator SXG Anda sendiri:

• sxg_rs adalah library Rust untuk yang menghasilkan SXG. Ini adalah library SXG yang paling fitur dan digunakan sebagai untuk alat cloudflare_worker dan fastly_compute.

• libsxg adalah library C minimal untuk yang menghasilkan SXG. Ini digunakan sebagai dasar untuk modul NGINX SXG dan Filter Envoy SXG.

• go/signed-exchange adalah library Go minimal yang disediakan oleh spesifikasi paket web sebagai referensi penerapan yang menghasilkan SXG. Alat ini digunakan sebagai dasar untuk alat CLI referensinya, gen-signedexchange dan alat {i>Web Packager <i}yang lebih menonjol.

Negosiasi konten

Server harus menyajikan SXG jika header Accept menunjukkan bahwa nilai-q untuk aplikasi/pertukaran bertanda tangan lebih besar dari atau sama dengan nilai-q untuk teks/html. Dalam praktiknya, hal ini berarti server asal akan menayangkan SXG ke crawler, tetapi tidak ke browser. Banyak alat di atas melakukan ini secara default, tetapi untuk alat lainnya, ekspresi reguler berikut dapat digunakan untuk mencocokkan header Accept permintaan yang harus disajikan sebagai SXG: http Accept: /(^|,)\s\*application\/signed-exchange\s\*;\s\*v=[[:alnum:]\_-]+\s\*(,|$)/

Rekomendasi ini menyertakan contoh untuk Apache dan nginx.

Mengupdate cache API

Google SXG Cache memiliki API yang dapat digunakan pemilik situs untuk menghapus SXG dari cache sebelum habis masa berlakunya karena Cache-Control: max-age. Lihat referensi update cache API untuk mengetahui detailnya.

Menautkan ke SXG

Situs apa pun dapat meng-cache, menyajikan, dan mengambil data SXG dari halaman yang ditautkan, jika tersedia, menggunakan tag dan : html <a href="https://example.com/article.html.sxg"> <link rel="prefetch" as="document" href="https://example.com/article.html.sxg"> Artikel ini mengilustrasikan cara menggunakan nginx untuk mendistribusikan SXG.

Keunggulan Unik

SXG adalah salah satu dari banyak teknologi yang memungkinkan untuk mengaktifkan pengambilan data lintas origin. Saat memutuskan teknologi mana yang akan digunakan, Anda mungkin perlu berkompromi antara mengoptimalkan aspek yang berbeda. Bagian berikut ini menggambarkan beberapa nilai unik yang diberikan SXG dalam ruang solusi yang mungkin. Faktor-faktor ini dapat berubah seiring waktu seiring berkembangnya ruang solusi yang tersedia.

Lebih sedikit permintaan untuk ditayangkan

Dengan pengambilan data lintas situs, server Anda mungkin perlu melayani permintaan tambahan. Hal ini sesuai dengan kasus saat halaman pengambilan data, tetapi pengguna tidak mengunjungi halaman tersebut, atau byte pengambilan data tidak dapat ditampilkan kepada pengguna. Untuk SXG, permintaan tambahan yang tidak digunakan berikut dapat dikurangi secara signifikan:

• SXG di-cache dan dapat dikirim ke pengguna hingga masa berlakunya habis. Dengan demikian, banyak pengambilan data dapat ditangani hanya oleh server cache.
• SXG dapat ditampilkan kepada pengguna yang memiliki dan tanpa cookie di situs Anda. Dengan demikian, ada lebih sedikit waktu ketika halaman perlu diambil lagi setelah navigasi.

Peningkatan kecepatan halaman

Anda mungkin melihat peningkatan kecepatan halaman tambahan karena platform dan kemampuan pengambilan data yang saat ini didukung:

• SXG dapat ditampilkan kepada pengguna yang memiliki cookie untuk situs Anda.
• SXG juga mengambil data subresource untuk halaman Anda, seperti JavaScript, CSS, font, dan gambar, jika ditentukan menggunakan header Link.
• Dalam waktu dekat, pengambilan data SXG dari Google Penelusuran akan tersedia di lebih banyak jenis hasil penelusuran.

Kesimpulan

{i>Signed HTTP Exchanges<i} adalah mekanisme pengiriman yang memungkinkan untuk memverifikasi asal dan validitas sumber daya terlepas dari bagaimana sumber daya itu yang dihasilkan. Akibatnya, SXG dapat didistribusikan oleh pihak ketiga meskipun mempertahankan atribusi penayang penuh.

Bacaan lebih lanjut

• Draf spesifikasi untuk Signed HTTP Exchange
• Penjelasan Paket Web
• Mulai menggunakan Signed HTTP Exchange di Google Penelusuran
• Cara menyiapkan Signed HTTP Exchange menggunakan Web Packager
• Demo Signed HTTP Exchange