Chrome, Firefox, Edge, dan yang lainnya mengubah perilaku default sesuai dengan proposal IETF, Cookie secara Inkremental sehingga:
- Cookie tanpa atribut
SameSite
diperlakukan sebagaiSameSite=Lax
, yang berarti perilaku default-nya adalah membatasi cookie untuk konteks pihak pertama saja. - Cookie untuk penggunaan lintas situs harus menentukan
SameSite=None; Secure
untuk mengaktifkan penyertaan dalam konteks pihak ketiga.
Jika belum melakukannya, Anda harus memperbarui atribut untuk cookie pihak ketiga agar cookie pihak ketiga tidak diblokir di masa mendatang.
Kasus penggunaan untuk cookie lintas situs atau pihak ketiga
Ada sejumlah kasus dan pola penggunaan umum saat cookie perlu dikirim dalam konteks pihak ketiga. Jika Anda menyediakan atau bergantung pada salah satu kasus penggunaan ini, pastikan Anda atau penyedia memperbarui cookie-nya agar layanan tetap berfungsi dengan benar.
Konten dalam <iframe>
Konten dari situs lain yang ditampilkan di <iframe>
berada dalam konteks
pihak ketiga. Kasus penggunaan standar meliputi:
- Konten tersemat yang dibagikan dari situs lain, seperti video, peta, contoh kode, dan postingan media sosial.
- Widget dari layanan eksternal, seperti fitur pembayaran, kalender, pemesanan, dan reservasi.
- Widget seperti tombol sosial atau layanan antipenipuan yang membuat
<iframes>
terlihat kurang jelas.
Cookie dapat digunakan di sini untuk, antara lain, mempertahankan status sesi, menyimpan preferensi umum, mengaktifkan statistik, atau mempersonalisasi konten untuk pengguna dengan akun yang ada.
![Diagram jendela browser dengan URL konten yang disematkan tidak cocok dengan URL halaman.](https://web.dev/static/articles/samesite-cookie-recipes/image/diagram-a-browser-window-809ed902fbce7.png?authuser=6&hl=id)
Karena web pada dasarnya dapat dikomposisi, <iframes>
juga digunakan untuk menyematkan
konten yang dilihat dalam konteks tingkat atas atau pihak pertama. Cookie apa pun yang ditampilkan situs di iframe ini dianggap sebagai cookie pihak ketiga. Jika Anda
membuat situs yang ingin disematkan oleh situs lain, dan memerlukan cookie untuk membuatnya
berfungsi, Anda juga harus memastikan situs tersebut ditandai untuk penggunaan lintas situs, atau Anda
dapat kembali dengan baik tanpanya.
Permintaan "tidak aman" di seluruh situs
"Tidak aman" mungkin terdengar mengkhawatirkan di sini, tetapi mengacu pada permintaan apa pun yang mungkin
dimaksudkan untuk mengubah status. Di web, itu terutama permintaan POST. Cookie
yang ditandai sebagai SameSite=Lax
dikirim pada navigasi tingkat atas yang aman, seperti mengklik
link untuk membuka situs yang berbeda. Namun, hal seperti pengiriman <form>
ke situs lain menggunakan POST tidak menyertakan cookie.
![Diagram permintaan yang berpindah dari satu halaman ke halaman lainnya.](https://web.dev/static/articles/samesite-cookie-recipes/image/diagram-a-request-moving-46b47373768e3.png?authuser=6&hl=id)
Pola ini digunakan untuk situs yang dapat mengalihkan pengguna ke layanan jarak jauh untuk melakukan beberapa operasi sebelum kembali, misalnya mengalihkan pengguna ke penyedia identitas pihak ketiga. Sebelum pengguna keluar dari situs, cookie akan ditetapkan yang berisi token penggunaan tunggal dengan ekspektasi bahwa token ini dapat diperiksa pada permintaan yang ditampilkan untuk mengurangi serangan Pemalsuan Permintaan Lintas Situs (CSRF). Jika permintaan pengembalian tersebut berasal melalui POST, Anda harus menandai cookie sebagai SameSite=None; Secure
.
Resource jarak jauh
Setiap resource jarak jauh di halaman, seperti dari tag <img>
atau tag <script>
,
mungkin bergantung pada cookie yang dikirim dengan permintaan. Kasus penggunaan umum mencakup
piksel pelacakan dan mempersonalisasi konten.
Hal ini juga berlaku untuk permintaan yang dikirim dari JavaScript Anda menggunakan fetch
atau
XMLHttpRequest
. Jika fetch()
dipanggil dengan
opsi credentials: 'include'
,
permintaan tersebut mungkin akan menyertakan cookie.
Untuk XMLHttpRequest
, cookie yang diharapkan biasanya ditunjukkan dengan nilai withCredentials
dari true
. Cookie tersebut harus ditandai dengan tepat untuk disertakan dalam permintaan lintas situs.
Konten dalam WebView
WebView di aplikasi khusus platform didukung oleh browser. Developer perlu menguji apakah batasan atau masalah yang memengaruhi aplikasi juga berlaku untuk WebView aplikasi mereka.
Android juga memungkinkan aplikasi khusus platformnya menetapkan cookie secara langsung menggunakan
CookieManager API.
Seperti halnya cookie yang ditetapkan menggunakan header atau JavaScript, pertimbangkan untuk menyertakan SameSite=None; Secure
jika cookie tersebut ditujukan untuk penggunaan lintas situs.
Cara menerapkan SameSite
sekarang
Tandai cookie yang hanya diperlukan dalam konteks pihak pertama sebagai SameSite=Lax
atau SameSite=Strict
, bergantung pada kebutuhan Anda. Jika Anda tidak menandai cookie ini
dan justru mengandalkan perilaku browser default untuk menanganinya, cookie tersebut dapat berperilaku
tidak konsisten di seluruh browser dan berpotensi memicu peringatan konsol untuk setiap
cookie.
Set-Cookie: first_party_var=value; SameSite=Lax
Pastikan untuk menandai cookie yang diperlukan dalam konteks pihak ketiga sebagai
SameSite=None; Secure
. Kedua atribut wajib diisi. Jika Anda hanya menentukan None
tanpa Secure
, cookie akan ditolak. Untuk memperhitungkan perbedaan
dalam penerapan browser, Anda mungkin perlu menggunakan beberapa strategi
mitigasi yang dijelaskan dalam Menangani klien yang tidak kompatibel.
Set-Cookie: third_party_var=value; SameSite=None; Secure
Menangani klien yang tidak kompatibel
Karena perubahan untuk menyertakan None
dan memperbarui perilaku default masih
relatif baru, browser yang berbeda menanganinya dengan cara yang berbeda. Anda dapat membuka halaman update di chromium.org untuk melihat daftar masalah umum, tetapi daftar ini mungkin tidak lengkap.
Salah satu solusi yang dapat dilakukan adalah menetapkan setiap cookie dengan gaya baru dan lama:
Set-cookie: 3pcookie=value; SameSite=None; Secure
Set-cookie: 3pcookie-legacy=value; Secure
Browser yang menerapkan perilaku yang lebih baru menetapkan cookie dengan nilai SameSite
. Browser yang tidak menerapkan perilaku baru akan mengabaikan nilai tersebut dan menetapkan cookie 3pcookie-legacy
. Saat memproses cookie yang disertakan, situs Anda harus
memeriksa terlebih dahulu keberadaan gaya cookie yang baru, lalu kembali ke
cookie lama jika tidak dapat menemukan yang baru.
Contoh berikut menunjukkan cara melakukannya di Node.js, menggunakan framework Express dan middleware cookie-parser-nya:
const express = require('express');
const cp = require('cookie-parser');
const app = express();
app.use(cp());
app.get('/set', (req, res) => {
// Set the new style cookie
res.cookie('3pcookie', 'value', { sameSite: 'none', secure: true });
// And set the same value in the legacy cookie
res.cookie('3pcookie-legacy', 'value', { secure: true });
res.end();
});
app.get('/', (req, res) => {
let cookieVal = null;
if (req.cookies['3pcookie']) {
// check the new style cookie first
cookieVal = req.cookies['3pcookie'];
} else if (req.cookies['3pcookie-legacy']) {
// otherwise fall back to the legacy cookie
cookieVal = req.cookies['3pcookie-legacy'];
}
res.end();
});
app.listen(process.env.PORT);
Pendekatan ini mengharuskan Anda melakukan pekerjaan ekstra saat menetapkan cookie redundan dan membuat perubahan pada saat menetapkan dan membaca cookie. Namun, opsi ini harus mencakup semua browser terlepas dari perilakunya, dan membuat cookie pihak ketiga tetap berfungsi.
Sebagai alternatif, Anda dapat mendeteksi klien menggunakan string agen pengguna saat header Set-Cookie
dikirim. Lihat daftar klien yang tidak kompatibel, dan gunakan library deteksi agen pengguna yang sesuai untuk platform Anda, misalnya, library ua-parser-js di Node.js. Pendekatan ini hanya mengharuskan Anda membuat satu perubahan, tetapi sniffing agen pengguna mungkin tidak menangkap semua pengguna yang terpengaruh.
Dukungan untuk SameSite=None
dalam bahasa, library, dan framework
Sebagian besar bahasa dan library mendukung atribut SameSite
untuk
cookie. Namun, karena penambahan SameSite=None
masih relatif baru, Anda mungkin perlu mengatasi beberapa perilaku standar untuk saat ini.
Perilaku ini didokumentasikan dalam
repositori contoh SameSite
di GitHub.
Mendapatkan bantuan
Cookie digunakan di mana saja di web, dan tim pengembangan jarang sekali memiliki pengetahuan lengkap tentang tempat situs mereka menetapkan dan menggunakannya, terutama dalam kasus penggunaan lintas situs. Saat Anda mengalami masalah, mungkin itu adalah pertama kalinya siapa pun mengalaminya, jadi jangan ragu untuk menghubungi kami:
- Ajukan masalah di
repositori contoh
SameSite
di GitHub. - Ajukan pertanyaan menggunakan tag"samesite" di StackOverflow.
- Untuk masalah terkait perilaku Chromium, ajukan bug di issue tracker Chromium.
- Ikuti progres Chrome di
halaman update
SameSite
.