Elemen iframe src dan sandbox
Sematkan halaman pihak ketiga dan batasi kemampuannya.
Elemen iframe src dan sandbox adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Apa Itu iframe?
Elemen <iframe> menyematkan dokumen HTML lain di dalam halaman saat ini. Setiap iframe memiliki konteks penjelajahan, DOM, dan ruang lingkup JavaScript sendiri. Konten di dalam iframe tidak dapat mengakses DOM halaman induk tanpa izin khusus.
Penggunaan Dasar iframe
Atur atribut src ke URL yang akan disematkan: <iframe src="https://example.com" width="800" height="600">. iframe membuat konteks penjelajahan baru. Atribut judul wajib untuk aksesibilitas: title="Embedded map".
Atribut sandbox
sandbox menerapkan pembatasan pada konten iframe: skrip, formulir, jendela pop-up, dan pengaya dinonaktifkan secara bawaan. Tambahkan izin tertentu untuk memulihkan kemampuan yang diperlukan: sandbox="allow-scripts allow-same-origin".
Izin sandbox
allow-scripts: mengaktifkan JavaScript. allow-same-origin: memungkinkan iframe diperlakukan sebagai asal yang sama (diperlukan untuk mengakses localStorage). allow-forms: mengaktifkan pengiriman formulir. allow-popups: mengizinkan window.open(). Berikan hanya izin minimum yang diperlukan.
iframe Lintas Asal
iframe lintas asal tidak dapat mengakses DOM induk—parent.document memunculkan kesalahan keamanan. Komunikasi antara bingkai lintas asal menggunakan postMessage: iframe.contentWindow.postMessage(data, origin).
Komunikasi dengan postMessage
Kirim pesan dari induk ke iframe: iframe.contentWindow.postMessage({ type: "update", data: {} }, "https://embed.example.com"). Di dalam iframe, dengarkan pesan tersebut: window.addEventListener("message", handler). Selalu verifikasi event.origin sebelum memprosesnya.
Pemuatan Tertunda iframe
loading="lazy" pada iframe menunda pemuatan hingga iframe berada dekat area pandang—sehingga pemuatan awal halaman menjadi lebih ringan. Ini berguna untuk peta, sematan video, dan widget media sosial di bawah area yang langsung terlihat.
Performa iframe
Setiap iframe memuat dokumen HTML, CSS, JavaScript, dan aset terpisah—biaya sumber daya yang signifikan. Hindari iframe untuk konten yang dapat disematkan sebagai cuplikan. Terapkan pemuatan tertunda pada iframe yang berada di bawah area tampilan awal. Pertimbangkan pola fasad (tampilkan tempat penampung, lalu muat saat diklik).
Kontrol Pengguliran
Kontrol perilaku pengguliran iframe: scrolling="no" menonaktifkan bilah gulir (sudah tidak digunakan lagi; gunakan CSS overflow: hidden pada iframe). Pendekatan modern: tetapkan tinggi iframe agar sesuai dengan tinggi konten sehingga tidak memerlukan bilah gulir internal.
Atribut allow
Atribut allow memberikan fitur Kebijakan Izin kepada iframe: allow="camera; microphone; fullscreen". Ini memungkinkan iframe meminta akses kamera, akses mikrofon, dan API layar penuh meskipun asal induk tidak menggunakan fitur-fitur tersebut.
Menyematkan YouTube dan Google Maps
YouTube dan Google Maps menyediakan kode penyematan iframe. Kode tersebut menyertakan atribut allow untuk layar penuh dan putar otomatis. Selalu tambahkan title="Video title" untuk aksesibilitas pembaca layar. Atribut sandbox biasanya tidak ditambahkan ke kode penyematan pihak ketiga—periksa dokumentasinya untuk mendapatkan panduan keamanan.
Pemeriksaan Pengetahuan
Apa yang dilakukan atribut sandbox terhadap iframe secara bawaan jika tidak memiliki nilai?
Ringkasan
iframe menyematkan dokumen eksternal dalam konteks penjelajahan terisolasi. Atribut sandbox membatasi kemampuan iframe—berikan hanya izin minimum yang diperlukan. postMessage memungkinkan komunikasi lintas asal yang aman. Pemuatan tertunda menunda biaya sumber daya untuk iframe di bawah area tampilan awal. Atribut allow memberikan fitur Kebijakan Izin kepada penyematan pihak ketiga yang tepercaya.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Elemen iframe src dan sandbox” gratis?
Ya — teks lengkap “Elemen iframe src dan sandbox” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Elemen iframe src dan sandbox”?
Sematkan halaman pihak ketiga dan batasi kemampuannya. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Elemen iframe src dan sandbox” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Elemen iframe src dan sandbox
- Keamanan iframe Clickjacking dan X-Frame-Options
- Elemen embed dan object
- Pemuatan Malas iframe