HTML 10: Iframe, Embed, dan Keamanannya

iframe menampilkan halaman lain di dalam sebuah halaman. Contohnya adalah peta, video, atau demonstrasi kode. Karena memuat dokumen terpisah, iframe perlu dipakai dengan hati-hati.

1. Iframe Dasar

• src adalah halaman yang dimuat.
• title menjelaskan isi iframe kepada pengguna pembaca layar.
• loading="lazy" menunda pemuatan sampai iframe mendekati layar.

2. Menyematkan Halaman Demo Video

Jika penyedia konten memberikan halaman embed resmi, masukkan URL halaman tersebut pada src. Contoh berikut memakai halaman demo video CC0 dari MDN.

Untuk layanan lain, atribut allow dapat memberikan izin fitur tertentu. Berikan hanya izin yang memang dibutuhkan.

Halaman demo dan media di dalamnya berasal dari MDN Learning Area yang menggunakan lisensi CC0 1.0.

3. Atribut sandbox

Tanpa nilai tambahan, sandbox menerapkan banyak pembatasan. allow-scripts mengizinkan JavaScript tetapi tetap mempertahankan pembatasan lain. Jangan menambahkan izin secara acak hanya untuk menghilangkan error.

Kombinasi allow-scripts dan allow-same-origin pada konten dari origin yang sama dapat sangat mengurangi perlindungan sandbox. Untuk kode tidak tepercaya, gunakan isolasi yang dirancang khusus.

4. Layout Responsif

Kesalahan Umum

• Tidak memberikan title.
• Memberikan terlalu banyak izin melalui allow atau sandbox.
• Memasang banyak iframe berat tanpa lazy loading.
• Menganggap semua website mengizinkan dirinya ditampilkan dalam iframe.

Latihan

Buat iframe untuk halaman lokal. Tambahkan title, loading="lazy", class responsif, dan sandbox paling ketat yang masih memungkinkan demo bekerja.

Rangkuman

Iframe berguna untuk konten terpisah, tetapi membawa biaya performa, privasi, dan keamanan. Mulailah dari izin paling sedikit dan selalu beri judul yang jelas.