Chrome menghentikan dukungan secara bertahap untuk cookie pihak ketiga untuk mengurangi pelacakan lintas situs. Hal ini menimbulkan tantangan bagi situs dan layanan yang mengandalkan cookie dalam konteks tersemat, untuk perjalanan pengguna seperti autentikasi. Storage Access API (SAA) memungkinkan kasus penggunaan ini terus berfungsi, sekaligus membatasi pelacakan lintas situs sebanyak mungkin.
Status penerapan
Storage Access API tersedia di semua browser utama, tetapi ada sedikit perbedaan implementasi antar-browser. Perbedaan ini telah disorot di bagian yang relevan dalam postingan ini.
Kami terus berupaya menyelesaikan semua masalah pemblokiran lainnya, sebelum menstandarkan API.
Apa itu Storage Access API?
Storage Access API adalah JavaScript API yang memungkinkan iframe meminta izin akses penyimpanan jika akses ditolak oleh setelan browser. Penyematan dengan kasus penggunaan yang bergantung pada pemuatan resource lintas situs dapat menggunakan API untuk meminta izin akses dari pengguna, sesuai kebutuhan.
Jika permintaan penyimpanan disetujui, maka iframe akan memiliki akses ke cookie lintas situsnya, yang juga tersedia saat pengguna mengunjunginya sebagai situs tingkat atas.
Storage Access API memungkinkan akses cookie lintas situs tertentu diberikan dengan beban minimal kepada pengguna akhir, sekaligus tetap mencegah akses cookie lintas situs generik seperti yang sering digunakan untuk pelacakan pengguna.
Kasus penggunaan
Beberapa sematan pihak ketiga memerlukan akses ke cookie lintas situs untuk memberikan pengalaman yang lebih baik kepada pengguna—sesuatu yang tidak akan tersedia setelah cookie pihak ketiga tidak digunakan lagi.
Kasus penggunaan mencakup:
- Widget komentar tersemat yang memerlukan detail sesi login.
- Tombol "Suka" media sosial yang memerlukan detail sesi login.
- Dokumen tersemat yang memerlukan detail sesi login.
- Pengalaman premium yang diberikan ke sematan video (misalnya, untuk tidak menampilkan iklan kepada pengguna yang login, atau mengetahui preferensi pengguna terhadap teks tertutup atau membatasi jenis video tertentu).
- Sistem pembayaran tersemat.
Banyak dari kasus penggunaan ini melibatkan persistensi akses login dalam iframe tersemat.
Kapan harus menggunakan Storage Access API daripada API lain
Storage Access API adalah salah satu alternatif penggunaan cookie pihak ketiga. Jadi, penting untuk memahami kapan API ini harus digunakan dibandingkan dengan yang lain. Hal ini dimaksudkan untuk kasus penggunaan jika kedua hal berikut berlaku:
- Pengguna akan berinteraksi dengan konten yang disematkan—artinya, ini bukan iframe pasif atau iframe tersembunyi.
- Pengguna telah mengunjungi origin yang disematkan dalam konteks level atas—yaitu, saat origin tersebut tidak disematkan di situs lain.
Ada API alternatif untuk berbagai kasus penggunaan:
- Cookie Memiliki Status Partisi Independen (CHIPS) memungkinkan developer mengikutsertakan cookie ke penyimpanan "dipartisi", dengan wadah cookie terpisah untuk setiap situs tingkat atas. Misalnya, widget chat web pihak ketiga mungkin mengandalkan setelan cookie untuk menyimpan informasi sesi. Informasi sesi disimpan per situs, sehingga cookie yang ditetapkan oleh widget tidak perlu diakses di situs lain tempat widget tersebut juga disematkan. Storage Access API berguna ketika widget pihak ketiga yang disematkan bergantung pada pembagian informasi yang sama di berbagai asal (misalnya untuk detail atau preferensi sesi login).
- Set Situs Terkait (RWS) adalah cara bagi organisasi untuk mendeklarasikan hubungan antar-situs, sehingga browser mengizinkan akses cookie pihak ketiga yang terbatas untuk tujuan tertentu. Situs tetap perlu meminta akses dengan Storage Access API, tetapi untuk situs dalam set, akses dapat diberikan tanpa perintah pengguna.
- Pengelolaan Kredensial Federasi (FedCM) adalah pendekatan yang menjaga privasi untuk layanan identitas gabungan. Storage Access API menangani akses cookie setelah proses login. Untuk beberapa kasus penggunaan, FedCM memberikan solusi alternatif untuk Storage Access API, dan mungkin lebih disukai karena menampilkan prompt browser yang lebih berorientasi login. Namun, mengadopsi FedCM biasanya memerlukan perubahan tambahan pada kode Anda, misalnya untuk mendukung endpoint HTTP-nya.
- Antipenipuan, terkait iklan, dan pengukuran API juga ada, dan Storage Access API tidak ditujukan untuk mengatasi masalah tersebut.
Menggunakan Storage Access API
Storage Access API memiliki dua metode berbasis promise:
API ini juga terintegrasi dengan Permissions API. Tindakan ini memungkinkan Anda memeriksa status izin akses penyimpanan dalam konteks pihak ketiga, yang menunjukkan apakah panggilan ke document.requestStorageAccess() akan otomatis diberikan:
Menggunakan metode hasStorageAccess()
Saat situs pertama kali dimuat, situs tersebut dapat menggunakan metode hasStorageAccess() untuk memeriksa apakah akses ke cookie pihak ketiga telah diberikan.
// Set a hasAccess boolean variable which defaults to false.
let hasAccess = false;
async function handleCookieAccessInit() {
if (!document.hasStorageAccess) {
// Storage Access API is not supported so best we can do is
// hope it's an older browser that doesn't block 3P cookies.
hasAccess = true;
} else {
// Check whether access has been granted via the Storage Access API.
// Note on page load this will always be false initially so we could be
// skipped in this example, but including for completeness for when this
// is not so obvious.
hasAccess = await document.hasStorageAccess();
if (!hasAccess) {
// Handle the lack of access (covered later)
}
}
if (hasAccess) {
// Use the cookies.
}
}
handleCookieAccessInit();
Akses penyimpanan hanya diberikan ke dokumen iframe setelah memanggil requestStorageAccess(),, sehingga hasStorageAccess() pada awalnya akan selalu menampilkan nilai salah—kecuali saat dokumen asal yang sama dalam iframe yang sama telah diberi akses. Pemberian tersebut dipertahankan di seluruh navigasi origin yang sama di dalam iframe secara khusus untuk mengizinkan pemuatan ulang setelah memberikan akses untuk halaman yang memerlukan cookie dalam permintaan awal untuk dokumen HTML.
Menggunakan metode requestStorageAccess()
Jika tidak memiliki akses, iframe mungkin perlu meminta akses menggunakan metode requestStorageAccess():
if (!hasAccess) {
try {
await document.requestStorageAccess();
} catch (err) {
// Access was not granted and it may be gated behind an interaction
return;
}
}
Saat pertama kali permintaan ini diminta, pengguna mungkin perlu menyetujui akses ini dengan perintah browser. Setelah itu, promise akan diselesaikan, atau akan ditolak, yang mengakibatkan pengecualian jika await digunakan.
Untuk mencegah penyalahgunaan, perintah browser ini hanya akan ditampilkan setelah interaksi pengguna. Itulah sebabnya requestStorageAccess() awalnya harus dipanggil dari pengendali peristiwa yang diaktifkan pengguna, bukan segera setelah iframe dimuat:
async function doClick() {
// Only do this extra check if access hasn't already been given
// based on the hasAccess variable.
if (!hasAccess) {
try {
await document.requestStorageAccess();
hasAccess = true; // Can assume this was true if above did not reject.
} catch (err) {
// Access was not granted.
return;
}
}
if (hasAccess) {
// Use the cookies
}
}
document.querySelector('#my-button').addEventListener('click', doClick);
Dialog izin
Saat pengguna mengklik tombol tersebut untuk pertama kalinya, perintah browser akan muncul secara otomatis, biasanya di kolom URL. Berikut adalah contoh perintah Chrome, tetapi browser lain memiliki UI yang serupa:
Dialog dapat dilewati oleh browser dan izin otomatis diberikan dalam keadaan tertentu:
- Jika halaman dan iframe telah digunakan dalam 30 hari terakhir setelah menerima permintaan.
- Jika iframe sematan adalah bagian dari Set Situs Terkait.
- Di Firefox, perintah juga dilewati untuk situs yang dikenal (situs yang pernah berinteraksi dengan Anda di tingkat teratas) selama lima upaya pertama.
Atau, dalam keadaan tertentu, metode ini dapat ditolak secara otomatis tanpa menampilkan perintah:
- Jika pengguna belum pernah mengunjungi dan berinteraksi dengan situs yang memiliki iframe sebagai dokumen tingkat atas, bukan dalam iframe. Artinya, Storage Access API hanya berguna untuk situs tersemat yang sebelumnya pernah dikunjungi pengguna dalam konteks pihak pertama.
- Jika metode
requestStorageAccess()dipanggil di luar peristiwa interaksi pengguna tanpa persetujuan sebelumnya dari dialog setelah interaksi.
Meskipun pengguna akan dimintai info saat penggunaan awal, kunjungan berikutnya dapat menyelesaikan requestStorageAccess() tanpa dialog dan tanpa memerlukan interaksi pengguna di Chrome dan Firefox. Perhatikan bahwa Safari selalu memerlukan interaksi pengguna.
Karena akses cookie dapat diberikan tanpa perintah atau interaksi pengguna, sering kali Anda dapat memperoleh akses cookie pihak ketiga sebelum interaksi pengguna di browser yang mendukung hal ini (Chrome dan Firefox) dengan memanggil requestStorageAccess() saat pemuatan halaman. Hal ini memungkinkan Anda segera mengakses cookie lintas situs pihak ketiga dan memberikan pengalaman yang lebih lengkap, bahkan sebelum pengguna berinteraksi dengan iframe. Hal ini bisa menjadi pengalaman pengguna yang lebih baik untuk beberapa situasi dibandingkan menunggu interaksi pengguna.
Menggunakan kueri izin storage-access
Untuk memeriksa apakah akses dapat diberikan tanpa interaksi pengguna, Anda dapat memeriksa status izin storage-access dan hanya melakukan panggilan requestStoreAccess() lebih awal jika tidak ada tindakan pengguna yang diperlukan, bukan memanggilnya dan membuatnya gagal saat interaksi diperlukan.
Hal ini juga memungkinkan Anda menangani kebutuhan akan perintah di awal dengan menampilkan konten yang berbeda—misalnya, tombol login.
Kode berikut menambahkan pemeriksaan izin storage-access ke contoh sebelumnya:
// Set a hasAccess boolean variable which defaults to false except for
// browsers which don't support the API - where we assume
// such browsers also don't block third-party cookies.
let hasAccess = false;
async function hasCookieAccess() {
// Check if Storage Access API is supported
if (!document.requestStorageAccess) {
// Storage Access API is not supported so best we can do is
// hope it's an older browser that doesn't block 3P cookies.
return true;
}
// Check if access has already been granted
if (await document.hasStorageAccess()) {
return true;
}
// Check the storage-access permission
// Wrap this in a try/catch for browsers that support the
// Storage Access API but not this permission check
// (e.g. Safari and older versions of Firefox).
let permission;
try {
permission = await navigator.permissions.query(
{name: 'storage-access'}
);
} catch (error) {
// storage-access permission not supported. Assume no cookie access.
return false;
}
if (permission) {
if (permission.state === 'granted') {
// Permission has previously been granted so can just call
// requestStorageAccess() without a user interaction and
// it will resolve automatically.
try {
await document.requestStorageAccess();
return true;
} catch (error) {
// This shouldn't really fail if access is granted, but return false
// if it does.
return false;
}
} else if (permission.state === 'prompt') {
// Need to call requestStorageAccess() after a user interaction
// (potentially with a prompt). Can't do anything further here,
// so handle this in the click handler.
return false;
} else if (permission.state === 'denied') {
// Currently not used. See:
// https://github.com/privacycg/storage-access/issues/149
return false;
}
}
// By default return false, though should really be caught by one of above.
return false;
}
async function handleCookieAccessInit() {
hasAccess = await hasCookieAccess();
if (hasAccess) {
// Use the cookies.
}
}
handleCookieAccessInit();
Iframe dengan sandbox
Saat menggunakan Storage Access API di iframe dengan sandbox, izin sandbox berikut diperlukan:
allow-storage-access-by-user-activationdiperlukan untuk mengizinkan akses ke Storage Access API.allow-scriptsdiperlukan untuk mengizinkan penggunaan JavaScript untuk memanggil API.allow-same-origindiperlukan untuk mengizinkan akses ke cookie asal yang sama dan penyimpanan lainnya.
Contoh:
<iframe sandbox="allow-storage-access-by-user-activation
allow-scripts
allow-same-origin"
src="..."></iframe>
Persyaratan cookie
Agar dapat diakses dengan Storage Access API di Chrome, cookie lintas situs harus disetel dengan dua atribut berikut:
SameSite=None- yang diperlukan untuk menandai cookie sebagai lintas situsSecure- yang memastikan hanya cookie yang ditetapkan oleh situs HTTPS yang dapat diakses.
Di Firefox dan Safari, cookie ditetapkan secara default ke SameSite=None dan tidak membatasi cookie SSA ke Secure sehingga atribut ini tidak diperlukan. Sebaiknya berikan penjelasan tentang atribut SameSite secara eksplisit dan selalu gunakan cookie Secure.
Akses halaman tingkat atas
Storage Access API ditujukan untuk mengaktifkan akses ke cookie pihak ketiga dalam iframe tersemat.
Ada juga kasus penggunaan lain saat halaman tingkat atas memerlukan akses ke cookie pihak ketiga. Misalnya, gambar atau skrip yang dibatasi oleh cookie, yang mungkin ingin disertakan langsung oleh pemilik situs di dokumen tingkat atas, bukan di iframe. Untuk mengatasi kasus penggunaan ini, Chrome telah mengusulkan ekstensi untuk Storage Access API yang menambahkan metode requestStorageAccessFor().
Metode requestStorageAccessFor()
Metode requestStorageAccessFor() berfungsi dengan cara yang mirip dengan requestStorageAccess(), tetapi untuk resource level atas. Metode ini hanya dapat digunakan untuk situs dalam Set Situs Terkait guna mencegah pemberian akses umum ke cookie pihak ketiga.
Untuk detail selengkapnya tentang cara menggunakan requestStorageAccessFor(), baca Set Situs Terkait: panduan developer.
Kueri izin top-level-storage-access
Dukungan Browser
- 119
- 119
- x
- x
Serupa dengan izin storage-access, ada izin top-level-storage-access untuk memeriksa apakah akses dapat diberikan untuk requestStorageAccessFor().
Apa perbedaan Storage Access API saat digunakan dengan RWS?
Jika Set Situs Terkait digunakan dengan Storage Access API, kemampuan tambahan tertentu akan tersedia seperti yang dijelaskan dalam tabel berikut:
| Tanpa RWS | Dengan RWS | |
|---|---|---|
| Memerlukan gestur pengguna untuk memulai permintaan akses penyimpanan | ||
| Mewajibkan pengguna membuka asal penyimpanan yang diminta dalam konteks level atas sebelum memberikan akses | ||
| Dialog pengguna pertama kali dapat dilewati | ||
requestStorageAccess tidak perlu dipanggil jika akses telah diberikan sebelumnya |
||
| Otomatis memberikan akses di seluruh domain lain di Situs Situs Terkait | ||
Mendukung requestStorageAccessFor untuk akses halaman tingkat atas |
Demo: menyetel dan mengakses cookie
Demo berikut menunjukkan cara cookie yang ditetapkan sendiri di layar pertama demo dapat diakses dalam frame tersemat di situs kedua demo:
storage-access-api-demo.glitch.me
Demo ini mewajibkan browser yang menonaktifkan cookie pihak ketiga:
- Chrome 118 atau yang lebih baru dengan tanda
chrome://flags/#test-third-party-cookie-phaseoutditetapkan dan browser dimulai ulang. - Firefox
- Safari
Referensi
- Baca spesifikasi atau ikuti dan sampaikan masalah.
- Dokumentasi dan panduan API.
- Dokumentasi Chrome tentang penggunaan Storage Access API di Set Situs Terkait