Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP
Code

Pengantar untuk Cookie

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Andy Nur (you can also view the original English article)

Kamu mungkin pernah mendengar tentang cookie, tetapi apa sebenarnya itu dan apa yang sebenarnya bisa kita lakukan dengannya? Pada tutorial ini, kita akan fokus pada dasar-dasar cookie, dan belajar tentang fungsinya di berbagai aplikasi web dan environment situs. Kita juga akan belajar cara menggunakannya dalam proyek PHP dan JavaScript kita, sambil memberikan perhatian khusus pada masalah keamanan yang mungkin timbul saat menggunakannya. Setelah membaca ini, kamu akan mendapatkan keterampilan yang diperlukan untuk menerapkan cookie dengan aman ke dalam aplikasi web-mu sendiri.


Langkah 1. Memahami Cookie

Langkah pertama dalam perjalanan kita adalah menemukan apa sebenarnya cookie ini! Bahkan jika kamu telah bekerja dengannya, kamu mungkin masih menemukan bagian ini sangat berguna - jadi tetaplah bersama saya!

Abstrak

Kamu dapat dengan mudah menganggap cookie sebagai file teks, yang disimpan ke komputermu. Atas permintaan webserver, browser-mu membuat file seperti itu. Setelah ini terjadi, webserver dapat membaca dan menulis konten dari dan ke file ini. Meskipun ini tampak seperti fitur yang berbahaya - bagaimanapun juga, tidak ada yang suka orang lain menulis file ke komputer mereka, ada beberapa pembatasan untuk membuat proses ini menjadi seaman mungkin.

  • Web server hanya dapat mengakses cookie yang diatur ke domain mereka sendiri. Domain ini disetel oleh browser ketika cookie baru diminta oleh server web, dan hanya dapat berupa domain atau subdomain dari server web (server web dapat memilih subdomain jika ingin). Ini berarti bahwa cookie yang disetel oleh, misalnya, google.com tidak dapat dibaca oleh mozilla.com, dan sebaliknya.
  • Menurut protokol HTTP, cookie tidak boleh lebih besar dari masing-masing 4096 Bytes (4KB).
  • Ada batasan jumlah cookie per domain. Jumlahnya berbeda per browser, namun, batas yang umumnya digunakan adalah dua puluh cookie. Ini untuk mencegah satu domain dari memonopoli ruang disk klien.
  • Ada batasan untuk jumlah cookie pada harddisk klien. Jumlah ini juga berbeda per browser, tetapi biasanya dibatasi hingga sekitar tiga ratus cookie. Ketika angka ini terlampaui, cookie yang lebih lama akan dihapus sebelum yang baru dibuat.

Cookie memiliki tanggal kedaluwarsa. Tanggal ini diatur agar browser dapat menghapus cookie lama ketika tidak lagi diperlukan oleh web server. Jika tanggal kedaluwarsa kosong, cookie akan dihapus ketika koneksi dengan server ditutup. Ini terjadi ketika jendela atau tab situs ditutup oleh pengguna, atau ketika pengguna menutup seluruh browser. Cookie ini, kadang-kadang disebut cookie session, sebagian besar digunakan untuk menyimpan pengaturan sementara.

Teknis

Mari kita cari tahu apa yang terlihat seperti ini pada level teknis. Cookie ditransfer melalui protokol HTTP. Ini adalah protokol yang digunakan oleh browser untuk mengambil dan mengirim file ke server. Setelah cookie telah diminta, itu akan dikirim ke server setiap kali item baru di halaman web diambil oleh browser. Di bawah ini, kita dapat melihat cuplikan server yang meminta cookie baru (potongan ini adalah bagian dari respons HTTP).

Sekarang jangan takut, itu semua bisa dimengerti!

  • Set-Cookie: adalah membiarkan browser tahu bahwa server ingin membuat cookie baru.
  • Name adalah nama cookie. Setiap cookie dalam domain harus memiliki nama yang berbeda, sehingga bowser dapat membuat semua cookie secara terpisah. Setelah nama muncul, =content data di mana "content data" adalah data yang akan dimuat dalam cookie. Data ini dapat berupa string teks atau angka, dan, seperti yang dikatakan, dapat mencapai 4KB.
  • expires= adalah perintah untuk tanggal kadaluwarsa. Tanggal kedaluwarsa adalah dalam format "Wdy, DD-Sen-JYYY HH: MM: SS GMT" (Jangan tanya saya mengapa itu didefinisikan ke dalam format konyol ini, karena saya juga tidak tahu. Tidak ada pengguna yang pernah melihat tanggal kedaluwarsa, jadi mengapa membuang-buang memori, ruang hard disk, dan bandwith pada tanggal yang panjang?). Namun jangan khawatir, karena sebagian besar bahasa pemrograman memiliki fungsi yang mudah digunakan yang tersedia untukmu. Browser secara otomatis menghapus cookie dengan tanggal kedaluwarsa di masa lalu.
  • domain dan jalur membutuhkan penjelasan yang lebih dalam. domain adalah domain tempat cookie akan aktif. Jika domainnya adalah 'ads.google.com,' cookie hanya akan dikirim ke server domain itu, dan jika domainnya adalah 'google.com,' cookie akan dikirim ke server mana pun dari salah satu subdomain dari Google, termasuk google.com sendiri.
  • path adalah jalur domain yang cookie kirim. Ini berarti bahwa, jika jalur diatur ke '/images/,' dan domain diatur ke 'ads.google.com,' cookie hanya akan dikirim ke server jika browser meminta file dari 'ads.google .com/images/ '. Jika jalurnya diatur ke '/', cookie akan dikirim ke server terlepas dari lokasi file yang diminta di server.

Pada langkah berikutnya, kita akan meninjau bagaimana properti ini dapat digunakan dalam bahasa pemrograman.


Langkah 2. Cara Membuat dan Membaca Cookie

Cookie dapat dibuat dalam banyak cara, tetapi, untuk keperluan tutorial ini, kita akan fokus pada PHP dan JavaScript.

PHP

Yang paling penting untuk diingat, ketika membuat cookie di PHP, adalah kamu harus mengatur semua cookie sebelum kamu mengirim data ke browser. Ini berarti kamu harus selalu menginisialisasi cookie baru sebelum output apa pun. Ini termasuk perintah echo() atau print(), dan tag <html> atau <body>. Tentu saja, ada beberapa pengecualian, tetapi ini adalah aturan umum.

Ini seharusnya sudah terlihat sekarang, kecuali $secure dan $httponly. 'secure' adalah untuk memaksa cookie agar hanya dikirim jika koneksi HTTPS telah ditetapkan, jika diset ke true, dan biasanya harus diset ke false. 'httponly' membuat cookie hanya tersedia melalui protokol HTTP, yang berarti bahwa bahasa pada sisi-klien, seperti JavaScript dan VBscript, tidak akan dapat mengakses cookie. Ini membantu mencegah hal-hal buruk, seperti Cross Site Scripting, dan harus diset ke true jika kamu tidak berniat mengedit cookie yang dipihak klien dengan bahasa seperti JavaScript. Juga, untuk mencegah kesalahpahaman, "httponly" tidak berarti bahwa cookie tidak dapat dikirim melalui HTTPS, karena masih bisa, pada kenyataannya. Namun, harap di perhatikan bahwa cuplikan di atas dapat dibuat lebih kecil (dan seharusnya):

Hebat! Sekarang kita bisa membuat cookies, tetapi kita harus bisa membacanya juga. Untungnya bagi kita, PHP membuat ini sangat mudah sekali saat cookie telah dibuat. Di PHP, ada variabel environment yang disebut $_COOKIE[], yang dapat digunakan untuk mengekstraksi nilai cookie. Untuk menggunakannya, cukup masukkan nama cookie di dalam tanda kurung [] seperti:

Variabel environment ini dapat digunakan seperti yang lain. Seperti $_GET[] dan $_POST[], bisa diperlakukan secara langsung sebagai variabel normal (setelah kamu telah memeriksa jika cookie memang tentu saja ada) jika kamu ingin.

Jika kamu ingin mengubah tanggal kedaluwarsa, jalur, atau domain, kamu harus menimpa cookie yang sudah ada dengan setcookie() menggunakan nama yang sama dengan cookie aslinya. Jika kamu mengubah tanggal kedaluwarsa menjadi di masa lalu (time()-30*60 misalnya), cookie akan dihapus.

JavaScript

Cookie dapat dibaca dan ditulis dengan sisi klien juga. Meskipun JavaScript tidak menawarkan solusi yang bagus untuk membaca dan menulis cookie, itu mungkin dan banyak digunakan. JavaScript menggunakan objek document.cookie untuk manipulasi cookie, seperti yang ditunjukkan pada cuplikan berikut:

Seperti yang kamu ketahui, sintaks ini sangat mirip dengan notasi protokol HTTP. Ini memiliki keuntungan karena lebih memegang kendali, tetapi juga memperkenalkan beberapa masalah potensial. Di bawah ini adalah cuplikan <painful> untuk membaca cookie.

Saya tahu saya tahu; ini menyakitkan. Untungnya untuk kalian, saya memposting beberapa fungsi pra-tertulis di bawah ini (kamu mungkin ingin membuat fungsimu sendiri untuk tujuan pembelajaran, dan kamu harus!).

Harap diingat bahwa cuplikan ini tidak berisi pengecekan error apa pun.


Langkah 3. Apa yang harus dilakukan dengan Cookie

Tahukah kamu? -
Cookie diciptakan oleh Netscape, yang ingin menggunakannya untuk membuat keranjang belanja untuk sebuah toko online. Berkat cookie, orang dapat menyimpan keranjang belanja mereka, bahkan setelah memutuskan koneksi dari tokonya.

Saat ini, kita menggunakan cookie untuk hampir semua tujuan yang dapat kamu pikirkan. Kamu dapat menggunakannya untuk menyimpan pengaturan pengguna seperti nama, bahasa, lokasi atau ukuran layar. Ini dapat meningkatkan kualitas layanan yang ingin kamu sediakan untuk klien, karena kamu dapat mengoptimalkan layanan untuk klien dan mengingat pengoptimalan ini di masa mendatang. Misalnya, kamu dapat menyimpan bahasa pilihan klien ke cookie, dan, setelah itu, menunjukkan konten situsmu dalam bahasa yang disukai setiap kali klien mengunjungi situsmu.

Tentu saja, ada banyak hal yang lebih menyenangkan untuk dilakukan dengan cookie daripada ini! Pada langkah berikutnya, saya akan menunjukkan contoh cuplikan kode yang keren.


Langkah 4. Menulis Hal-Hal Keren

Akhirnya! Sekarang kita bisa mulai menulis beberapa kode yang luar biasa! Di bawah ini adalah cuplikan bonus, yang menggunakan cookie untuk membuat mekanisme login ulang.

Cuplikan login "Remember me (Ingat saya)"

Sebelum kita mulai, potongan ini berisi beberapa kode MySQL. Jika kamu tidak terbiasa dengan MySQL, jangan panik. Meskipun cuplikan ini agak sulit, itu harus dimengerti dengan sedikit pengetahuan dasar PHP dan cookie.

Untuk membuat sebuah implementasi "ingat saya", kita harus memiliki beberapa hal. Pertama, kita membutuhkan tabel database yang berisi field nama pengguna, kata sandi, dan identitas. Kedua, kita memerlukan string atau angka unik untuk mengidentifikasi klien dengan aman melalui cookie (ini adalah identifikasi dalam tabel database). Dalam cuplikan ini, kita akan menggunakan intisari SHA-1, yang hanya berupa string, sebagai pengenal. Ketika digunakan dengan benar, ini memberikan keamanan yang sangat baik.

Kebanyakan orang hanya memasukkan nama pengguna dan kata sandi dalam cookie, dan mengirimkannya ke server secara otomatis. Ini harus dihindari pada setiap saat! Cookie biasanya dikirim melalui koneksi yang tidak aman, sehingga konten dapat dengan mudah dilihat oleh setiap penyerang potensial.

Dengan menggunakan intisari seperti yang kita lakukan, kemungkinan mendapatkan dua intisari yang sama sangat kecil. Intisari adalah empat puluh karakter string, yang, secara teori, harus selalu menyediakan ouput acak lengkap jika inputannya diubah. Dalam praktiknya, kamu harus menambahkan batas waktu dalam kode pada sisi server, sehingga intisari tidak valid setelah X menit. Ini mencegah penyerang menyalin cookie seseorang dan menggunakannya untuk masuk.


Langkah 5. Praktik Terbaik

Kami hampir mencapai akhir dari tutorial ini. Sebagai kesimpulan saya ingin merangkum beberapa praktik terbaik:

  • Jangan pernah memasukkan data sensitif ke cookie. Klien dapat menjelajah di komputer umum, jadi jangan tinggalkan informasi pribadi apa pun.
  • Jangan pernah percaya data yang berasal dari cookie. Selalu filter string dan angka! Seorang penyerang dapat menulis data berbahaya ke cookie untuk melakukan sesuatu yang kamu tidak ingin layananmu lakukan.
  • Cobalah untuk memperkirakan berapa lama cookie harus berlaku, dan menetapkan tanggal kadaluarsa yang sesuai. Kamu tidak ingin memonopoli komputer klien dengan cookie lama yang ditetapkan akan kedaluwarsa dalam seratus tahun.
  • Selalu tetapkan keamanan dan hanya pada http untuk memenuhi permintaan aplikasimu. Jika aplikasimu tidak mengedit cookie dengan JavaScript, aktifkan httponly. Jika kamu selalu memiliki koneksi HTTPS, aktifkan keamanan. Ini meningkatkan integritas dan kerahasiaan data.

Kesimpulan

Saya harap kamu telah belajar sedikit dari tutorial Nettuts+ hari ini. Jika kamu memiliki pertanyaan, jangan ragu untuk meninggalkan komentar atau menyapa di Twitter.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.