Pernah liat website yang ada peta Google Maps di tengah halaman, atau video YouTube yang bisa di-play tanpa pindah ke yt.com? Itu iframe — tag yang masukin halaman web LAIN ke dalam halaman kamu, kayak jendela kecil ke dunia luar. Kamu liat isinya, tapi gak bisa rusak-rusakin (sandbox security). Tools andalan buat embed konten pihak ketiga: peta, video, tweet, payment gateway.

💡 Pisau bermata dua. Iframe powerful tapi bisa jadi attack vector kalau gak hati-hati. Selalu pasang sandbox attribute buat batasin iframe dari embed yang gak terpercaya. Bank dan login page sengaja blok diri buat di-iframe (X-Frame-Options: DENY) — biar gak bisa kena clickjacking.

Embed Video YouTube

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="560" height="315"
  title="Judul Video"
  allowfullscreen>
</iframe>

Embed Google Maps

<iframe
  src="https://www.google.com/maps/embed?..."
  width="600" height="450"
  loading="lazy">
</iframe>

Atribut Penting <iframe>

• src — URL halaman yang di-embed
• width / height — ukuran iframe
• title — deskripsi untuk aksesibilitas
• loading="lazy" — memuat iframe hanya saat terlihat di layar
• allowfullscreen — izinkan mode layar penuh

Perlu diketahui: tidak semua website mengizinkan halaman mereka di-embed dalam iframe. Website bisa memblokir ini menggunakan header X-Frame-Options.

🎭 Analogi sehari-hari

<iframe> = jendela ke gedung tetangga. Kamu lihat isinya, tapi tidak bisa masuk dan ubah furniture di sana — gedung itu beda owner, beda akses.

⚠️ Jebakan yang sering ditemui

• Cross-origin iframe TIDAK BISA diakses JS — security (Same-Origin Policy). Mau interact, server lain harus kasih izin via postMessage API.
• Site bisa BLOKIR di-embed lewat X-Frame-Options: DENY atau Content-Security-Policy: frame-ancestors. YouTube, Google Maps mengizinkan; bank, login page tidak.
• Iframe lambat halaman — load mode subdocument terpisah. Pakai loading="lazy" agar tunggu sampai terlihat.
• sandbox attribute = security hardening. sandbox="" (kosong) = max restriction. Tambah privilege satu per satu (sandbox="allow-scripts").
• Responsive iframe susah — <iframe> tidak respect aspect-ratio bawaan. Pakai wrapper padding-bottom: 56.25% (16:9) atau CSS aspect-ratio.
• <iframe> SEO tidak diindex sebagai konten halaman host — pakai untuk widget, jangan content utama.

🎯 <iframe> vs link biasa vs window.open — pilih yang mana?

• User mau LIAT konten luar tanpa pindah halaman (peta, video, tweet) → <iframe> (sandbox)
• User mau PINDAH ke halaman luar (klik baca artikel lengkap) → <a href="..." target="_blank" rel="noopener">
• Buka dialog/modal interaktif dari domain kamu sendiri → <dialog> element (bukan iframe)
• Embed payment gateway / OAuth login → <iframe> dengan sandbox strict + allow-forms allow-scripts allow-same-origin HATI-HATI
• Auto-popup pas page load → JANGAN (browser block + UX horor)

Aturan: iframe = "tampilin halaman lain di dalam halamanku", link = "pindah ke halaman lain". Tergantung apakah konten harus inline atau navigation.

TL;DR: <iframe> = embed halaman web lain ke halaman kamu (peta, video YouTube, payment gateway). Cross-origin iframe gak bisa diakses JS (Same-Origin Policy). Site bisa blok embed via X-Frame-Options/frame-ancestors. Pakai loading="lazy" biar gak lambatin halaman. sandbox attribute = security hardening (sandbox="" = max restriction, tambah privilege satu per satu). Responsive iframe pakai aspect-ratio: 16/9 di wrapper.