Resep cookie SameSite

Rowan Merewood

Chrome, Firefox, Edge, dan browser lainnya mengubah perilaku defaultnya sesuai dengan proposal IETF , Incrementally Better Cookies sehingga:

• Cookie tanpa atribut SameSite diperlakukan sebagai SameSite=Lax, yang berarti perilaku defaultnya adalah membatasi cookie ke konteks pihak pertama saja.
• Cookie untuk penggunaan lintas situs harus menentukan SameSite=None; Secure agar dapat disertakan dalam konteks pihak ketiga.

Jika belum melakukannya, Anda harus memperbarui atribut untuk cookie pihak ketiga agar tidak diblokir di masa mendatang.

Kasus penggunaan untuk cookie lintas situs atau pihak ketiga

Ada sejumlah kasus penggunaan dan pola umum yang memerlukan cookie untuk dikirim dalam konteks pihak ketiga. Jika Anda menyediakan atau bergantung pada salah satu kasus penggunaan ini, pastikan Anda atau penyedia memperbarui cookie mereka agar layanan tetap berfungsi dengan benar.

Konten dalam <iframe>

Konten dari situs lain yang ditampilkan dalam <iframe> berada dalam konteks pihak ketiga. Kasus penggunaan standar mencakup:

• Konten tersemat yang dibagikan dari situs lain, seperti video, peta, contoh kode, dan postingan media sosial.
• Widget dari layanan eksternal seperti pembayaran, kalender, fitur pemesanan, dan reservasi.
• Widget seperti tombol media sosial atau layanan anti-penipuan yang membuat kurang jelas <iframes>.

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.

Karena web pada dasarnya dapat dikomposisikan, <iframes> juga digunakan untuk menyematkan konten yang dilihat dalam konteks pihak pertama atau tingkat atas. Cookie apa pun yang digunakan oleh situs yang ditampilkan dalam iframe dianggap sebagai cookie pihak ketiga. Jika Anda membuat situs yang ingin Anda sematkan ke situs lain, dan memerlukan cookie agar situs tersebut berfungsi, Anda juga harus memastikan cookie tersebut ditandai untuk penggunaan lintas situs atau Anda dapat melakukan penggantian dengan baik tanpa cookie tersebut.

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, permintaan tersebut terutama adalah permintaan POST. Cookie yang ditandai sebagai SameSite=Lax dikirim pada navigasi tingkat atas yang aman, seperti mengklik link untuk membuka situs lain. Namun, sesuatu seperti pengiriman <form> ke situs lain menggunakan POST tidak menyertakan cookie.

Pola ini digunakan untuk situs yang dapat mengalihkan pengguna ke layanan jarak jauh untuk melakukan beberapa operasi sebelum kembali, misalnya, mengalihkan ke penyedia identitas pihak ketiga. Sebelum pengguna meninggalkan situs, cookie akan ditetapkan yang berisi token penggunaan tunggal dengan harapan bahwa token ini dapat diperiksa pada permintaan yang kembali untuk mengurangi Pemalsuan Permintaan Lintas Situs (CSRF) serangan. Jika permintaan yang kembali tersebut berasal dari POST, Anda harus menandai cookie sebagai SameSite=None; Secure.

Resource jarak jauh

Resource jarak jauh apa pun di halaman, seperti dari <img> tag atau <script> tag, 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 kemungkinan akan menyertakan cookie. Untuk XMLHttpRequest, cookie yang diharapkan biasanya ditunjukkan oleh withCredentials nilai fo true. Cookie tersebut harus ditandai dengan benar agar dapat disertakan dalam permintaan lintas situs.

Konten dalam WebView

WebView dalam aplikasi khusus platform didukung oleh browser. Developer perlu menguji apakah batasan atau masalah yang memengaruhi aplikasi mereka juga berlaku untuk WebView aplikasi mereka.

Android juga memungkinkan aplikasi khusus platformnya menetapkan cookie secara langsung menggunakan CookieManager API. Seperti cookie yang ditetapkan menggunakan header atau JavaScript, pertimbangkan untuk menyertakan SameSite=None; Secure jika cookie tersebut ditujukan untuk penggunaan lintas situs.

Cara menerapkan SameSite saat ini

Tandai cookie apa pun yang hanya diperlukan dalam konteks pihak pertama sebagai SameSite=Lax atau SameSite=Strict bergantung pada kebutuhan Anda. Jika Anda tidak menandai cookie ini dan 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 apa pun yang diperlukan dalam konteks pihak ketiga sebagai SameSite=None; Secure. Kedua atribut tersebut diperlukan. 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 ini untuk menyertakan None dan memperbarui perilaku default masih relatif baru, browser yang berbeda menanganinya dengan cara yang berbeda. Anda dapat melihat ke halaman update di chromium.org untuk mengetahui daftar masalah yang diketahui, tetapi daftar ini mungkin tidak lengkap.

Salah satu solusi yang mungkin adalah menetapkan setiap cookie dalam 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 keberadaan gaya cookie baru terlebih dahulu, lalu kembali ke cookie lama jika tidak dapat menemukan cookie 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 tambahan untuk menetapkan cookie yang berlebihan dan melakukan perubahan pada titik penetapan dan pembacaan cookie. Namun, pendekatan ini harus mencakup semua browser, apa pun 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 melakukan 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 di repositori contoh SameSite di GitHub.

Mendapatkan bantuan

Cookie digunakan di mana saja di web, dan jarang ada tim pengembangan yang memiliki pengetahuan lengkap tentang tempat situs mereka menetapkan dan menggunakannya, terutama dalam kasus penggunaan lintas situs. Jika Anda mengalami masalah, mungkin ini adalah pertama kalinya masalah tersebut dialami oleh siapa pun, jadi jangan ragu untuk menghubungi:

• Ajukan masalah di repositori contoh SameSite di GitHub.
• Ajukan pertanyaan di "samesite" tag di StackOverflow.
• Untuk masalah terkait perilaku Chromium, laporkan bug di issue tracker Chromium.
• Ikuti progres Chrome di halaman SameSite update.