Apa itu inline frame (iframe)?
Inline frame (iframe) adalah elemen HTML yang digunakan untuk memuat halaman HTML lain di dalam sebuah dokumen. Secara sederhana, iframe menempatkan halaman web lain di dalam halaman induk. Iframe sering digunakan untuk iklan, video ter-embed, web analytics, dan konten interaktif.
Bagaimana cara kerja iframe?
Iframe adalah elemen dalam kode HTML. Semua browser modern mendukung iframe, dan elemen ini juga termasuk dalam spesifikasi HTML5 terbaru.
Ketika browser menemukan elemen iframe, ia membuat environment dokumen HTML baru untuk memuat kontennya. Browser mengambil kode dari atribut src atau srcdoc dan merendernya sebagai sebuah website terpisah yang kemudian ditampilkan di dalam halaman induk. Disebut inline frame karena dari sisi pengguna terlihat seperti satu halaman web saja.
Iframe anak adalah environment browsing lengkap di dalam frame induk. Iframe ini bisa memuat JavaScript dan CSS-nya sendiri, terpisah dari halaman induk. Iframe juga bisa direfresh atau dimuat secara asynchronous dari situs induk.
Situs induk dapat menentukan aspek iframe seperti ukuran, posisi, dan konteks keamanan. Administrator sebaiknya berhati-hati jika menggunakan lebih dari satu iframe, karena iframe membutuhkan memori dan pemrosesan tambahan. Terlalu banyak iframe bisa memperlambat performa halaman. Selain itu, konten dalam iframe sering tidak terindeks dengan baik oleh mesin pencari sehingga dapat memengaruhi SEO.
Bagaimana iframe digunakan?
Penggunaan paling umum dari iframe adalah untuk memuat konten dari situs lain ke dalam halaman. Iframe anak dapat memuat kontennya sendiri dan menyimpan cookies, sehingga sering digunakan pada situasi ketika situs tidak mengizinkan hotlinking langsung. Contoh paling populer adalah embedding video YouTube atau konten Google Maps.
Iframe juga menjadi mekanisme utama dalam iklan web dan tracker. Pemilik situs menempatkan iframe pada bagian tertentu dari website mereka. Ketika browser memanggil server iklan, iframe memuat iklan yang sesuai dan menghitung jumlah tayangan. Tools web analytics pihak ketiga juga kadang menggunakan iframe tersembunyi untuk melacak pengguna tanpa terlihat.
Selain itu, iframe bisa dipakai untuk memuat konten dinamis. Misalnya, pada sebuah situs dokumentasi sederhana: halaman induk menampilkan daftar menu di sisi kiri, sementara bagian tengah menampilkan iframe. Saat pengguna memilih halaman dari menu, konten bisa dimuat di dalam iframe tanpa harus meninggalkan halaman induk.
Menggunakan iframe untuk konten dinamis itu sederhana dan efektif, tetapi kini mulai jarang digunakan. Metode baru seperti dynamic HTML dan AJAX lebih populer karena dapat menghasilkan situs yang lebih interaktif dan terintegrasi dibandingkan sekadar menampilkan halaman statis melalui iframe.
Keamanan iframe
Website yang menggunakan iframe tidak otomatis lebih aman atau lebih berisiko dibandingkan situs lain. Penggunaan iframe yang sah dikendalikan oleh situs induk dan dibatasi oleh mekanisme isolasi keamanan browser. Namun, admin harus memastikan situs yang dimuat di dalam iframe memang terpercaya dan aman.
Iframe juga bisa dimanfaatkan secara berbahaya. Hacker yang berhasil menginjeksi situs bisa menanamkan iframe tersembunyi untuk membajak klik, memasang malware, atau mencuri data. Malware komputer yang berbentuk browser extension juga dapat menambahkan iframe ke dalam situs yang sah. Akibatnya, website normal bisa menampilkan iklan tidak diinginkan atau bahkan menjadi bagian dari botnet.
Kelebihan dan kekurangan iframe
Iframe memiliki sejumlah kelebihan dan kekurangan:
Kelebihan
- mudah digunakan
- didukung luas oleh browser
- bisa menampilkan konten pihak ketiga
- dapat menghindari batasan CORS
Kekurangan
- boros memori dan CPU
- tidak ada kontrol terhadap situs pihak ketiga
- sulit diterapkan pada desain responsif
- dapat berdampak negatif pada SEO
Lihat juga: Cara mengamankan berbagai jenis aplikasi dan gambaran dasar tentang micro front end.