Dukungan header HTTP untuk Storage Access API

Natalia Markoborodova

Setelah uji coba origin berhasil, kami mengirimkan Header Akses Penyimpanan (SAH) di Chrome 133.

Apa itu Header Akses Penyimpanan?

Header Akses Penyimpanan adalah header HTTP baru yang memungkinkan konten sematan (seperti widget media sosial, kalender, alat interaktif, dan gambar) memeriksa akses cookie yang tidak dipartisi. Sebelumnya, hal ini hanya dapat dilakukan dengan JavaScript. Header permintaan Sec-Fetch-Storage-Access dan header respons Activate-Storage-Access yang baru meningkatkan performa dan pengalaman pengguna untuk situs yang mengandalkan konten sematan, serta mendukung pemuatan resource non-iframe. Pelajari dokumentasi untuk mengetahui detail penerapan.

Header permintaan

  Sec-Fetch-Storage-Access: <access-status>

Saat pengguna mengunjungi halaman yang menyematkan konten lintas situs, browser akan otomatis menyertakan header Sec-Fetch-Storage-Access dalam permintaan lintas situs yang mungkin memerlukan kredensial (seperti cookie). Header ini menunjukkan status izin akses cookie sematan, dan dapat memiliki nilai berikut:

• none: Sematan tidak memiliki izin storage-access, dan oleh karena itu tidak memiliki akses ke akses cookie yang tidak dipartisi.

• inactive: Sematan memiliki izin storage-access, tetapi belum memilih untuk menggunakannya dalam konteks saat ini. Penyematan tidak memiliki akses cookie yang tidak dipartisi.

• active: Sematan memiliki akses cookie yang tidak dipartisi. Nilai ini akan disertakan dalam permintaan lintas origin yang memiliki akses ke cookie yang tidak dipartisi.

Header respons

  Activate-Storage-Access: <retry-or-load>

Header Activate-Storage-Access menginstruksikan browser untuk mencoba lagi permintaan dengan cookie atau memuat resource secara langsung dengan Storage Access API (SAA) yang diaktifkan. Header dapat memiliki nilai berikut:

• load: Menginstruksikan browser untuk memberikan akses penyematan ke cookie yang tidak dipartisi untuk resource yang diminta. Menyertakan header ini sama dengan memanggil document.requestStorageAccess() jika storage-access izin telah diberikan. Tidak ada dialog tambahan yang akan ditampilkan kepada pengguna.

• retry: Server merespons bahwa browser harus mengaktifkan izin akses penyimpanan, lalu mencoba lagi permintaan.

  Activate-Storage-Access: retry; allowed-origin="https://site.example"
  Activate-Storage-Access: retry; allowed-origin=*
  Activate-Storage-Access: load

Keunggulan utama

Header Akses Penyimpanan adalah cara yang direkomendasikan dan berperforma lebih baik untuk menggunakan Storage Access API (SAA). Secara keseluruhan, perubahan ini menghadirkan beberapa peningkatan:

• Dukungan sematan non-iframe: Memungkinkan SAA untuk berbagai resource yang lebih luas.
• Pengurangan penggunaan jaringan: Lebih sedikit permintaan dan payload yang lebih kecil.
• Penggunaan CPU yang lebih rendah: Pemrosesan JavaScript yang lebih sedikit.
• UX yang lebih baik: Menghilangkan pemuatan perantara yang mengganggu.

Memperbarui solusi Anda

Dengan fitur Header Akses Penyimpanan, ada dua kasus saat Anda mungkin perlu memperbarui kode:

• Anda menggunakan SAA dan ingin mencapai performa yang lebih baik dengan menggunakan logika header untuk permintaan storage-access berikutnya.
• Anda memiliki validasi atau logika yang bergantung pada apakah header Origin disertakan dalam permintaan ke server Anda.

Lihat dokumentasi kami untuk mempelajari cara menggunakan Header Akses Penyimpanan dalam solusi Anda.

Berinteraksi dan memberikan masukan

Jika Anda memiliki masukan atau mengalami masalah, Anda dapat mengajukan masalah. Anda juga dapat mempelajari lebih lanjut Header Akses Penyimpanan di penjelasan GitHub.