Iframe HTML: Menyematkan Satu Halaman ke Dalam Halaman Lain

Kamu pasti pernah lihat peta Google Maps nangkring di tengah artikel, video YouTube yang muter di blog yang jelas-jelas bukan YouTube, atau kotak “bayar di sini” di halaman checkout yang tampilannya datang dari penyedia pembayaran. Hampir semua itu pakai trik yang sama: iframe. Ini satu elemen HTML yang membuatmu bisa menyematkan satu halaman web utuh ke dalam halamanmu sendiri — ibarat jendela yang kamu lubangi di dokumenmu, lalu lewat jendela itu kelihatan halaman milik orang lain.

Di artikel ini kamu bakal belajar iframe itu sebenarnya apa, cara menulisnya, atribut-atribut yang penting (termasuk pengaturan keamanan yang jangan sampai kamu lewatkan), dan yang sama pentingnya — kapan iframe memang jawaban yang tepat, dan kapan dia justru bikin masalah diam-diam.

Iframe itu apa

Kata iframe itu kependekan dari inline frame, atau bingkai sebaris. Ini elemen HTML, yaitu <iframe>, yang memuat halaman web terpisah lalu menampilkannya sebagai sebuah area persegi di dalam halamanmu. Halaman yang disematkan tadi adalah dokumen yang benar-benar mandiri: punya HTML sendiri, CSS sendiri, JavaScript sendiri, dan dimuat dari URL-nya sendiri.

Ini contoh paling sederhananya:

<iframe src="https://example.com"></iframe>

Atribut src adalah alamat halaman yang mau kamu sematkan — persis seperti src pada gambar atau script. Browser mengambil URL itu lalu menggambar hasilnya di dalam bingkai. Semua yang ada di dalam kotak itu adalah milik halaman lain; semua yang di luarnya tetap milikmu.

Bayangkan begini biar gampang: halamanmu itu sebuah tembok, dan iframe adalah jendela di tembok itu. Lewat jendela kamu bisa melihat ruangan lain (halaman lain), tapi kamu tidak sedang berdiri di ruangan itu. Keduanya tetap terpisah — dan seperti yang nanti kamu lihat, pemisahan inilah yang jadi kelebihan sekaligus keterbatasan terbesar iframe.

Menulis iframe pertamamu

<iframe> adalah elemen biasa yang punya tag pembuka dan penutup, walaupun hampir selalu ditulis menyatu karena kamu tidak menaruh konten apa pun di antara tag-nya. Beberapa atribut menanggung tugas utamanya:

<iframe
  src="https://www.openstreetmap.org/export/embed.html"
  width="600"
  height="400"
  title="Peta pusat kota"></iframe>

• src — URL halaman yang mau disematkan. Inilah satu-satunya atribut yang mau tidak mau harus ada.
• width dan height — ukuran bingkai dalam piksel. Tanpa keduanya, browser memakai ukuran bawaan (sering 300×150) yang jarang sesuai keinginanmu.
• title — deskripsi singkat dan mudah dibaca tentang isi bingkai itu. Ini bukan sekadar hiasan: pembaca layar (screen reader) membacakannya, jadi kalau kamu lupa menulisnya, halamanmu jadi lebih sulit dipakai orang yang mengandalkan teknologi bantu.

Apa pun yang kamu tulis di antara tag pembuka dan penutup berfungsi sebagai konten cadangan untuk browser sangat lawas yang tidak bisa menampilkan iframe — yang sekarang praktis sudah tidak ada, jadi biasanya bagian itu kamu biarkan kosong saja.

Mengatur ukuran iframe dengan benar

Secara bawaan, iframe punya ukuran piksel yang tetap dan garis bingkai di sekelilingnya. Ada dua hal yang sering bikin orang tersandung di sini, jadi mari kita bereskan keduanya.

Pertama, soal bingkai. Dulu browser menggambar garis tebal di sekeliling iframe. Kamu bisa mematikannya lewat CSS, dan inilah cara modernnya:

<iframe
  src="https://example.com"
  width="600"
  height="400"
  title="Halaman contoh"
  style="border: none;"></iframe>

Kedua, soal responsif. Lebar yang dipatok mati width="600" memang kelihatan rapi di laptop, tapi melimpah keluar layar di ponsel. Solusi yang umum adalah membuat iframe memenuhi lebar wadahnya dan memakai CSS untuk mengunci rasio aspeknya supaya tidak gepeng:

<div style="max-width: 600px;">
  <iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="Video demo"
    style="border: none; width: 100%; aspect-ratio: 16 / 9;"></iframe>
</div>

Di sini iframe melar sampai 100% dari <div> pembungkusnya, dan aspect-ratio: 16 / 9 menjaga bentuknya tetap pas untuk video layar lebar di ukuran layar berapa pun. Pola kecil inilah yang dipakai hampir semua potongan kode “sematkan video ini” di balik layar.

Pemakaian umum di dunia nyata

Iframe muncul di beberapa situasi yang cukup spesifik. Mengenali pola-pola ini membantumu tahu kapan iframe memang jawaban yang paling alami.

• Peta. Google Maps dan OpenStreetMap sama-sama memberimu potongan iframe siap pakai, jadi peta hidup yang bisa digeser-geser muncul di halamanmu tanpa kamu menulis kode peta sama sekali.
• Video. YouTube, Vimeo, dan layanan sejenis memberimu iframe yang menyematkan pemutar mereka. Videonya, kontrolnya, dan pelacakannya semua tetap di sisi mereka.
• Widget pihak ketiga. Form pembayaran, widget chat, sistem komentar, dan alat “booking kalender” sering dikirim dalam bentuk iframe, supaya penyedianya yang mengendalikan bagian-bagian sensitif.
• Pratinjau yang terisolasi. Alat yang membuatmu bisa menulis kode lalu langsung melihat hasilnya (code playground) sering menampilkan pratinjau langsungnya di dalam iframe, supaya kode penggunanya terpisah dari aplikasi di sekelilingnya.

Perhatikan polanya: iframe paling bersinar ketika benda yang disematkan adalah aplikasi mini mandiri milik orang lain yang ingin kamu pasang tanpa harus membangunnya ulang sendiri.

Atribut keamanan yang benar-benar perlu kamu pakai

Karena iframe memuat halaman milik orang lain ke dalam halamanmu, dia datang dengan pertimbangan keamanan yang nyata. Dua atribut adalah kendali utamamu, dan keduanya sebaiknya kamu anggap sebagai bagian dari menulis iframe, bukan tambahan yang dipikirkan belakangan.

Atribut sandbox

sandbox mengunci halaman yang disematkan. Begitu atribut ini ada, halaman dalam bingkai langsung dilucuti kemampuan-kemampuan berbahayanya secara bawaan — dia tidak bisa menjalankan script, mengirim form, memicu unduhan, atau menerobos keluar ke halamanmu. Lalu kamu menambahkan kembali hanya izin yang benar-benar kamu butuhkan, satu kata kunci demi satu kata kunci:

<iframe
  src="widget-tidak-tepercaya.html"
  sandbox="allow-scripts allow-same-origin"
  title="Widget tidak tepercaya"></iframe>

• sandbox tanpa nilai = kunci maksimal (tidak ada script, tidak ada form, tidak ada apa-apa).
• sandbox="allow-scripts" = script diizinkan, sisanya tetap diblokir.
• Kamu menggabungkan kata kunci dengan spasi untuk memberi persis izin yang dibutuhkan, dan tidak lebih.

Pola pikirnya adalah “tolak semuanya dulu, lalu izinkan seminimum mungkin” — pengaturan paling aman saat kamu menyematkan konten yang belum sepenuhnya kamu percaya.

Atribut allow

Kalau sandbox soal pembatasan, maka allow mengatur akses ke fitur browser yang kuat seperti kamera, mikrofon, lokasi (geolocation), atau mode layar penuh. Sematan video, misalnya, biasanya butuh izin layar penuh:

<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Video demo"
  allow="fullscreen; picture-in-picture"></iframe>

Kalau kamu tidak mencantumkan sebuah fitur di allow, halaman yang disematkan tidak bisa memakainya — jadi halaman asing yang disematkan tidak bisa diam-diam meminta akses kamera pengunjung. Itu mekanisme perlindungannya bekerja sesuai harapan.

Kenapa sebagian halaman tidak bisa dimasukkan ke iframe milikmu

Coba sematkan situs seperti Google atau bank ke halamanmu sendiri, dan kamu sering akan dapat kotak kosong atau pesan error, bukan halamannya. Itu memang disengaja. Situs bisa menyuruh browser “jangan biarkan siapa pun memuatku di dalam iframe” lewat sebuah header respons (misalnya X-Frame-Options atau aturan frame-ancestors di Content Security Policy mereka).

Kenapa mereka memblokirnya? Terutama untuk mencegah clickjacking — serangan saat halaman jahat secara tak kasatmata membingkai situs asli (misalnya halaman login bank-mu) lalu mengelabuimu agar mengeklik hal-hal yang tidak kamu maksudkan. Dengan menolak dibingkai, situs-situs sensitif mematikan serangan itu. Jadi kalau sebuah sematan tiba-tiba tidak mau muncul, biasanya inilah alasannya: situs lain itu memilih untuk tidak bisa disematkan, dan tidak ada yang salah dari sisimu.

Pemisahan antara iframe dan halaman induknya

Ingat lagi gambaran “jendela di tembok” tadi. Karena halaman yang disematkan adalah dokumen terpisah, halamanmu dan iframe-nya pada dasarnya tidak bisa saling menjangkau. CSS halamanmu tidak menata isi iframe, dan JavaScript-mu tidak bisa membaca atau mengubah apa yang ada di dalamnya — begitu pula sebaliknya.

Ini fitur, bukan kekurangan. Justru inilah yang membuat iframe cukup aman untuk menyematkan konten orang asing: form pembayaran yang disematkan tidak bisa mengintip halamanmu, dan halamanmu tidak bisa mengutak-atik form pembayaran itu. Satu-satunya pengecualian adalah ketika kedua halaman berasal dari origin yang sama (protokol, domain, dan port yang sama), yang dalam hal ini keduanya boleh saling berkomunikasi lewat JavaScript. Untuk sematan dari situs lain, temboknya tetap berdiri — dan itu memang disengaja.

Kapan iframe jadi pilihan yang salah

Iframe itu ampuh, tapi memakainya karena kebiasaan justru bikin masalah. Lewati iframe ketika:

• Kamu cuma mau menampilkan kontenmu sendiri. Kalau halaman yang disematkan itu milikmu, biasanya lebih baik membangun kontennya langsung di halaman. Dokumen terpisah berarti satu pemuatan halaman penuh lagi, style-nya sendiri, dan repot saat mau membuat semuanya responsif bareng-bareng.
• Kamu butuh isinya berinteraksi dengan halamanmu. Karena pemisahan yang sudah dibahas tadi, iframe kurang cocok kalau benda yang disematkan harus membaca data halamanmu atau bereaksi terhadapnya.
• SEO penting untuk konten itu. Mesin pencari menganggap halaman yang dibingkai sebagai dokumen terpisah; teks di dalam iframe umumnya tidak dihitung sebagai konten halamanmu. Jangan taruh tulisan penting yang perlu terindeks di dalam iframe.
• Performa mepet. Setiap iframe sebenarnya satu halaman tambahan utuh yang dimuat — lebih banyak permintaan, lebih banyak memori. Halaman yang penuh dijejali iframe terasa berat dan lambat.

Patokan yang bagus: pakai iframe untuk menyematkan alat atau media mandiri milik orang lain, dan hindari untuk kontenmu sendiri atau apa pun yang perlu menyatu dengan halamanmu.

Penutup

Iframe adalah elemen kecil dengan tugas besar: dia membuat satu halaman bisa menampung halaman lain yang benar-benar mandiri di dalamnya. Inti-intinya:

• Sebuah <iframe> menyematkan halaman web terpisah lewat src, ditampilkan sebagai area di dalam halamanmu.
• Selalu atur width, height, dan title — dan pakai CSS (border: none, width: 100%, aspect-ratio) supaya rapi dan responsif.
• Halaman yang disematkan terisolasi penuh dari halamanmu kecuali keduanya berbagi origin yang sama — CSS dan JS-mu tidak bisa menjangkau ke dalam, dan justru itulah yang menjaga semuanya tetap aman.
• Pakai sandbox untuk mengunci konten yang tidak tepercaya (tolak semua dulu, lalu izinkan seminimum mungkin) dan allow untuk memberi akses fitur seperti layar penuh atau kamera.
• Situs bisa menolak dibingkai demi mencegah clickjacking, jadi sebagian sematan memang tidak akan muncul — dan itu keputusan mereka, bukan kesalahanmu.
• Raih iframe untuk menyematkan alat atau media mandiri milik orang lain, dan hindari untuk kontenmu sendiri, untuk hal yang perlu berinteraksi dengan halamanmu, atau saat SEO dan performa sangat krusial.

Dipakai di tempat yang tepat — peta, video, widget pihak ketiga yang tepercaya — iframe menghemat banyak sekali tenagamu. Dipakai di tempat yang salah, dia menambah beban dan menutup konten yang seharusnya menjadi bagian dari halamanmu. Sekarang kamu sudah bisa membedakan keduanya.