Kodeloka
  1. Kodeloka
  2. Kelas HTML
  3. Materi

4 · Elemen Interaktif · Modul 21 dari 27

Menyematkan Konten Eksternal (iframe), Atribut sandbox, dan Keamanan Bingkai

Menyematkan halaman atau layanan pihak ketiga menggunakan <iframe> secara aman dan aksesibel melalui pembatasan hak sandbox, allow, referrerpolicy, loading="lazy", serta mencegah serangan Clickjacking.

Praktik dan kuis di kelas interaktif →

Apa yang Terjadi Saat Anda Menyematkan <iframe>?

Elemen **<iframe> (Inline Frame)** memungkinkan Anda menyematkan dokumen HTML lain—seperti pemutar video YouTube, peta interaktif OpenStreetMap, editor kode Go Playground, atau widget pembayaran—di dalam sebuah kotak di halaman Anda.

Namun, setiap <iframe> menciptakan **konteks penjelajahan (browsing context) bersarang yang lengkap**: ia memiliki objek window, pohon DOM, serta mengunduh CSS dan JavaScript miliknya sendiri. Tanpa pembatasan yang tepat, <iframe> dari pihak ketiga dapat memperlambat halaman utama Anda atau bahkan melakukan tindakan berbahaya seperti membuka jendela pop-up iklan, mengalihkan halaman utama Anda (top-level redirect), atau meminta izin kamera tanpa sepengetahuan Anda.

1. Anatomi <iframe> yang Aksesibel dan Efisien

<iframe
  title="Video Tutorial Instalasi PostgreSQL di Linux"
  src="https://www.youtube-nocookie.com/embed/ID_VIDEO_ANDA"
  width="560"
  height="315"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
  allow="fullscreen; picture-in-picture"
  sandbox="allow-scripts allow-same-origin allow-presentation"
></iframe>

Tiga Atribut Dasar yang Wajib Diperhatikan:

  1. title (Wajib untuk Aksesibilitas WCAG): Pengguna pembaca layar perlu mengetahui apa isi dari bingkai <iframe> tersebut sebelum memutuskan apakah mereka ingin masuk ke dalamnya atau melewatinya. Tanpa atribut title="..." yang deskriptif, pembaca layar hanya membacakan URL mentah yang membingungkan.
  2. loading="lazy": Karena setiap <iframe> memuat halaman web utuh di dalamnya, memasang loading="lazy" pada iframe yang berada di bagian bawah artikel menghemat ratusan kilobyte hingga megabyte kuota jaringan dan memori CPU saat halaman pertama kali dibuka!
  3. width dan height (serta CSS aspect-ratio): Mencegah pergeseran tata letak (Cumulative Layout Shift / CLS) saat iframe dimuat.

2. Mengurung Hak Akses Iframe dengan Atribut sandbox

Atribut sandbox menerapkan prinsip **Hak Akses Minimal (Least Privilege)** pada dokumen di dalam <iframe>.

Jika Anda menulis sandbox="" (dengan nilai kosong tanpa token), peramban akan menerapkan pembatasan paling ketat:

  • Skrip JavaScript di dalam iframe dilarang berjalan.
  • Formulir di dalam iframe dilarang dikirim.
  • Iframe dipaksa memiliki unique opaque origin (tidak bisa membaca cookie atau localStorage domain aslinya sendiri!).
  • Iframe dilarang membuka tab baru (window.open / target="_blank") dan dilarang mengubah URL halaman utama (window.top.location).

Anda kemudian dapat membuka izin hanya yang benar-benar diperlukan satu per satu menggunakan daftar putih token yang dipisahkan spasi:

Token sandboxIzin yang DibukaCatatan Keamanan
allow-scriptsMengizinkan eksekusi JavaScript di dalam iframe.Aman untuk widget interaktif selama tidak digabung sembarangan dengan origin yang sama.
allow-formsMengizinkan pengiriman formulir di dalam iframe.Diperlukan untuk widget survei atau halaman pembayaran tersemat.
allow-popupsMengizinkan pembukaan tab/jendela baru (target="_blank").Tab atau jendela baru yang dibuka mewarisi pembatasan sandbox yang sama, kecuali allow-popups-to-escape-sandbox juga diberikan.
allow-same-originMengizinkan isi iframe mempertahankan origin aslinya (sehingga bisa mengakses cookie/storage milik domain iframe tersebut).Lihat peringatan kritis di bawah!
allow-top-navigation-by-user-activationMengizinkan iframe mengalihkan halaman utama hanya jika pengguna mengeklik langsung di dalam iframe.Jauh lebih aman daripada allow-top-navigation biasa.
🚫 Peringatan Keamanan Kritis: Jangan Pernah Menggabungkan allow-scripts DAN allow-same-origin untuk Konten dari Origin Anda Sendiri!

Jika dokumen di dalam <iframe src="/pratinjau-user.html"> berasal dari **domain (origin) yang sama dengan situs utama Anda, dan Anda memberikan sandbox="allow-scripts allow-same-origin", maka skrip di dalam iframe tersebut memiliki akses ke window.parent.document dan dapat langsung menghapus atribut sandbox dari elemen <iframe> miliknya sendiri lalu memuat ulang dirinya tanpa penjara sandbox! Untuk merender pratinjau HTML buatan pengguna, gunakan sandbox="allow-scripts" TANPA** allow-same-origin (atau gunakan atribut srcdoc="..." dengan sandbox="").

Merender Cuplikan HTML Secara Terisolasi dengan srcdoc

Jika Anda ingin menampilkan pratinjau email HTML atau hasil latihan pengguna tanpa membuat berkas terpisah di server, gunakan atribut srcdoc yang dipadukan dengan sandbox="":

<iframe
  title="Pratinjau Komentar HTML Pengguna"
  sandbox=""
  srcdoc="<p>Halo! Ini adalah teks <strong>tebal</strong>, dan <script>alert('XSS gagal!')</script> otomatis diblokir oleh sandbox kosong.</p>"
  width="600"
  height="120"
></iframe>

3. Mengendalikan Fitur Perangkat Keras (allow) dan Privasi (referrerpolicy)

  1. Permissions Policy (allow="..."): Mengontrol apakah iframe diizinkan mengakses fitur perangkat keras sensitif. Secara bawaan, iframe lintas-origin tidak boleh mengakses kamera, mikrofon, atau geolokasi kecuali Anda mengizinkannya secara eksplisit: allow="fullscreen; clipboard-write; encrypted-media" (dan jangan pernah memberi camera atau microphone kecuali memang menyematkan aplikasi konferensi video!).
  2. referrerpolicy="strict-origin-when-cross-origin" (atau "no-referrer"): Memastikan bahwa saat iframe pihak ketiga dimuat, peramban tidak membocorkan jalur URL lengkap dan parameter query halaman internal Anda (hanya mengirimkan nama domain utama https://kodeloka.asadinedu.com/ atau tidak sama sekali).

4. Melindungi Situs Anda Sendiri agar Tidak Disematkan oleh Penyerang (Anti-Clickjacking)

Bagaimana jika penyerang membuat situs palsu lalu menyematkan halaman pengaturan akun situs Anda di dalam <iframe style="opacity: 0"> transparan tepat di atas tombol "Klaim Hadiah" agar korban tidak sengaja mengeklik tombol "Hapus Akun" milik situs Anda? Serangan ini disebut Clickjacking.

Cara menangkalnya adalah mengirimkan header HTTP Content-Security-Policy: frame-ancestors 'none' (atau 'self' jika hanya boleh disematkan oleh situs Anda sendiri) dari server web Anda!

Latihan Praktik: Menyematkan Playground Kode dan Pratinjau Aman

Buatlah berkas latihan-iframe.html:

  1. Sematkan satu <iframe title="..."> eksternal dengan loading="lazy", referrerpolicy="no-referrer", dan sandbox="allow-scripts".
  2. Buat satu <iframe title="Pratinjau Aman"> yang menggunakan srcdoc dan sandbox="" (kosong) untuk membuktikan bahwa tag <script> di dalam srcdoc benar-benar ditolak eksekusinya oleh peramban.
📚 Rujukan