Signed HTTP Exchange (SXG)

SXG adalah mekanisme pengiriman yang memungkinkan autentikasi asal resource secara independen dari cara pengirimannya.

Katie Hempenius
Katie Hempenius
X
Devin Mullins
Devin Mullins
X GitHub

Signed exchanges (SXG) adalah mekanisme pengiriman yang memungkinkan autentikasi asal resource secara independen 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 penayangan 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 (mulai dari 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 bahwa halaman tetap tidak diubah dan diatribusikan dengan benar ke asalnya. Semua informasi yang berpotensi mengidentifikasi 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 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 menayangkan konten.

Diagram yang menjelaskan cara Kerja Signed HTTP Exchange. Browser berkomunikasi dengan cache yang berkomunikasi dengan situs tujuan

Secara historis, satu-satunya cara bagi situs untuk menggunakan pihak ketiga untuk mendistribusikan kontennya dengan tetap mempertahankan atribusi adalah agar situs tersebut membagikan sertifikat SSL-nya dengan distributor tersebut. Hal ini memiliki kelemahan keamanan; selain itu, hal 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 mencakup pertukaran. Pertukaran HTTP terdiri dari URL permintaan, informasi negosiasi konten, dan respons HTTP.

Berikut adalah contoh file SXG yang didekode.

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 dapat berlaku maksimal 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 menampilkan 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 SXG Dinamis.

Pengemasan Web

SXG adalah bagian dari kelompok proposal spesifikasi Web Packaging yang lebih luas. Selain SXG, komponen utama lain dari spesifikasi Web Packaging adalah Web Bundle ("pertukaran HTTP yang dipaketkan"). Paket Web adalah kumpulan resource HTTP dan metadata yang diperlukan untuk menafsirkan paket.

Hubungan antara SXG dan Web Bundle adalah titik kebingungan yang umum. SXG dan Web Bundle adalah dua teknologi berbeda yang tidak bergantung satu sama lain. Web Bundle dapat digunakan dengan signed exchange dan unsigned exchange. Sasaran umum yang diajukan oleh SXG dan Web Bundle adalah pembuatan format "web packaging" yang memungkinkan situs dibagikan secara keseluruhan untuk konsumsi offline.

Mempercepat Pemuatan Halaman dengan Signed HTTP Exchange

Mengaktifkan Signed Exchanges dapat membantu mempercepat performa halaman web dan dengan demikian 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 sub-resource pemblokir render. 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 dari Google Penelusuran:

Dampak Signed HTTP Exchange

Dari eksperimen sebelumnya, kami telah mengamati pengurangan LCP rata-rata 300 md hingga 400 md dari pengambilan data yang diaktifkan 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 kita lihat bagaimana penerapan Signed Exchanges membantu RebelMouse, sebuah Sistem Pengelolaan Konten (CMS) terkemuka, meningkatkan performa dan metrik bisnis pelanggan mereka:

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

Cloudflare menemukan bahwa SXG meningkatkan TTFB untuk 98% situs yang diuji, dan meningkatkan LCP untuk 85% situs, dengan peningkatan median lebih dari 20% pada 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 pengiriman—tidak mengubah konten yang mendasarinya.

AMP

Konten AMP dapat dikirim menggunakan SXG. SXG memungkinkan konten AMP untuk pengambilan data dan ditampilkan menggunakan URL kanonis, bukan URL AMP-nya.AMP memiliki alat terpisah untuk membuat 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, dan kunjungi contoh halaman penelusuran ini. Pertukaran Bertanda Tangan dapat diidentifikasi dengan mencari signed-exchange di kolom Jenis.

Screenshot yang menampilkan permintaan SXG dalam panel &#39;Jaringan&#39; di DevTools
Panel Jaringan di DevTools

Tab Preview memberikan informasi selengkapnya tentang konten SXG.

Screenshot tab &#39;Pratinjau&#39; untuk SXG
Tab Pratinjau di DevTools

Alat

Menerapkan SXG terdiri dari membuat SXG yang sesuai dengan URL tertentu, lalu menayangkan 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 Certificate Authority Google menggunakan klien ACME apa pun. Server Web Packager memiliki klien ACME bawaan, dan sxg-rs akan segera memilikinya.

Alat SXG khusus platform

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

Alat SXG serbaguna

Server HTTP sxg-rs

sxg-rs http_server bertindak sebagai reverse proxy untuk menayangkan SXG. Untuk permintaan dari crawler SXG, http_server akan menandatangani respons dari backend dan merespons dengan SXG. Untuk petunjuk penginstalan, lihat README.

Server Web Packager

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

CLI Web Packager

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 menayangkan sertifikat SXG sebagai application/cert-chain+cbor.

Library SXG

Library ini dapat digunakan untuk membuat generator SXG Anda sendiri:

  • sxg_rs adalah library Rust untuk membuat SXG. Library ini adalah library SXG yang paling memiliki fitur dan digunakan sebagai dasar untuk alat cloudflare_worker dan fastly_compute.

  • libsxg adalah library C minimal untuk menghasilkan SXG. Filter 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 pembuatan SXG. Alat ini digunakan sebagai dasar untuk alat CLI referensinya, gen-signedexchange, dan alat Web Packager yang lebih lengkap fiturnya.

Negosiasi konten

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

Rekomendasi ini mencakup contoh untuk Apache dan nginx.

Update 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 API cache update untuk mengetahui detailnya.

Menautkan ke SXG

Setiap situs dapat meng-cache, menayangkan, 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 menentukan teknologi yang akan digunakan, Anda mungkin perlu mengorbankan pengoptimalan berbagai aspek. Bagian berikut mengilustrasikan beberapa nilai unik yang disediakan SXG dalam ruang kemungkinan solusi. Faktor-faktor ini dapat berubah dari waktu ke waktu seiring dengan 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 dipramuat, tetapi pengguna tidak mengunjungi halaman, atau byte yang dipramuat 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 dapat ditangani hanya oleh server cache.
  • SXG dapat ditampilkan kepada pengguna dengan dan tanpa cookie di situs Anda. Dengan demikian, halaman tidak 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 melakukan pramuat sub-resource untuk halaman Anda, seperti JavaScript, CSS, font, dan gambar, saat ditentukan menggunakan header Link.
  • Dalam waktu dekat, pengambilan data SXG dari Google Penelusuran akan tersedia di lebih banyak jenis hasil penelusuran.

Kesimpulan

Signed Exchanges adalah mekanisme pengiriman yang memungkinkan verifikasi asal dan validitas resource secara independen dari cara resource dikirim. Akibatnya, SXG dapat didistribusikan oleh pihak ketiga sambil mempertahankan atribusi penayang penuh.

Bacaan lebih lanjut