iframe sandbox (Atribut Keamanan Iframe)

TL;DR: iframe sandbox adalah atribut HTML pada elemen <iframe> yang mencabut seluruh kemampuan konten di dalamnya, mulai dari menjalankan JavaScript, mengirim form, membuka popup, sampai mengubah alamat halaman induk. Izin kemudian dikembalikan satu per satu lewat token tertentu, sehingga embed pihak ketiga tidak menjadi celah keamanan.

Apa itu iframe sandbox?

iframe sandbox adalah mekanisme keamanan bawaan browser yang dideklarasikan lewat atribut sandbox pada elemen <iframe>. Tanpa atribut ini, konten iframe dapat menjalankan skrip penuh, mengubah window.top.location, membuka jendela baru, dan mengakses penyimpanan halaman induk apabila berasal dari origin yang sama.

Dengan sandbox="" tanpa nilai, browser mencabut semua kemampuan tersebut sampai token izin ditambahkan secara eksplisit. Atribut ini didokumentasikan di MDN Web Docs dan didukung seluruh browser modern. Perannya melengkapi CSP dan Subresource Integrity sebagai lapisan pertahanan berlapis untuk konten pihak ketiga.

Token Izin yang Sering Dipakai

Kombinasi allow-scripts dan allow-same-origin secara bersamaan harus dihindari untuk konten buatan pengguna, karena kombinasi itu memungkinkan skrip di dalam iframe menghapus atribut sandbox-nya sendiri dari DOM induk.

Contoh Penerapan

Untuk widget kalkulator pihak ketiga yang hanya butuh menjalankan skrip dan mengirim form, konfigurasi minimalnya seperti berikut.

<iframe
  src="https://widget.contoh.id/kalkulator"
  sandbox="allow-scripts allow-forms"
  referrerpolicy="no-referrer"
  loading="lazy"
  title="Kalkulator simulasi biaya">
</iframe>

Metodenya: mulai dari sandbox="", buka halaman, lihat error di console, lalu tambahkan token satu per satu sampai widget berfungsi. Cara ini menghasilkan izin paling sempit yang masih membuat fitur berjalan. Perlu diingat bahwa sandbox mengatur apa yang boleh dilakukan iframe di halaman Anda, sedangkan X-Frame-Options mengatur siapa yang boleh menyematkan halaman Anda di iframe mereka. Arahnya berlawanan.

Kenapa Penting?

Banyak website bisnis di Indonesia memasang widget pihak ketiga, mulai dari chat, kalkulator cicilan, peta, hingga pemutar video. Dari pengalaman audit keamanan dan performa pada beberapa proyek klien Vito Atmo, sebagian besar embed dipasang apa adanya tanpa atribut sandbox, sehingga skrip vendor memiliki akses penuh ke konteks halaman.

Risikonya nyata: jika satu vendor terkompromi, penyerang mendapat pijakan di setiap situs yang memuat skripnya. Skenario ini merupakan bentuk supply chain attack, dan sandbox adalah cara paling murah untuk membatasi dampaknya. Atribut ini juga menutup sebagian vektor XSS yang masuk lewat konten tersemat.

Pertanyaan Umum

Apakah iframe sandbox merusak fungsi widget?

Tidak, selama token izin disesuaikan. Mulai dari sandbox="", lalu tambahkan token satu per satu sampai widget berjalan normal. Yang perlu dihindari adalah langsung memberi semua token karena itu menghilangkan manfaat sandbox.

Apa bedanya iframe sandbox dan CSP?

CSP melindungi seluruh halaman dengan menentukan sumber mana yang boleh memuat skrip, gaya, dan aset. Sandbox membatasi apa yang boleh dilakukan konten di dalam satu iframe tertentu. Keduanya saling melengkapi, bukan saling menggantikan.

Kenapa allow-scripts dan allow-same-origin tidak boleh digabung?

Karena dengan kedua izin itu, skrip di dalam iframe berada pada origin yang sama dengan halaman induk dan dapat mengakses DOM induk untuk menghapus atribut sandbox, lalu memuat ulang iframe tanpa proteksi. Untuk konten buatan pengguna, sajikan iframe dari domain terpisah.