Keamanan Iframe

Sematan iframe memuat dokumen penuh milik pihak lain ke dalam halaman kita: skrip, formulir, dan penyimpanannya ikut berjalan di dalam bingkai tersebut. Section Embedded Content membahas mekanisme atributnya secara rinci; chapter ini merangkum semuanya dari sudut keamanan. Kita susun tabel mitigasi risiko, tandai kombinasi token yang wajib dihindari, lalu tutup dengan sisi pemilik situs melalui header X-Frame-Options. Satu prinsip memandu seluruh pembahasan: pilih sumber sematan yang terpercaya dan beri kewenangan seminimal mungkin.

Prinsip Least Privilege pada Atribut sandbox #

Atribut sandbox mengikuti prinsip least privilege: mulai dari keadaan paling terbatas, lalu nyalakan kemampuan satu per satu sesuai kebutuhan. Tanpa nilai apa pun, dokumen sematan kehilangan skrip, formulir, popup, dan akses penyimpanan; origin-nya pun dijadikan origin unik. Setiap token pada nilai sandbox mengembalikan satu kemampuan, sehingga daftar token adalah daftar kewenangan yang kita berikan. Tabel berikut memetakan risiko umum sematan ke mitigasi dari sisi HTML:

Kombinasi Token yang Dihindari #

Mekanisme lengkapnya telah dibedah pada chapter Sandbox Iframe; di sini cukup pegang aturannya. Untuk sematan statis seperti panel komentar, sandbox tanpa token sering kali cukup. Bila panel memang memerlukan JavaScript, tambahkan hanya allow-scripts dan biarkan allow-same-origin tetap tertahan.

referrerpolicy pada iframe #

Sebelum memuat dokumen sematan, browser mengirim permintaan yang membawa header Referer — alamat halaman kita. Atribut referrerpolicy mengatur seberapa banyak informasi itu diteruskan ke server tujuan. Nilai no-referrer tidak mengirim apa pun, nilai origin hanya mengirim bagian domain, dan nilai bawaan strict-origin-when-cross-origin memangkas perujuk lintas origin sampai level origin. Untuk sematan pihak ketiga, no-referrer adalah pilihan yang paling hemat informasi.

Memilih Sumber Sematan #

Pengaman atribut hanya setengah pekerjaan; setengah lainnya adalah memilih dari siapa kita menyematkan. Pertimbangan singkatnya:

• pilih layanan dari penyedia yang bereputasi dan dapat dipertanggungjawabkan;
• salin kode sematan dari dokumentasi resmi layanan tersebut, bukan dari halaman yang tidak dikenal;
• catat daftar sematan pihak ketiga yang dipakai situs, sehingga pemeriksaan berkala mudah dilakukan.

Sisi Pemilik Situs: X-Frame-Options #

Keamanan iframe bekerja dua arah: selain memilih sematan dengan hati-hati, kita juga dapat melarang halaman kita disematkan pihak lain. Larangan itu dipasang lewat header HTTP dari server, bukan lewat markup. Header klasiknya X-Frame-Options dengan nilai DENY — menolak seluruh penyematan — atau SAMEORIGIN yang masih mengizinkan origin yang sama:

X-Frame-Options: DENY

Standar yang lebih baru adalah direktif frame-ancestors pada Content-Security-Policy, yang menawarkan kontrol berbasis origin dengan lebih rinci. Keduanya kita perlakukan sebagai pelengkap: atribut sandbox melindungi pengunjung di halaman kita, sedangkan header ini melindungi halaman kita dari sematan orang lain.

Contoh Sematan Berlapis Pengaman #

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sematan Panel dengan Pengaman Berlapis</title>
</head>
<body>
  <h1>Sematan Panel dengan Pengaman Berlapis</h1>
  <p>Halaman ini menyematkan panel statistik dari layanan mitra yang terpercaya. Atribut <code>sandbox</code> menahan kemampuan dokumen sematan, <code>title</code> menamai frame untuk screen reader, dan <code>referrerpolicy</code> menahan alamat halaman ini agar tidak diteruskan ke server tujuan.</p>
  <iframe src="www.example.com/panel-statistik"
          title="Panel statistik pengunjung dari layanan mitra"
          width="480" height="320"
          sandbox="allow-scripts"
          referrerpolicy="no-referrer"
          loading="lazy"></iframe>
  <p>Panel tidak tampil? Buka <a href="www.example.com/panel-statistik" target="_blank" rel="noopener noreferrer">panel statistik pada tab baru</a> sebagai tautan cadangan.</p>
</body>
</html>

Output yang Dihasilkan:

Panel statistik tampil dalam bingkai 480x320. Skrip di dalamnya
boleh berjalan, tetapi penyimpanan, cookie, popup, dan pengiriman
perujuk semuanya tertahan.

Mari kita telaah atribut pengamannya:

1. src="www.example.com/panel-statistik": sumber sematan berasal dari layanan mitra yang terpercaya.
2. sandbox="allow-scripts": hanya kemampuan skrip yang dinyalakan; formulir, popup, dan akses penyimpanan tetap tertahan.
3. referrerpolicy="no-referrer": alamat halaman ini tidak diteruskan ke server mitra.
4. loading="lazy": sematan menunggu hingga mendekati viewport, sehingga halaman tetap cepat tampil.
5. Tautan cadangan: bila panel gagal memuat, pengunjung masih dapat membuka tujuannya pada tab baru — lengkap dengan rel="noopener noreferrer".

Sematan dan link membawa konten luar masuk ke halaman kita. Jalur risiko berikutnya justru muncul dari dalam: data yang dikirim pengunjung sendiri lalu ditampilkan kembali. Chapter berikutnya membedah apa yang terjadi bila input itu dirender sebagai HTML, beserta prinsip yang menahan risikonya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen iframe
• MDN Web Docs — X-Frame-Options

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sematan Panel dengan Pengaman Berlapis</title>
</head>
<body>
  <h1>Sematan Panel dengan Pengaman Berlapis</h1>
  <p>Halaman ini menyematkan panel statistik dari layanan mitra yang terpercaya. Atribut <code>sandbox</code> menahan kemampuan dokumen sematan, <code>title</code> menamai frame untuk screen reader, dan <code>referrerpolicy</code> menahan alamat halaman ini agar tidak diteruskan ke server tujuan.</p>
  <iframe src="www.example.com/panel-statistik"
          title="Panel statistik pengunjung dari layanan mitra"
          width="480" height="320"
          sandbox="allow-scripts"
          referrerpolicy="no-referrer"
          loading="lazy"></iframe>
  <p>Panel tidak tampil? Buka <a href="www.example.com/panel-statistik" target="_blank" rel="noopener noreferrer">panel statistik pada tab baru</a> sebagai tautan cadangan.</p>
</body>
</html>