💡 ULASAN & REFERENSI • DIPERBARUI: 23 October 2026 • REDAKSI AZWINN

Legacy Web Development SSI: Fungsi, Risiko, & Migrasi

Server Side Includes (SSI) adalah bahasa scripting sisi server sederhana yang digunakan terutama pada era web awal untuk menyertakan file eksternal (seperti header, footer, atau navigasi) ke dalam beberapa halaman HTML. Dalam konteks pengembangan web legacy, SSI diidentifikasi melalui ekstensi file seperti .shtml, .shtm, atau .stm, di mana server web (seperti Apache atau Nginx) memproses direktif khusus sebelum mengirimkan halaman akhir ke peramban pengguna.

Meskipun efisien untuk situs web statis berskala kecil pada masanya, penggunaan SSI pada sistem modern kini dianggap usang dan rentan terhadap berbagai celah keamanan jika tidak dikonfigurasi dengan benar. Pengembang yang berurusan dengan sistem legacy ini sering kali dihadapkan pada dilema antara mempertahankan kode lama atau melakukan migrasi total ke kerangka kerja modern berbasis komponen seperti React, Vue, atau penggunaan template engine sisi server seperti Jinja, Twig, atau Blade.

Karakteristik dan Direktif Utama SSI

SSI bekerja menggunakan komentar HTML khusus yang dikenali oleh pengurai (parser) server web. Direktif ini memberi tahu server untuk menyisipkan konten dari file lain, mengeksekusi perintah shell, atau menampilkan variabel lingkungan server.

Direktif SSI Sintaks Contoh Fungsi Utama
#include <!--#include virtual="/header.html" --> Menyisipkan isi file lain ke dalam dokumen saat ini.
#echo <!--#echo var="DATE_LOCAL" --> Menampilkan variabel server (tanggal, IP, nama file).
#exec <!--#exec cgi="/cgi-bin/script.cgi" --> Menjalankan program CGI atau perintah sistem operasi eksternal.
#if / #elif / #else <!--#if expr="$HTTP_USER_AGENT = /MSIE/" --> Membuatkondisional logika sederhana di dalam halaman HTML.

Risiko Keamanan pada Sistem Legacy SSI

Bahaya utama dalam mempertahankan pengembangan web berbasis SSI terletak pada direktif #exec. Jika konfigurasi server web tidak membatasi eksekusi perintah, penyerang dapat memanfaatkan kerentanan injeksi untuk menjalankan perintah sistem arbitrer (Remote Code Execution) di server.

Selain itu, situs web legacy yang menggunakan SSI sering kali kekurangan pemisahan antara logika presentasi dan data, menyulitkan proses audit keamanan, serta tidak mendukung pengelolaan manajemen aset modern (seperti minifikasi otomatis, bundling, dan kontrol cache berbasis hash).

Langkah Migrasi dari SSI ke Arsitektur Modern

Bagi tim yang harus memelihara atau memigrasikan sistem berbasis SSI ke tumpukan teknologi modern, berikut adalah tahapan teknis yang harus dilakukan:

  1. Inventarisasi Berkas: Pindai direktori server untuk menemukan seluruh file dengan ekstensi .shtml atau konfigurasi AddType/AddHandler pada file .htaccess atau nginx.conf.
  2. Petakan Ketergantungan: Identifikasi file mana saja yang sering disertakan (seperti header.shtml dan footer.shtml) dan ubah menjadi komponen parsial atau template layout di sistem baru.
  3. Pilih Teknologi Pengganti:
    • Untuk situs statis murni: Gunakan Static Site Generator (SSG) seperti Hugo, Eleventy, atau Astro.
    • Untuk aplikasi dinamis: Gunakan kerangka kerja server-side rendering (SSR) seperti Next.js, Nuxt, atau Laravel Blade.
  4. Alihkan URL (Redirect): Terapkan pengalihan 301 dari URL berakhiran .shtml ke struktur URL bersih yang baru untuk mempertahankan performa SEO.

Contoh Konfigurasi Pengaktifan SSI pada Apache

Jika terpaksa mempertahankan sistem legacy dalam jangka pendek, pastikan modul include_module diaktifkan dengan pengaturan keamanan yang tepat pada peladen Apache:

<Directory "/var/www/html">
    Options +Includes
    AddType text/html .shtml
    AddOutputFilter INCLUDES .shtml
</Directory>

Penerapan aturan di atas harus dibarengi dengan penonaktifan direktif #exec di tingkat global server untuk mencegah eksploitasi celah injeksi perintah sistem.

🔍 Orang Lain Juga Mencari Ini