Dukungan header HTTP untuk Storage Access API

Natalia Markoborodova

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

Apa yang dimaksud dengan Header Akses Penyimpanan?

Header Akses Penyimpanan adalah header HTTP baru yang memungkinkan konten tersemat (seperti widget media sosial, kalender, alat interaktif, dan gambar) untuk memeriksa akses cookie yang tidak dipartisi. Sebelumnya, tindakan 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 tersemat, serta mendukung pemuatan resource non-iframe. Pelajari dokumentasi untuk mengetahui detail penerapannya.

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 penyematan, dan dapat memiliki nilai berikut:

• none: Penyematan tidak memiliki izin storage-access, sehingga tidak memiliki akses ke akses cookie yang tidak dipartisi.

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

• active: Penyematan memiliki akses cookie yang tidak dipartisi. Nilai ini akan disertakan pada permintaan lintas-asal yang memiliki akses ke cookie yang tidak dipartisi.

Header respons

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

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

• load: Memberi petunjuk kepada browser untuk memberikan akses kepada penyempan ke cookie yang tidak dipartisi untuk resource yang diminta. Menyertakan header ini sama dengan memanggil document.requestStorageAccess() jika izin storage-access 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 tersebut.

  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 lebih berperforma untuk menggunakan Storage Access API (SAA). Secara keseluruhan, perubahan ini memberikan beberapa peningkatan:

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

Memperbarui solusi

Dengan fitur Header Akses Penyimpanan, ada dua kasus saat Anda mungkin ingin 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 memiliki masukan atau mengalami masalah, Anda dapat melaporkan masalah. Anda juga dapat mempelajari Header Akses Penyimpanan lebih lanjut di penjelasan GitHub.