10 Kesalahan Paling Umum yang Dilakukan Pengembang Web: Tutorial untuk Pengembang

Sejak istilah World Wide Web diciptakan kembali pada tahun 1990, pengembangan aplikasi web telah berkembang dari melayani halaman HTML statis menjadi aplikasi bisnis yang sepenuhnya dinamis dan kompleks.

Saat ini kami memiliki ribuan sumber daya digital dan cetak yang menyediakan petunjuk langkah demi langkah tentang mengembangkan semua jenis aplikasi web yang berbeda. Lingkungan pengembangan cukup "pintar" untuk menangkap dan memperbaiki banyak kesalahan yang sering dihadapi oleh pengembang awal. Bahkan ada banyak platform pengembangan berbeda yang dengan mudah mengubah halaman HTML statis sederhana menjadi aplikasi yang sangat interaktif.

Semua pola, praktik, dan platform pengembangan ini memiliki kesamaan, dan semuanya rentan terhadap masalah pengembangan web serupa yang disebabkan oleh sifat aplikasi web.

Tujuan dari tip pengembangan web ini adalah untuk menjelaskan beberapa kesalahan umum yang dibuat di berbagai tahap proses pengembangan web dan untuk membantu Anda menjadi pengembang yang lebih baik. Saya telah menyentuh beberapa topik umum yang umum bagi hampir semua pengembang web seperti validasi, keamanan, skalabilitas, dan SEO. Anda tentu saja tidak boleh terikat dengan contoh spesifik yang telah saya jelaskan dalam panduan ini, karena mereka terdaftar hanya untuk memberi Anda gambaran tentang potensi masalah yang mungkin Anda hadapi.

Kesalahan Umum No. 1: Validasi Input Tidak Lengkap

Memvalidasi input pengguna di sisi klien dan server adalah hal yang harus dilakukan ! Kita semua mengetahui nasihat bijak “jangan percaya masukan pengguna” tetapi, bagaimanapun, kesalahan yang berasal dari validasi terlalu sering terjadi.

Salah satu konsekuensi paling umum dari kesalahan ini adalah SQL Injection yang ada di OWASP Top 10 tahun demi tahun.

Ingatlah bahwa sebagian besar kerangka kerja pengembangan front-end menyediakan aturan validasi out-of-the-box yang sangat mudah digunakan. Selain itu, sebagian besar platform pengembangan back-end utama menggunakan anotasi sederhana untuk memastikan bahwa data yang dikirimkan mematuhi aturan yang diharapkan. Menerapkan validasi mungkin memakan waktu, tetapi itu harus menjadi bagian dari praktik pengkodean standar Anda dan tidak pernah dikesampingkan.

Kesalahan Umum No. 2: Otentikasi Tanpa Otorisasi yang Tepat

Sebelum kita melanjutkan, mari kita pastikan bahwa kita selaras dengan kedua istilah ini. Sebagaimana dinyatakan dalam 10 Kerentanan Keamanan Web Paling Umum:

Otentikasi: Memverifikasi bahwa seseorang adalah (atau setidaknya tampaknya) pengguna tertentu, karena dia telah memberikan kredensial keamanan mereka dengan benar (kata sandi, jawaban atas pertanyaan keamanan, pemindaian sidik jari, dll.).

Otorisasi: Mengonfirmasi bahwa pengguna tertentu memiliki akses ke sumber daya tertentu atau diberikan izin untuk melakukan tindakan tertentu.

Dengan kata lain, otentikasi adalah mengetahui siapa suatu entitas, sedangkan otorisasi adalah mengetahui apa yang dapat dilakukan entitas tertentu.

Biarkan saya menunjukkan masalah ini dengan sebuah contoh:

Pertimbangkan bahwa browser Anda menyimpan informasi pengguna yang saat ini dicatat dalam objek yang mirip dengan berikut ini:

 { username:'elvis', role:'singer', token:'123456789' }

Saat melakukan perubahan kata sandi, aplikasi Anda membuat POST:

 POST /changepassword/:username/:newpassword

Dalam metode /changepassword Anda, Anda memverifikasi bahwa pengguna masuk dan token belum kedaluwarsa . Kemudian Anda menemukan profil pengguna berdasarkan parameter :username , dan Anda mengubah kata sandi pengguna Anda.

Jadi, Anda memvalidasi bahwa pengguna Anda masuk dengan benar, dan kemudian Anda menjalankan permintaannya sehingga mengubah kata sandinya. Proses tampaknya OK, kan? Sayangnya, jawabannya TIDAK!

Pada titik ini penting untuk memverifikasi bahwa pengguna yang menjalankan tindakan dan pengguna yang kata sandinya diubah adalah sama. Informasi apa pun yang disimpan di browser dapat diubah, dan pengguna tingkat lanjut mana pun dapat dengan mudah memperbarui username:'elvis' menjadi username:'Administrator' tanpa menggunakan apa pun selain alat browser bawaan.

Jadi dalam hal ini, kami hanya mengurus Authentication memastikan bahwa pengguna memberikan kredensial keamanan. Kami bahkan dapat menambahkan validasi bahwa metode /changepassword hanya dapat dijalankan oleh pengguna yang Authenticated . Namun, ini masih belum cukup untuk melindungi pengguna Anda dari upaya jahat.

Anda perlu memastikan bahwa Anda memverifikasi pemohon aktual dan konten permintaan dalam metode /changepassword Anda dan menerapkan Authorization permintaan yang tepat untuk memastikan bahwa pengguna hanya dapat mengubah datanya.

Authentication dan Authorization adalah dua sisi mata uang yang sama. Jangan pernah memperlakukan mereka secara terpisah.

Kesalahan Umum No. 3: Tidak Siap Menskala

Dalam dunia pengembangan kecepatan tinggi saat ini, akselerator startup, dan jangkauan global instan dari ide-ide hebat, mengeluarkan MVP (produk minimum yang layak) Anda di pasar sesegera mungkin adalah tujuan bersama bagi banyak perusahaan.

Namun, tekanan waktu yang konstan ini menyebabkan tim pengembangan web yang baik pun sering mengabaikan masalah tertentu. Penskalaan sering kali merupakan salah satu hal yang dianggap remeh oleh tim. Konsep MVP memang bagus, tetapi jika dipaksakan terlalu jauh, Anda akan mendapat masalah serius. Sayangnya, memilih database dan server web yang dapat diskalakan dan memisahkan semua lapisan aplikasi pada server yang dapat diskalakan independen tidak cukup. Ada banyak detail yang perlu Anda pikirkan jika Anda ingin menghindari penulisan ulang bagian penting dari aplikasi Anda nanti - yang menjadi masalah utama pengembangan web.

Misalnya, katakanlah Anda memilih untuk menyimpan gambar profil yang diunggah dari pengguna Anda secara langsung di server web. Ini adalah solusi yang sangat valid—file dapat diakses dengan cepat oleh aplikasi, metode penanganan file tersedia di setiap platform pengembangan, dan Anda bahkan dapat menyajikan gambar ini sebagai konten statis, yang berarti beban minimum pada aplikasi Anda.

Tetapi apa yang terjadi ketika aplikasi Anda berkembang, dan Anda perlu menggunakan dua atau lebih server web di belakang penyeimbang beban? Meskipun Anda menskalakan penyimpanan database, server status sesi, dan server web dengan baik, skalabilitas aplikasi Anda gagal karena hal sederhana seperti gambar profil. Dengan demikian, Anda perlu menerapkan beberapa jenis layanan sinkronisasi file (yang akan mengalami penundaan dan akan menyebabkan kesalahan 404 sementara) atau solusi lain untuk memastikan bahwa file tersebar di server web Anda.

Apa yang perlu Anda lakukan untuk menghindari masalah di tempat pertama hanya menggunakan lokasi penyimpanan file bersama, database, atau solusi penyimpanan jarak jauh lainnya. Mungkin akan membutuhkan beberapa jam kerja ekstra untuk menerapkan semuanya, tetapi itu akan sepadan dengan masalahnya.

Kesalahan Umum No. 4: SEO Salah atau Hilang

Akar penyebab praktik terbaik SEO yang salah atau hilang di situs web adalah "pakar SEO" yang salah informasi. Banyak pengembang web percaya bahwa mereka cukup tahu tentang SEO dan itu tidak terlalu rumit, tapi itu tidak benar. Penguasaan SEO membutuhkan waktu yang signifikan yang dihabiskan untuk meneliti praktik terbaik dan aturan yang selalu berubah tentang bagaimana Google, Bing, dan Yahoo mengindeks web. Kecuali jika Anda terus-menerus bereksperimen dan memiliki pelacakan + analisis yang akurat, Anda bukan pakar SEO, dan Anda tidak boleh mengklaim sebagai pakar SEO.

Selain itu, SEO terlalu sering ditunda karena beberapa aktivitas dilakukan di akhir. Ini datang dengan harga tinggi dari masalah pengembangan web. SEO tidak hanya terkait dengan pengaturan konten yang baik, tag, kata kunci, meta-data, tag alt gambar, peta situs, dll. Ini juga termasuk menghilangkan duplikat konten, memiliki arsitektur situs yang dapat dirayapi, waktu muat yang efisien, tautan balik yang cerdas, dll.

Seperti halnya skalabilitas, Anda harus memikirkan SEO sejak Anda mulai membangun aplikasi web, atau Anda mungkin menemukan bahwa menyelesaikan proyek implementasi SEO berarti menulis ulang seluruh sistem Anda.

Kesalahan Umum No. 5: Tindakan yang Menghabiskan Waktu atau Prosesor di Penangan Permintaan

Salah satu contoh terbaik dari kesalahan ini adalah mengirim email berdasarkan tindakan pengguna. Terlalu sering pengembang berpikir bahwa membuat panggilan SMTP dan mengirim pesan langsung dari penangan permintaan pengguna adalah solusinya.

Katakanlah Anda membuat toko buku online, dan Anda berharap untuk memulai dengan beberapa ratus pesanan setiap hari. Sebagai bagian dari proses penerimaan pesanan Anda, Anda mengirim email konfirmasi setiap kali pengguna memposting pesanan. Ini akan bekerja tanpa masalah pada awalnya, tetapi apa yang terjadi ketika Anda menskalakan sistem Anda, dan Anda tiba-tiba mendapatkan ribuan permintaan mengirim email konfirmasi? Anda mendapatkan waktu tunggu koneksi SMTP, kuota terlampaui, atau waktu respons aplikasi Anda menurun secara signifikan karena sekarang menangani email, bukan pengguna.

Setiap tindakan yang memakan waktu atau prosesor harus ditangani oleh proses eksternal saat Anda melepaskan permintaan HTTP Anda sesegera mungkin. Dalam hal ini, Anda harus memiliki layanan pengiriman surat eksternal yang mengambil pesanan dan mengirim pemberitahuan.

Kesalahan Umum No. 6: Tidak Mengoptimalkan Penggunaan Bandwidth

Sebagian besar pengembangan dan pengujian berlangsung di lingkungan jaringan lokal. Jadi saat Anda mengunduh 5 gambar latar belakang masing-masing berukuran 3MB atau lebih, Anda mungkin tidak mengidentifikasi masalah dengan kecepatan koneksi 1Gbit di lingkungan pengembangan Anda. Tetapi ketika pengguna Anda mulai memuat halaman beranda 15MB melalui koneksi 3G di ponsel cerdas mereka, Anda harus mempersiapkan diri untuk daftar keluhan dan masalah.

Mengoptimalkan penggunaan bandwidth Anda dapat memberi Anda peningkatan kinerja yang hebat, dan untuk mendapatkan peningkatan ini, Anda mungkin hanya memerlukan beberapa trik. Ada beberapa hal yang dilakukan oleh banyak pengembang web yang baik secara default, termasuk:

1. Minifikasi semua JavaScript
2. Minifikasi semua CSS
3. Kompresi HTTP sisi server
4. Optimalisasi ukuran dan resolusi gambar

Kesalahan Umum No. 7: Tidak Berkembang untuk Ukuran Layar yang Berbeda

Desain responsif telah menjadi topik besar dalam beberapa tahun terakhir. Perluasan smartphone dengan resolusi layar yang berbeda telah membawa banyak cara baru untuk mengakses konten online, yang juga disertai dengan sejumlah masalah pengembangan web. Jumlah kunjungan situs web yang berasal dari smartphone dan tablet tumbuh setiap hari, dan tren ini semakin cepat.

Untuk memastikan navigasi yang mulus dan akses ke konten situs web, Anda harus memungkinkan pengguna untuk mengaksesnya dari semua jenis perangkat.

Ada banyak pola dan praktik untuk membangun aplikasi web responsif. Setiap platform pengembangan memiliki tip dan triknya sendiri, tetapi ada beberapa kerangka kerja yang tidak bergantung pada platform. Yang paling populer mungkin adalah Twitter Bootstrap. Ini adalah kerangka kerja HTML, CSS, dan JavaScript open-source dan gratis yang telah diadopsi oleh setiap platform pengembangan utama. Patuhi saja pola dan praktik Bootstrap saat membangun aplikasi Anda, dan Anda akan mendapatkan aplikasi web responsif tanpa masalah sama sekali.

Kesalahan Umum No. 8: Ketidakcocokan Lintas-browser

Proses pengembangan, dalam banyak kasus, berada di bawah tekanan waktu yang berat. Setiap aplikasi perlu dirilis sesegera mungkin dan bahkan pengembang web yang baik sering kali berfokus pada memberikan fungsionalitas daripada desain. Terlepas dari kenyataan bahwa sebagian besar pengembang telah menginstal Chrome, Firefox, IE, mereka hanya menggunakan salah satu dari 90% ini. Ini adalah praktik umum untuk menggunakan satu browser selama pengembangan dan ketika aplikasi hampir selesai, Anda akan mulai mengujinya di browser lain. Ini sangat masuk akal – dengan asumsi Anda memiliki banyak waktu untuk menguji dan memperbaiki masalah yang muncul pada tahap ini.

Namun, ada beberapa tips pengembangan web yang dapat menghemat waktu Anda secara signifikan saat aplikasi Anda mencapai fase pengujian lintas-browser:

1. Anda tidak perlu menguji di semua browser selama pengembangan; itu memakan waktu dan tidak efektif. Namun, itu tidak berarti bahwa Anda tidak dapat sering berpindah browser. Gunakan browser yang berbeda setiap beberapa hari, dan Anda setidaknya akan mengenali masalah utama di awal fase pengembangan.
2. Hati-hati menggunakan statistik untuk membenarkan tidak mendukung browser. Ada banyak organisasi yang lambat dalam mengadopsi perangkat lunak baru atau upgrade. Ribuan pengguna yang bekerja di sana mungkin masih memerlukan akses ke aplikasi Anda, dan mereka tidak dapat menginstal browser gratis terbaru karena keamanan internal dan kebijakan bisnis.
3. Hindari kode khusus browser. Dalam kebanyakan kasus, ada solusi elegan yang kompatibel dengan lintas-browser.

Kesalahan Umum No. 9: Tidak Merencanakan Portabilitas

Asumsi adalah ibu dari semua masalah! Dalam hal portabilitas, pepatah ini lebih benar dari sebelumnya. Berapa kali Anda melihat masalah dalam pengembangan web seperti jalur file berkode keras, string koneksi database, atau asumsi bahwa perpustakaan tertentu akan tersedia di server? Anggapan bahwa lingkungan produksi akan cocok dengan komputer pengembangan lokal Anda adalah salah.

Pengaturan aplikasi yang ideal harus bebas perawatan:

1. Pastikan aplikasi Anda dapat diskalakan dan dijalankan pada lingkungan beberapa server dengan beban seimbang.
2. Izinkan konfigurasi yang sederhana dan jelas–mungkin dalam satu file konfigurasi.
3. Menangani pengecualian ketika konfigurasi server web tidak seperti yang diharapkan.

Kesalahan Umum No. 10: Pola Anti RESTful

RESTful API telah menggantikan tempatnya dalam pengembangan web dan akan tetap ada. Hampir setiap aplikasi web telah mengimplementasikan beberapa jenis layanan REST, baik untuk penggunaan internal atau pengintegrasian dengan sistem eksternal. Namun kami masih melihat pola dan layanan RESTful yang rusak yang tidak sesuai dengan praktik yang diharapkan.

Dua kesalahan paling umum yang dilakukan saat menulis RESTful API adalah:

1. Menggunakan kata kerja HTTP yang salah. Misalnya menggunakan GET untuk menulis data. HTTP GET telah dirancang untuk menjadi idempoten dan aman, yang berarti bahwa tidak peduli berapa kali Anda memanggil GET pada sumber daya yang sama, responsnya harus selalu sama dan tidak ada perubahan dalam status aplikasi yang harus terjadi.

2. Tidak mengirim kode status HTTP yang benar. Contoh terbaik dari kesalahan ini adalah mengirim pesan kesalahan dengan kode respons 200.

    HTTP 200 OK { message:'there was an error' }

Anda hanya boleh mengirim HTTP 200 OK jika permintaan tidak menghasilkan kesalahan. Jika terjadi kesalahan, Anda harus mengirim 400, 401, 500 atau kode status lainnya yang sesuai untuk kesalahan yang terjadi.

Tinjauan rinci tentang kode status HTTP standar dapat ditemukan di sini.

Bungkus

Pengembangan web adalah istilah yang sangat luas yang secara sah dapat mencakup pengembangan situs web, layanan web, atau aplikasi web yang kompleks.

Kesimpulan utama dari panduan pengembangan web ini adalah pengingat bahwa Anda harus selalu berhati-hati tentang otentikasi dan otorisasi, merencanakan skalabilitas, dan tidak pernah terburu-buru berasumsi apa pun - atau bersiaplah untuk menghadapi daftar panjang masalah pengembangan web!