Elemen iframe src dan sandbox

sandbox mengenakan sekatan pada kandungan iframe: skrip, borang, tetingkap timbul dan pemalam dilumpuhkan secara lalai. Tambahkan kebenaran khusus untuk memulihkan keupayaan tertentu: sandbox="allow-scripts allow-same-origin".

allow-scripts: membolehkan JavaScript. allow-same-origin: membolehkan iframe dianggap berasal daripada asal yang sama (diperlukan untuk mengakses localStorage). allow-forms: membolehkan penghantaran borang. allow-popups: membolehkan window.open(). Berikan hanya kebenaran minimum yang diperlukan.

iframe merentas asal tidak boleh mengakses DOM induk — parent.document menghasilkan ralat keselamatan. Komunikasi antara bingkai merentas asal menggunakan postMessage: iframe.contentWindow.postMessage(data, origin).

Hantar mesej daripada induk kepada iframe: iframe.contentWindow.postMessage({ type: "update", data: {} }, "https://embed.example.com"). Dalam iframe, dengarkan mesej tersebut: window.addEventListener("message", handler). Sentiasa sahkan event.origin sebelum memprosesnya.

loading="lazy" pada iframe menangguhkan pemuatan sehingga iframe hampir dengan ruang pandang — sekali gus mengurangkan pemuatan awal halaman. Ini berguna untuk peta, benaman video dan widget media sosial di bahagian bawah halaman yang tidak kelihatan dengan serta-merta.

Setiap iframe memuatkan dokumen HTML, CSS, JavaScript dan aset yang berasingan — kos sumber yang ketara. Elakkan iframe untuk kandungan yang boleh dibenamkan sebagai coretan. Muatkan iframe secara malas jika berada di luar paparan awal. Pertimbangkan corak fasad (tunjukkan ruang letak, muatkan apabila diklik).

Kawal tingkah laku penatalan iframe: scrolling="no" melumpuhkan bar tatal (tidak digunakan lagi; gunakan CSS overflow: hidden pada iframe). Pendekatan moden: tetapkan ketinggian iframe supaya sepadan dengan ketinggian kandungan, lalu menghapuskan keperluan untuk bar tatal dalaman.

Atribut allow memberikan ciri Dasar Kebenaran kepada iframe: allow="camera; microphone; fullscreen". Ini membolehkan iframe meminta akses kamera, akses mikrofon dan API skrin penuh walaupun asal induk tidak menggunakan ciri ini.

YouTube dan Google Maps menyediakan kod benaman iframe. Kod ini menyertakan atribut allow untuk skrin penuh dan autoplay. Sentiasa tambahkan title="Video title" untuk kebolehcapaian pembaca skrin. Atribut sandbox biasanya tidak ditambahkan pada kod benaman pihak ketiga — semak dokumentasi mereka untuk panduan keselamatan.

iframe membenamkan dokumen luaran dalam konteks penyemakan imbas yang terpencil. Atribut sandbox mengehadkan keupayaan iframe — berikan hanya kebenaran minimum yang diperlukan. postMessage membolehkan komunikasi silang asal yang selamat. Pemuatan malas menangguhkan kos sumber bagi iframe di luar paparan awal. Atribut allow memberikan ciri Dasar Kebenaran kepada benaman pihak ketiga yang dipercayai.