Iframe Sandbox

Siti menyematkan peta dari penyedia layanan pihak ketiga. Yang sering luput dari perhatian: dokumen di dalam iframe datang membawa kemampuan penuh — menjalankan JavaScript, mengirim form, membuka jendela baru. Tanpa pembatasan, kita membukakan pintu dan berharap tamu berperilaku baik. Atribut sandbox mengubah posisi tawar: tamu tetap diundang, tetapi daftar kemampuannya kita tentukan sendiri.

Tanpa sandbox: Kemampuan Penuh #

Aturannya sederhana namun jarang disadari: iframe tanpa atribut sandbox menjalankan kontennya dengan kemampuan browser yang lengkap. Script berjalan, form terkirim, popup terbuka.

Mekanisme pembatasnya browser bernama same-origin policy: dokumen dari origin berbeda tidak dapat menyentuh DOM halaman induk. Namun bila dokumen sematan berasal dari origin yang sama dengan halaman kita — misalnya berkas kalender.html di proyek kita sendiri — script di dalamnya dapat membaca cookie, mengakses localStorage, dan memodifikasi halaman induk. Kebijakan same-origin justru membuka jalan itu karena keduanya memang satu origin.

sandbox Membalik Arah Izin #

sandbox membalik logikanya: bukan daftar larangan, melainkan daftar izin. Nilai kosong sandbox="" membatasi semuanya — dokumen diberi origin unik (tidak berbagi cookie maupun storage dengan siapa pun), script dimatikan, form diblokir, popup ditutup. Konten hanya dapat tampil.

Kemampuan lalu dibuka kembali satu per satu lewat token di nilai atribut:

Contoh: Embed Peta dengan Pembatasan #

<h2>Lokasi Kedai Kopi Siti</h2>

<iframe
  src="https://www.example.com/embed/peta-kedai"
  title="Peta lokasi Kedai Kopi Siti"
  width="600"
  height="400"
  loading="lazy"
  sandbox="allow-scripts allow-popups">
</iframe>

Hasil render: peta tampil dan tetap interaktif — pengguna menggeser serta memperbesar peta di dalam kotak. Tautan “buka peta penuh” milik penyedia tetap berfungsi sebagai popup.

Mari kita telaah penerapannya:

1. Baris 9 (sandbox="allow-scripts allow-popups"): hanya dua kemampuan dibuka — script untuk interaksi geser dan perbesar, popup untuk tautan peta penuh.
2. Token lain tidak ditulis: embed peta tidak membutuhkan allow-forms maupun allow-modals; token yang tidak diperlukan memang tidak dibuka.
3. allow-same-origin sengaja absen: penyedia peta berbeda origin dengan halaman kita; membuka token ini hanya menambah permukaan risiko tanpa manfaat.
4. Baris 8 (loading="lazy"): peta di bawah lipatan tidak dimuat sampai pengguna mendekat.

Perbedaan sandbox baru terasa saat isinya memuat script. Demo berikut menempatkan dua bingkai berisi sama — tombol dan script kecil — lalu membatasi salah satunya dengan sandbox="". Klik tombol pada kedua bingkai:

Bingkai demo memuat konten inline lewat atribut srcdoc, bukan URL pihak ketiga, sehingga perbedaan perilakunya terlihat tanpa memuat halaman luar.

Tanpa sandbox, klik tombol memunculkan teks baru — script-nya berjalan. Dengan sandbox="", tombol tetap tampil dan tetap bisa diklik, tetapi tidak terjadi apa pun: script diblokir dan hanya konten tampilan yang diizinkan. Kemampuan lalu dibuka kembali satu per satu lewat token — allow-scripts menghidupkan kembali script seperti pada contoh embed peta di atas, allow-popups membuka kembali tautan tab baru.

Aturan pada kotak peringatan di atas tetap berlaku di sini: jangan menggabungkan allow-scripts dan allow-same-origin pada bingkai yang isinya tidak kita percayai penuh — kombinasinya membuka jalan sandbox escape.

Ringkasan #

• Tanpa sandbox, konten iframe berjalan dengan kemampuan penuh; satu origin dengan induknya bahkan berarti akses DOM, cookie, dan storage.
• sandbox="" membatasi semuanya; token membuka kemampuan kembali satu per satu.
• allow-scripts + allow-same-origin adalah kombinasi berbahaya — hanya untuk konten yang sepenuhnya dipercayai.
• Untuk embed pihak ketiga, buka token seminimal fungsi yang benar-benar dibutuhkan.

Konten non-HTML seperti PDF menempuh jalur penyematan sendiri — dua elemen lawas yang dibahas chapter berikutnya: embed dan object.