Resep cookie SameSite

Rowan Merewood

Chrome, Firefox, Edge, dan yang lainnya mengubah perilaku {i>default<i} mereka sesuai dengan IETF proposal, Cookie yang Sedikit Lebih Baik sehingga:

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

Jika Anda belum melakukannya, Anda harus memperbarui atribut untuk {i>cookie <i}pihak ketiga, sehingga mereka tidak akan diblokir di masa mendatang.

Kasus penggunaan untuk cookie lintas situs atau pihak ketiga

Ada beberapa kasus penggunaan dan pola umum di mana cookie perlu dikirim dalam konteks pihak ketiga. Jika Anda menyediakan atau bergantung pada salah satu penerapan ini, pastikan Anda atau penyedia memperbarui cookie mereka ke menjaga agar layanan berfungsi dengan baik.

Konten dalam <iframe>

Konten dari situs lain yang ditampilkan di <iframe> berasal dari pihak ketiga konteks tambahan. Kasus penggunaan standar mencakup:

• Konten tersemat yang dibagikan dari situs lain, seperti video, peta, contoh kode, dan postingan media sosial Anda.
• Widget dari layanan eksternal seperti pembayaran, kalender, pemesanan, dan fitur reservasi.
• Widget seperti tombol sosial atau layanan antipenipuan yang memberikan kesan tidak terlalu jelas <iframes>.

{i>Cookie<i} dapat digunakan di sini untuk, antara lain, mempertahankan status sesi, preferensi umum, mengaktifkan statistik, atau mempersonalisasi konten bagi pengguna dengan akun yang sudah ada.

Karena web pada dasarnya dapat disusun, <iframes> juga digunakan untuk menyematkan konten yang dilihat dalam konteks tingkat atas atau pihak pertama. Semua cookie situs yang ditampilkan dalam penggunaan iframe dianggap sebagai cookie pihak ketiga. Jika Anda membuat situs yang Anda inginkan untuk disematkan oleh situs lain, dan memerlukan cookie untuk membuatnya Anda juga perlu memastikan bahwa kode tersebut ditandai untuk penggunaan lintas situs atau bahwa Anda dapat kembali dengan baik tanpanya.

"Tidak aman" permintaan di seluruh situs

"Tidak aman" mungkin terdengar mengkhawatirkan di sini, tetapi ini mengacu pada permintaan apa pun yang mungkin yang dimaksudkan untuk mengubah status. Di web, permintaan tersebut utamanya adalah permintaan POST. {i>Cookies<i} yang ditandai sebagai SameSite=Lax dikirim pada navigasi tingkat atas yang aman, seperti mengklik tautan untuk membuka situs lain. Namun, sesuatu seperti kiriman <form> ke situs lain yang menggunakan POST tidak menyertakan {i>cookie<i}.

Pola ini digunakan untuk situs yang dapat mengalihkan pengguna ke situs untuk melakukan beberapa operasi sebelum kembali, misalnya, mengalihkan ke penyedia identitas pihak ketiga. Sebelum pengguna meninggalkan situs, cookie yang berisi token sekali pakai dengan ekspektasi bahwa token ini dapat memeriksa permintaan pengembalian untuk Pemalsuan Permintaan Lintas Situs (CSRF) serangan. Jika permintaan pengembalian tersebut masuk melalui POST, Anda harus menandai cookie sebagai SameSite=None; Secure.

Resource jarak jauh

Semua resource jarak jauh di halaman, misalnya 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 kemungkinan akan menyertakan cookie. Untuk XMLHttpRequest, cookie yang diharapkan biasanya ditunjukkan dengan Nilai withCredentials untuk true. Cookie tersebut harus ditandai dengan tepat untuk disertakan dalam dan permintaan lintas situs.

Konten dalam WebView

WebView di aplikasi khusus platform didukung oleh browser. Developer harus menguji apakah pembatasan 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 halnya cookie yang ditetapkan menggunakan header atau JavaScript, pertimbangkan untuk menyertakan SameSite=None; Secure jika 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 alih-alih mengandalkan perilaku browser {i>default<i} untuk menanganinya, mereka dapat berperilaku secara 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 implementasi browser, Anda mungkin perlu menggunakan strategi 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 {i>browser<i} yang relatif baru dan berbeda menangani mereka dengan cara yang berbeda. Anda dapat merujuk ke halaman update di chromium.org untuk melihat daftar masalah umum, tetapi daftar ini mungkin tidak lengkap.

Salah satu solusi yang memungkinkan 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 SameSite dengan sejumlah nilai. Browser yang tidak mengimplementasikan perilaku baru akan mengabaikan nilai tersebut dan menyetelnya cookie 3pcookie-legacy. Saat memproses cookie yang disertakan, situs Anda harus pertama-tama periksa keberadaan jenis cookie 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:

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 untuk bekerja ekstra, menetapkan cookie yang berlebihan dan membuat perubahan pada saat menetapkan dan membaca cookie. Namun, Anda harus mencakup semua browser terlepas dari perilakunya, dan mempertahankan cookie pihak ketiga berfungsi.

Sebagai alternatif, Anda dapat mendeteksi klien menggunakan string agen pengguna saat Header Set-Cookie dikirim. Lihat daftar klien yang tidak kompatibel, dan menggunakan pustaka deteksi agen pengguna yang sesuai untuk platform Anda, untuk misalnya, library ua-parser-js di Node.js. Pendekatan ini hanya mengharuskan Anda membuat satu perubahan, tetapi agen pengguna yang mungkin tidak mengenai 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-baru ini, 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 hal ini jarang terjadi bagi tim pengembangan mana pun memiliki pengetahuan lengkap tentang di mana situs mereka menetapkan dan menggunakannya, terutama dalam kasus penggunaan lintas situs. Saat mengalami masalah, ini mungkin pertama kalinya Anda mengalami masalah. siapa pun telah mengalaminya, jadi jangan ragu untuk menghubungi:

• Ajukan masalah di Repositori contoh SameSite di GitHub.
• Ajukan pertanyaan di "situs yang sama" di StackOverflow.
• Untuk masalah terkait perilaku Chromium, laporkan bug di Issue tracker Chromium.
• Ikuti progres Chrome di Halaman pembaruan SameSite.