Sematan pihak ketiga membawa kode yang tidak kita tulis: skrip, formulir, dan popup semuanya berjalan dari dokumen milik orang lain. Atribut sandbox memberi kita tombol pengatur untuk membatasi kemampuan tersebut sebelum dokumen sematan berjalan. Tanpa nilai apa pun, iframe masuk ke mode pembatasan maksimal; token allowlist menambahkan kembali kemampuan satu per satu. Chapter ini membedah mode bawaan, tabel token, kombinasi yang wajib dihindari, dan prinsip pemilihannya.

Mode Pembatasan Maksimal #

Atribut sandbox tanpa nilai menerapkan seluruh pembatasan sekaligus. Browser menonaktifkan skrip dan formulir, memblokir popup, melarang pengunduhan, dan — yang paling penting — memperlakukan dokumen sematan berasal dari origin unik yang berbeda dari semuanya. Origin unik berarti dokumen sematan gagal uji same-origin terhadap halaman induk, sehingga penyimpanan, cookie, dan DOM-nya terpisah total. Pola ini cocok untuk konten yang isinya statis dan tidak membutuhkan interaksi.

html 
<iframe sandbox src="panel-komentar.html" title="Panel komentar pengunjung" width="380" height="320"></iframe>

Output yang Dihasilkan:

text 
Panel tetap tampil, tetapi kemampuan aktifnya dinonaktifkan:
  - tombol Kirim pada formulir tidak mengirimkan apa pun
  - skrip di dalam panel tidak berjalan
  - popup dan unduhan diblokir browser

Mari kita telaah peran setiap bagian:

  1. sandbox tanpa nilai: seluruh pembatasan diterapkan; belum ada satu token pun yang mengizinkan kemampuan.
  2. src="panel-komentar.html": bila sematannya berada di server kita sendiri pun, dokumen itu tetap diperlakukan sebagai origin unik, bukan origin halaman induk.
  3. title dan ukuran: pembatasan keamanan tidak mengubah kewajiban penamaan dan ukuran dari chapter sebelumnya.

Token Allowlist dan Artinya #

Token ditulis dipisahkan spasi pada nilai sandbox; setiap token menyalakan kembali satu kemampuan. Tabel berikut merangkum token yang paling sering dipakai:

TokenKemampuan yang diizinkan kembali
allow-scriptsmenjalankan JavaScript di dalam iframe
allow-formsmengirimkan formulir
allow-popupsmembuka jendela baru, misalnya lewat target="_blank"
allow-same-originmemakai origin asli, bukan origin unik; penyimpanan dan cookie kembali berlaku
allow-modalsmenampilkan dialog alert, confirm, dan prompt
allow-downloadsmengunduh berkas
allow-top-navigationmenavigasi halaman induk
allow-popups-to-escape-sandboxpopup yang dibuka tidak mewarisi pembatasan iframe

Varian allow-top-navigation-by-user-activation hanya mengizinkan navigasi halaman induk setelah pengunjung berinteraksi. Daftar lengkapnya tercantum pada standar HTML; karena panjang itulah token dipilih per kebutuhan, bukan disalin utuh.

Kombinasi yang Wajib Dihindari #

Mekanismenya mudah diikuti: allow-same-origin mengembalikan origin asli beserta wewenang penuh atas dokumen itu, termasuk mengubah atribut iframe lewat DOM. Standar HTML mencatat kombinasi ini eksplisit sebagai jalan keluar dari sandbox. Untuk sematan yang dimuat dari origin yang sama, gabungan ini praktis sama dengan tanpa sandbox.

Prinsip Least Privilege #

Prinsip least privilege menyatakan sebuah komponen cukup diberi kemampuan minimum yang diperlukan, tidak lebih. Penerapannya pada iframe berjalan dua arah: mulai dari sandbox kosong, lalu tambahkan token hanya bila fitur sematannya benar-benar membutuhkan. Widget komentar membutuhkan formulir sehingga allow-forms wajar disertakan; widget cuaca statis tidak membutuhkan satu token pun. Perubahan token berlaku pada pemuatan berikutnya, jadi uji setiap penambahan dengan memuat ulang halaman.

html 
<!-- Tahap 1: kosong dulu, penuh pembatasan -->
<iframe sandbox src="panel-komentar.html" title="Panel komentar pengunjung" width="380" height="320"></iframe>

<!-- Tahap 2: tambah token sesuai kebutuhan fitur -->
<iframe sandbox="allow-forms" src="panel-komentar.html" title="Panel komentar pengunjung" width="380" height="320"></iframe>

Contoh Lengkap dalam Satu File #

File berikut menyematkan panel komentar dengan satu token: formulir harus bisa dikirim, sementara skrip dan popup tetap terkunci. Dokumen sematannya ikut disertakan agar contoh dapat dicoba sepenuhnya:

html contoh-sandbox.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Sandbox</title>
</head>
<body>
  <h1>Komentar pengunjung</h1>
  <p>Panel komentar berjalan di dalam iframe ter-sandbox.</p>
  <iframe sandbox="allow-forms" src="panel-komentar.html" title="Panel komentar pengunjung" width="380" height="320"></iframe>
  <p>Formulir berfungsi, sedangkan skrip dan popup di dalamnya tetap diblokir.</p>
</body>
</html>
html panel-komentar.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Panel Komentar</title>
</head>
<body>
  <h1>Kirim komentar</h1>
  <form action="www.example.com/komentar" method="post">
    <label for="nama">Nama</label>
    <input id="nama" name="nama" type="text">
    <label for="pesan">Komentar</label>
    <textarea id="pesan" name="pesan" rows="3"></textarea>
    <button type="submit">Kirim</button>
  </form>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Judul "Komentar pengunjung" dan satu paragraf pengantar
  - Panel komentar 380x320 berisi formulir Nama dan Komentar
  - Tombol Kirim mengirimkan form ke www.example.com/komentar
  - Skrip dan popup dari panel tidak berjalan

Mari kita bedah baris-baris penting pada file pertama:

  1. Baris 11 (sandbox="allow-forms"): satu-satunya token yang dibutuhkan panel; skrip, popup, dan origin asli tetap dilarang.
  2. Baris 11 (src lokal): contoh memakai dokumen milik kita sendiri agar mudah diuji; pola yang sama berlaku untuk URL pihak ketiga.
  3. Baris 12 (paragraf penjelas): memberi tahu pembaca bahwa pembatasan pada panel memang disengaja.
  4. panel-komentar.html (dokumen sematan): isinya formulir biasa; perbedaan perilakunya sepenuhnya ditentukan oleh sandbox di halaman induk.

Sandbox mengunci kemampuan dokumen sematan dari sisi kita. Batas berikutnya muncul dari arah sebaliknya — pemilik resource punya aturan sendiri tentang di mana kontennya boleh disematkan, dan itu topik dua chapter terakhir section ini.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

contoh-sandbox.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Sandbox</title>
</head>
<body>
  <h1>Komentar pengunjung</h1>
  <p>Panel komentar berjalan di dalam iframe ter-sandbox.</p>
  <iframe sandbox="allow-forms" src="panel-komentar.html" title="Panel komentar pengunjung" width="380" height="320"></iframe>
  <p>Formulir berfungsi, sedangkan skrip dan popup di dalamnya tetap diblokir.</p>
</body>
</html>

panel-komentar.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Panel Komentar</title>
</head>
<body>
  <h1>Kirim komentar</h1>
  <form action="www.example.com/komentar" method="post">
    <label for="nama">Nama</label>
    <input id="nama" name="nama" type="text">
    <label for="pesan">Komentar</label>
    <textarea id="pesan" name="pesan" rows="3"></textarea>
    <button type="submit">Kirim</button>
  </form>
</body>
</html>