Signed HTTP Exchange (SXG)

SXG adalah mekanisme pengiriman yang memungkinkan autentikasi 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 meningkatkan berbagai kasus penggunaan seperti pengalaman internet offline dan inferensi dari cache pihak ketiga.

Artikel ini memberikan ringkasan komprehensif tentang SXG: cara kerjanya, kasus penggunaan, dan alat.

Kompatibilitas browser

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

Ringkasan

Sebagai kasus penggunaan utamanya, SXG menggunakan cache untuk mengambil data dan menayangkan konten yang telah ditandatangani secara kriptografis oleh origin. Hal ini membantu mempercepat navigasi lintas origin dari situs perujuk sekaligus memastikan bahwa halaman tetap tidak diubah dan diatribusikan dengan benar ke situs asal tersebut. Setiap informasi yang berpotensi mengidentifikasi akan disembunyikan hingga pengguna selesai 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 mengirimkan pemuatan halaman yang lebih cepat kepada pengguna. Seiring waktu, kami berharap dampak ini akan meluas ke perujuk tambahan.

Cara Kerja

Situs menandatangani pasangan permintaan/respons ("pertukaran HTTP") dengan cara yang memungkinkan browser memverifikasi asal dan integritas konten secara terpisah dari cara konten didistribusikan. Akibatnya, browser dapat menampilkan URL situs asal di kolom URL, bukan URL server yang mengirimkan konten.

Secara historis, satu-satunya cara bagi situs untuk menggunakan pihak ketiga untuk mendistribusikan kontennya sambil mempertahankan atribusi adalah dengan membagikan sertifikat SSL-nya kepada distributor. Cara ini memiliki kelemahan keamanan; selain itu, jauh dari menjadikan konten yang benar-benar portabel.

Format SXG

SXG dienkapsulasi dalam file yang dienkode biner yang memiliki dua komponen utama: pertukaran HTTP dan tanda tangan yang mencakup pertukaran. Pertukaran HTTP terdiri dari URL permintaan, informasi negosiasi konten, 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. SXG mungkin berlaku maksimal selama 7 hari. Temukan informasi selengkapnya tentang header tanda tangan di spesifikasi Signed HTTP Exchange.

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 adalah bagian dari kelompok proposal spesifikasi Web Packaging yang lebih luas. Selain SXG, komponen utama lainnya dari spesifikasi Web Packaging adalah Paket Web ("paket HTTP pertukaran"). Paket Web adalah kumpulan resource HTTP dan metadata yang diperlukan untuk menafsirkan paket.

Hubungan antara SXG dan Paket Web sering kali membingungkan. SXG dan Paket Web adalah dua teknologi berbeda yang tidak bergantung satu sama lain—Paket Web dapat digunakan dengan bursa yang ditandatangani dan tidak ditandatangani. Tujuan umum yang diwujudkan oleh SXG dan Paket Web adalah pembuatan format "pengemasan web" yang memungkinkan situs dibagikan secara keseluruhan untuk digunakan 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, khususnya Largest Contentful Paint (LCP). Sebagai pengguna awal, Google Penelusuran menggunakan SXG untuk memberikan pengalaman pemuatan halaman yang lebih cepat kepada pengguna 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 rendering. Setelah menerapkan, ikuti rekomendasi ini untuk memaksimalkan manfaat LCP dari pengambilan data SXG. Dalam banyak kasus, pengoptimalan tersebut dapat menghasilkan pemuatan halaman yang hampir instan yang berasal dari Google Penelusuran:

Dampak Signed HTTP Exchange

Dari eksperimen sebelumnya, kami telah mengamati rata-rata pengurangan LCP sebesar 300 md hingga 400 md dari pengambilan data yang diaktifkan SXG. Hal ini membantu situs membuat kesan pertama yang lebih baik bagi pengguna dan sering kali berdampak positif pada metrik bisnis.

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

• Narcity meningkatkan LCP sebesar 41%
• Paper Magazine mendapati 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% pada pemuatan halaman yang memenuhi syarat SXG.

Pengindeksan

Representasi SXG dan non-SXG suatu halaman tidak diberi peringkat atau diindeks secara berbeda oleh Google Penelusuran. SXG pada akhirnya merupakan mekanisme pengiriman dan tidak mengubah konten yang mendasarinya.

AMP

Konten AMP dapat ditayangkan menggunakan SXG. Dengan SXG, konten AMP dapat diambil data dan ditampilkan menggunakan URL kanonisnya, bukan URL AMP-nya.AMP memiliki alat terpisah untuk menghasilkan SXG.Pelajari cara menayangkan AMP menggunakan Signed HTTP Exchange di amp.dev.

Men-debug SXG dengan Chrome DevTools

Untuk melihat SXG secara langsung, gunakan browser Chromium, buka DevTools, buka panel Jaringan, lalu kunjungi contoh halaman penelusuran ini. Signed HTTP Exchange dapat diidentifikasi dengan mencari signed-exchange di kolom Jenis.

Tab Pratinjau memberikan informasi selengkapnya tentang konten SXG.

Alat

Penerapan SXG terdiri dari pembuatan SXG yang sesuai dengan URL tertentu, lalu menyalurkan SXG tersebut kepada pemohon (biasanya crawler).

Sertifikat

Untuk membuat SXG, Anda memerlukan sertifikat yang dapat menandatangani SXG, meskipun beberapa alat memperoleh sertifikat ini secara otomatis. Halaman ini berisi daftar certificate authority yang dapat menerbitkan jenis sertifikat ini. Sertifikat dapat diperoleh secara otomatis dari certificate authority Google menggunakan klien ACME. Web Packager Server memiliki klien ACME bawaan, dan sxg-rs akan segera hadir.

Alat SXG khusus platform

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

• sxg-rs/cloudflare_worker berjalan di Pekerja Cloudflare.

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

• Automatic Signed Exchange adalah fitur Cloudflare yang secara otomatis memperoleh sertifikat dan menghasilkan Signed HTTP Exchange.

• Modul NGINX SXG menghasilkan dan menayangkan SXG untuk situs yang menggunakan nginx. Petunjuk penyiapan 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 menyalurkan SXG. Untuk permintaan dari crawler SXG, http_server akan menandatangani respons dari backend dan merespons dengan SXG. Untuk petunjuk penginstalan, lihat README.

Server Pemaket Web

Web Packager Server, webpkgserver, adalah alternatif untuk http_server sxg-rs, yang ditulis dalam Go. Untuk mengetahui petunjuk tentang cara menyiapkan server Web Packager, lihat Cara menyiapkan pertukaran bertanda tangan menggunakan Web Packager.

CLI Paket Web

Web Packager CLI menghasilkan SXG yang 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 harus melayani 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 menghasilkan SXG. Library ini adalah library SXG paling berfitur dan digunakan sebagai dasar untuk alat cloudflare_worker dan fastly_compute.

• libsxg adalah library C minimal untuk membuat SXG. ID 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 implementasi referensi untuk menghasilkan SXG. API ini digunakan sebagai dasar untuk alat CLI referensinya, gen-signedexchange dan alat Web Packager yang lebih berguna.

Negosiasi konten

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

Rekomendasi ini mencakup contoh untuk Apache dan nginx.

Memperbarui cache API

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

Menautkan ke SXG

Situs apa pun dapat meng-cache, menayangkan, dan mengambil data SXG halaman yang ditautkannya, 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 menentukan teknologi mana yang akan digunakan, Anda mungkin perlu mengambil alih antara mengoptimalkan berbagai aspek. Bagian berikut mengilustrasikan beberapa nilai unik yang diberikan SXG dalam peluang solusi. Faktor-faktor ini dapat berubah dari waktu ke waktu seiring berkembangnya ruang solusi yang tersedia.

Lebih sedikit permintaan untuk ditayangkan

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

• SXG di-cache dan dapat dikirim ke pengguna hingga masa berlakunya habis. Dengan demikian, banyak pengambilan data hanya dapat ditangani oleh server cache.
• SXG dapat ditampilkan kepada pengguna dengan dan tanpa cookie di situs Anda. Dengan demikian, terkadang 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 dengan 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

Signed HTTP Exchange adalah mekanisme pengiriman yang memungkinkan verifikasi asal dan validitas resource secara terpisah dari cara pengiriman resource. Akibatnya, SXG dapat didistribusikan oleh pihak ketiga sekaligus mempertahankan atribusi penayang penuh.

Bacaan lebih lanjut

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