Cara Filter URL dengan JavaScript: Teknik Validasi dan Sanitasi

Metode Validasi URL dengan URL API

Cara paling standar dan aman untuk memfilter atau memvalidasi URL dalam JavaScript modern adalah menggunakan konstruktor URL. Metode ini secara otomatis memeriksa apakah string yang diberikan merupakan URL yang valid sesuai spesifikasi RFC 3986.

function isValidURL(string) { try { new URL(string); return true; } catch (err) { return false; } } console.log(isValidURL('https://azwinn.com')); // true console.log(isValidURL('bukan-url')); // false

Tabel Perbandingan Metode Filter URL

Sanitasi URL dengan Regex

Jika Anda perlu memfilter URL untuk menghapus karakter berbahaya atau memastikan protokol tertentu (seperti hanya http atau https), gunakan Regular Expression (Regex). Berikut adalah contoh fungsi untuk memfilter URL agar hanya menerima protokol aman:

function sanitizeURL(url) { const pattern = /^(https?:\/\/)[\w\.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!$&'()*+,;=.]+$/; return pattern.test(url) ? url : null; }

Langkah Teknis Implementasi

1. Identifikasi Kebutuhan: Tentukan apakah Anda hanya perlu memvalidasi format atau melakukan sanitasi (menghapus karakter berbahaya).
2. Gunakan URL API: Selalu gunakan new URL() sebagai lapisan pertama validasi karena sudah terintegrasi di semua browser modern.
3. Penerapan Sanitasi: Jika URL berasal dari input pengguna, gunakan fungsi sanitasi untuk mencegah serangan XSS (Cross-Site Scripting) dengan membatasi protokol ke http: atau https: saja.
4. Troubleshooting: Jika validasi gagal pada URL dengan karakter khusus, pastikan Anda melakukan encodeURI() atau encodeURIComponent() sebelum memproses string tersebut.

Keamanan URL

Penting untuk diingat bahwa memfilter URL di sisi klien (client-side) hanyalah langkah awal. Untuk aplikasi produksi, validasi wajib dilakukan kembali di sisi server (server-side) untuk mencegah manipulasi data oleh pengguna yang berniat jahat.