Skip to content

emka.web.id

menulis pengetahuan – merekam peradaban

Menu
  • Home
  • Tutorial
  • Search
Menu

Cara Menangani Kesalahan String Kueri di JavaScript

Posted on March 20, 2023

string
Query adalah cara untuk meneruskan data antara berbagai halaman atau komponen aplikasi web. Mereka sering digunakan untuk meneruskan parameter ke server atau untuk menyimpan data dalam riwayat browser. Namun, string kueri juga bisa menjadi sumber kesalahan dan kerentanan keamanan jika tidak ditangani dengan benar.
Advertisement
Pada artikel ini, kita akan membahas cara menangani kesalahan string kueri di JavaScript.
1. Periksa Parameter yang Hilang

Salah satu kesalahan string kueri yang paling umum adalah parameter yang hilang. Hal ini terjadi saat parameter yang diperlukan tidak ada dalam string kueri, yang menyebabkan kesalahan saat kode mencoba mengakses parameter tersebut. Untuk menangani kesalahan ini, Anda harus memeriksa apakah parameter yang diperlukan ada di string kueri sebelum mencoba menggunakannya. Anda dapat melakukannya dengan menggunakan metode indexOf() atau ekspresi reguler untuk mencari parameter dalam string kueri.

Example:

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);

if (!urlParams.has(`userId`)) {
console.error(`Parameter userId tidak ada`);
}123456constqueryString=window.location.search;consturlParams=newURLSearchParams(queryString); if(!urlParams.has(`userId`)){  console.error(`Missing userId parameter`);}

Pada contoh di atas, kita memeriksa apakah parameter userId ada di string kueri. Jika tidak ada, kami mencatat pesan kesalahan ke console.
2. Validasi Input

Kesalahan string kueri umum lainnya adalah input yang tidak valid. Hal ini dapat terjadi saat pengguna memasukkan karakter atau nilai yang tidak valid dalam string kueri, seperti karakter khusus atau serangan injeksi SQL. Untuk menangani kesalahan ini, Anda harus memvalidasi input sebelum menggunakannya di code.

Example:

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const userId = urlParams.get(`userId`);

jika (!/^[0-9]+$/.test(userId)) {
console.error(`parameter userId tidak valid`);
}1234567constqueryString=window.location.search;consturlParams=newURLSearchParams(queryString);constuserId=urlParams.get(`userId`); if(!/^[0-9]+$/.test(userId)){  console.error(`Invalid userId parameter`);}

Dalam contoh di atas, kami menggunakan ekspresi reguler untuk memvalidasi parameter userId. Kami sedang memeriksa apakah parameter hanya berisi angka dan tidak ada karakter lain. Jika berisi karakter lain, kami mencatat pesan kesalahan ke console.
3. Bersihkan Masukan

Cara lain untuk menangani kesalahan string kueri adalah dengan membersihkan masukan. Sanitasi berarti menghapus atau keluar dari karakter yang dapat menyebabkan kesalahan atau kerentanan keamanan, seperti tag HTML atau karakter khusus. Anda dapat menggunakan pustaka seperti DOMPurify atau validator.js untuk membersihkan input.

Example:

import DOMPurify from `dompurify`;
const queryString = jendela.lokasi.pencarian;
const urlParams = new URLSearchParams(queryString);
pesan const = urlParams.get(`pesan`);

const sanitizedMessage = DOMPurify.sanitize(pesan);

console.log(sanitizedMessage);12345678import DOMPurify from`dompurify`;constqueryString=window.location.search;consturlParams=newURLSearchParams(queryString);constmessage=urlParams.get(`message`); constsanitizedMessage=DOMPurify.sanitize(pesan); console.log(sanitizedMessage);

Dalam contoh di atas, kami menggunakan DOMPurify untuk membersihkan parameter pesan. Kami menghapus semua tag HTML atau karakter khusus yang dapat menyebabkan kerentanan keamanan.
4. Gunakan Blok Coba-Tangkap

Terakhir, Anda bisa menggunakan blok coba-tangkap untuk menangani kesalahan lain yang mungkin terjadi saat bekerja dengan string kueri. Ini dapat mencakup error seperti JSON yang tidak valid atau nilai yang tidak diharapkan. Blok try-catch memungkinkan Anda menangkap kesalahan ini dan menanganinya dengan baik, tanpa merusak aplikasi Anda.

Example:

try {
const queryString = jendela.lokasi.pencarian;
const urlParams = new URLSearchParams(queryString);
data const = JSON.parse(urlParams.get(`data`));

console.log(data);
} tangkap (kesalahan) {
console.error(`Kesalahan mengurai data JSON`);
}123456789coba{  constqueryString=window.location.search; consturlParams=newURLSearchParams(queryString); constdata=JSON.parse(urlParams.get(`data`)); console.log(data);}catch(error){  console.error(`Error parsing JSON data`);}

Pada contoh di atas, kami menggunakan blok try-catch untuk menangkap error yang mungkin terjadi saat mengurai data JSON dari parameter datanya. Jika terjadi kesalahan, kami mencatat pesan kesalahan ke console.
Conclusion

Query string adalah alat yang berguna untuk mengirimkan data antara berbagai komponen aplikasi web. Namun, mereka juga bisa menjadi sumber kesalahan dan kerentanan keamanan jika tidak ditangani dengan benar. Dengan mengikuti tips dan contoh

Referensi tecadmin.com

Terbaru

  • Inilah 7 Cara Mengembalikan Foto yang Terhapus Permanen di HP, Ternyata Masih Bisa Diselamatkan!
  • Inilah Cara Mengatasi Baterai Boros Setelah Update HyperOS yang Paling Ampuh
  • Inilah Pokémon Champions 2026, Game Battle Kompetitif Terbaru dan Cara Download-nya yang Perlu Kalian Tahu!
  • Inilah Doods Viral: Pengertian, Bahaya, dan Kenapa Kalian Harus Ekstra Waspada!
  • Gini Caranya Ngebangun Bisnis AI yang Menguntungkan dalam 48 Jam Saja!
  • Pengertian “He is Risen” Adalah?
  • Inilah Rekomendasi HP Snapdragon Paling Murah dengan RAM 8 GB Terupdate April 2026
  • Inilah 12 Kampus Negeri di Jogja yang Jarang Diketahui, Ternyata Banyak yang Kasih Kuliah Gratis!
  • Inilah Rekomendasi HP Tecno Kamera Terbaik 2026, Spek Gahar Harga Tetap Pelajar!
  • Apa itu PPU UTBK? Ini Rahasia Taklukkan Skor Tinggi di SNBT 2026 Tanpa Harus Menghafal!
  • Inilah Alasan Kenapa Lapisan Es Greenland Ternyata Bisa Bergerak Kayak Adonan yang Dipanaskan
  • Inilah Kode Redeem FC Mobile 10 April 2026 dan Rahasia Panen Pemain OVR 117
  • Apa itu Benwit/Bensin Sawit? Benarkah Bisa Jadi Solusi Bahan Bakar Masa Depan atau Cuma Hoaks Belaka?
  • Inilah 4 Tablet 5G Termurah April 2026 yang Kencang dan Worth It untuk Kerja!
  • Inilah Rincian UKT Unesa 2026 Jalur SNBP dan SNBT, Cek Biaya Kuliahmu di Sini!
  • Inilah Bocoran Event Free Fire 10 April 2026, Ada Diskon 90 Persen dan Kode Redeem Gratis!
  • Inilah Deretan HP Murah April 2026, dari Infinix NFC Hingga Realme dengan Baterai Super Besar dan Update Penting IGRS
  • Inilah Alasan Google Kena Sanksi Teguran Terkait PP Tunas dan Perlindungan Anak di YouTube
  • Inilah Spesies Baru Homalomena dari Sumatera yang Berhasil Diidentifikasi Melalui Media Sosial
  • Inilah Cara Download FF Advance Server 2026 Apk yang Aman dan Update Misteri Bawah Laut Terbaru!
  • Inilah 10 PTS Terbaik di Indonesia Versi Uniranks 2026, Referensi Mantap Buat Kalian Calon Mahasiswa Baru!
  • Inilah Daftar Lengkap Pusat UTBK 2026 di Jawa Tengah, Cek Lokasi dan Alamat Kampusnya Biar Nggak Salah Alamat!
  • Inilah Alasan Kenapa Hasil TKA Jadi Kunci Penting di Jalur Prestasi SPMB 2026, Orang Tua Wajib Tahu!
  • Inilah Alasan Kenapa Situs Bumiayu Dianggap Lebih Tua dari Sangiran dan Jadi Kunci Sejarah Jawa
  • Inilah Cara Cerdik Larva Kumbang Hitam Eropa Meniru Aroma Bunga untuk Menipu Lebah
  • Inilah 45 Planet Berbatu yang Paling Berpotensi Jadi Rumah Kedua Manusia di Masa Depan
  • Inilah Cara Ambil Kursus Online Gratis dari Harvard University untuk Asah Skill Digital Kalian!
  • Inilah Rincian UKT UGM 2026 Jalur SNBP dan SNBT, Calon Mahasiswa Wajib Tahu!
  • Inilah Daftar 25 Universitas Terbaik di Inggris 2026 Versi The Guardian yang Wajib Kalian Lirik!
  • Inilah Alasan University of Oxford Masih Jadi Juara Dunia di QS Rankings 2026, Empat Jurusan Ini Nggak Ada Lawannya!
  • Is it Time to Replace Nano? Discover Fresh, the Terminal Text Editor You Actually Want to Use
  • How to Design a Services Like Google Ads
  • How to Fix 0x800ccc0b Outlook Error: Step-by-Step Guide for Beginners
  • How to Fix NVIDIA App Error on Windows 11: Simple Guide
  • How to Fix Excel Formula Errors: Quick Fixes for #NAME
  • How to Use VoxCPM2: The Complete Tutorial for Professional Voice Cloning and AI Speech Generation
  • Complete tutorial for Creao AI: How to build smart AI agents that automate your daily tasks
  • How to Streamline Your Digital Workflow with TeraBox AI: A Complete Tutorial for Beginners
  • How to Run Google Gemma 4 Locally: A Beginner’s Guide to Tiny but Mighty AI Models
  • A Beginner Tutorial on Cloning Website Source Code Using ChatGPT and AI Logic Reconstruction
  • Apa itu Spear-Phishing via npm? Ini Pengertian dan Cara Kerjanya yang Makin Licin
  • Apa Itu Predator Spyware? Ini Pengertian dan Kontroversi Penghapusan Sanksinya
  • Mengenal Apa itu TONESHELL: Backdoor Berbahaya dari Kelompok Mustang Panda
  • Siapa itu Kelompok Hacker Silver Fox?
  • Apa itu CVE-2025-52691 SmarterMail? Celah Keamanan Paling Berbahaya Tahun 2025

©2026 emka.web.id | Design: Newspaperly WordPress Theme