Sign in Subscribe
Javascript

Base URI: Biang Kerok Link yang Nggak Nyambung?

Base URI: Biang Kerok Link yang Nggak Nyambung?
Photo by Richy Great / Unsplash

Pernah nggak ngalamin kasus di mana sebuah link di halaman web tiba-tiba ngarah ke tempat yang nggak sesuai ekspektasi? Padahal, di HTML udah jelas-jelas ditulis dengan benar. Nah, bisa jadi penyebabnya adalah Base URI yang nggak sesuai!

Base URI atau base URL adalah titik referensi utama untuk semua link relatif di dalam halaman web. Kalau ada tag <base> di dalam <head>, semua link yang pakai path relatif bakal ngikutin nilai href dari elemen <base> ini. Kalau nggak ada, ya udah, link bakal pakai URL dokumen itu sendiri.

Jadi, kalau kamu pernah ngalamin link yang tiba-tiba nyasar atau nggak sesuai harapan, bisa jadi itu gara-gara Base URI. Nah, di artikel ini kita bakal bahas gimana cara kerja Base URI, dampaknya, serta cara mengatasinya biar nggak bikin pusing!

Gimana Cara Kerja Base URI?

Sebelum lebih jauh, yuk lihat dulu contoh penggunaannya. Misalnya, kita punya kode HTML seperti ini:

<head>
    <base href="https://example.com/folder/">
</head>
<body>
    <a href="halaman.html">Klik di sini</a>
</body>

Kalau nggak ada <base>, link halaman.html bakal diakses dari lokasi yang sama dengan dokumen HTML-nya. Tapi karena kita tambahin:

<base href="https://example.com/folder/">

Maka, ketika kita klik "Klik di sini", browser akan mengarah ke:

https://example.com/folder/halaman.html

Padahal kalau <base> nggak ada, mungkin kita mengira link ini bakal menuju https://example.com/halaman.html. Nah, inilah alasan kenapa kadang Base URI bisa bikin link nggak nyambung kalau nggak diperhatikan dengan baik!

Cara Mengecek Base URI

Kadang kita perlu ngecek Base URI dari suatu halaman untuk memastikan semua link yang ada sesuai dengan ekspektasi. Caranya gampang banget, cukup gunakan JavaScript:

console.log(document.baseURI);

Kalau halaman punya elemen <base>, hasilnya bakal sesuai dengan nilai yang ditentukan di sana. Tapi kalau nggak ada, maka hasilnya adalah URL dari dokumen itu sendiri.

Contoh output:

https://example.com/folder/

Kalau hasilnya nggak sesuai dengan yang diharapkan, coba cek kembali apakah ada elemen <base> yang secara nggak sengaja mempengaruhi link dalam halaman tersebut.

Kapan Base URI Bisa Bikin Masalah?

Meskipun <base> ini kelihatannya sepele, ada beberapa kasus di mana Base URI bisa bikin link bermasalah:

Misalnya, kita punya elemen gambar seperti ini:

<base href="https://example.com/folder/">
<img src="gambar.jpg">

Karena ada <base>, browser bakal mencoba mengambil gambar dari:

https://example.com/folder/gambar.jpg

Padahal, kalau gambar aslinya ada di https://example.com/assets/gambar.jpg, ya jelas aja gambar nggak bakal muncul! 😱

2. Navigasi Halaman Internal Jadi Salah Alamat

Bayangin kalau kamu bikin sistem navigasi sederhana di web dengan link relatif:

<a href="about.html">Tentang Kami</a>

Tapi gara-gara ada <base href="https://example.com/folder/">, maka link ini bakal menuju:

https://example.com/folder/about.html

Kalau ternyata about.html seharusnya ada di https://example.com/about.html, ya link ini bakal error dong! 😵

3. Mengganggu File JavaScript dan CSS

Base URI juga bisa bikin referensi file JavaScript atau CSS jadi nggak jalan kalau kita pakai link relatif.

<base href="https://example.com/folder/">
<link rel="stylesheet" href="style.css">

Browser bakal nyari style.css di:

https://example.com/folder/style.css

Kalau file CSS aslinya ada di https://example.com/styles/style.css, otomatis halaman bakal tampil tanpa styling yang benar!

Cara Mengatasi Masalah Base URI

Kalau Base URI bikin link jadi nggak sesuai harapan, ada beberapa cara buat mengatasinya:

1. Hapus Elemen <base> Kalau Nggak Diperlukan

Kalau kamu nggak benar-benar butuh <base>, lebih baik hapus aja. Dengan begitu, semua link bakal kembali ke perilaku normalnya.

<!-- Hapus elemen ini kalau bikin link jadi salah -->
<base href="https://example.com/folder/">

2. Gunakan Path Absolut untuk File Statis

Buat file CSS, JS, atau gambar, sebaiknya pakai path absolut biar nggak kena efek dari <base>.

<link rel="stylesheet" href="/styles/style.css">
<img src="/assets/gambar.jpg">

Dengan begini, file tetap diakses dari root domain dan nggak ikut aturan Base URI.

Kalau halaman udah terlanjur pakai <base>, kita bisa pakai JavaScript buat ngecek dan ngoreksi link yang bermasalah:

document.querySelectorAll("a").forEach(link => {
    if (!link.href.startsWith("https://example.com")) {
        link.href = "https://example.com" + link.getAttribute("href");
    }
});

Kode ini bakal ngecek setiap <a> di halaman dan pastiin semua link tetap mengarah ke domain yang benar.

Kesimpulan

  • Base URI menentukan referensi utama buat semua link relatif di halaman web.
  • Bisa sangat membantu kalau kita punya banyak link relatif dalam satu halaman.
  • Tapi kalau nggak diperhatikan, bisa bikin link error atau mengarah ke tempat yang salah.
  • Untuk ngecek Base URI, gunakan document.baseURI di JavaScript.
  • Kalau Base URI bikin masalah, coba hapus elemen <base>, pakai path absolut buat aset statis, atau koreksi link dengan JavaScript.

Dengan memahami cara kerja Base URI, kita bisa lebih fleksibel dalam mengatur link dan mencegah masalah yang bikin frustrasi. Jadi, pastikan Base URI di proyekmu sesuai dengan kebutuhan, ya!

Read next