iFrames telah menjadi bagian dari standar HTML untuk waktu yang lama. Namun, dalam HTML 4.0, mereka dimasukkan ke dalam varian HTML Frameset bersama dengan Frames yang kini dianggap usang. Frames tidak lagi dipertimbangkan dalam HTML5, namun iFrames yang tertanam tetap diabaikan.
Anda dapat menyematkan situs web lain melalui iFrames. Jadi, browser akan merender sebuah file HTML tambahan di dalam situs web saat ini. Isi jendela iFrame tersebut dapat diformat secara individual.
Ketika kita membicarakan iFrames, tentu saja keamanan teknologi HTML ini juga harus diperhatikan. Salah satu masalahnya adalah kode berbahaya yang dapat disisipkan ke dalam situs web melalui iFrame tanpa terdeteksi. Tentu saja, ini menjadi masalah besar.
Namun, dalam HTML5 sekarang terdapat mekanisme keamanan yang sesuai untuk mengatasi masalah ini. Lebih lanjut akan dijelaskan dalam tutorial ini. Meskipun begitu, sebelum menggunakan iFrames, perlu diingat bahwa ini sebenarnya bisa menjadi sebuah bahaya, terutama karena atribut keamanan baru ini masih belum didukung oleh semua browser.
Di dalam HTML5, iFrames menjadi bagian dari standar tetap dengan beberapa atribut tambahan di sini. Contoh berikut menunjukkan cara mendefinisikan iFrames.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
Hasilnya akan terlihat seperti ini di browser:
Element iframe diberikan atribut src. Nilai dari src adalah halaman yang akan ditampilkan. Ini bisa berupa file lokal, atau seperti dalam contoh yang ditunjukkan, mengakses sumber eksternal.
Lebar dan tinggi iFrame ditentukan melalui atribut width dan height. Jika konten yang disematkan lebih besar dari ukuran iFrame yang dinyatakan, scrollbars akan ditampilkan.
Berbagai konten dapat ditentukan di antara tag <iframe>. Namun, konten tersebut hanya akan terlihat di browser yang tidak mengenali element iframe.
Dalam HTML5, atribut baru diperkenalkan terkait iFrames, yang lebih berkaitan dengan perilaku Sandbox.
Di dalam browser, Same Origin Policy memastikan bahwa halaman yang disematkan tidak dapat dimanipulasi selama ditampilkan. Fungsi keamanan ini sebagian besar berguna. Namun, dalam HTML5, atribut sandbox diperkenalkan agar browser dapat secara eksplisit menentukan izin dari konten yang disematkan dari halaman eksternal melalui iFrame.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
iFrames yang dilengkapi dengan atribut sandbox tidak memiliki akses ke DOM dari halaman web yang disematkan. Selain itu, mereka tidak diizinkan untuk menjalankan skrip atau menyimpan cookies. Pembatasan ini bisa dilepaskan dengan berbagai nilai Sandbox yang berbeda.
Berbagai nilai dapat diberikan kepada atribut sandbox. Dengan allow-forms, halaman web yang disematkan dapat mengumpulkan informasi pengguna melalui formulir. Pengguna tidak akan menyadari bahwa formulir tersebut berasal dari halaman yang berbeda.
Jika kita menggunakan allow-same-origin, halaman web yang disematkan akan diperlakukan seperti berasal dari host yang sama. Nilai ini mengabaikan Same Origin Policy.
Nilai allow-top-navigation memungkinkan konten yang disematkan untuk mengubah konten dari konteks penjelajahan atas.
Dan ada juga allow-script. Ini memungkinkan halaman web yang disematkan untuk mengandung JavaScript yang dapat memanipulasi halaman yang menyematkannya.
Berikut contoh penggunaan sandbox yang sesuai:
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
Tentu saja, Anda juga dapat memberikan beberapa nilai sekaligus. Nilai-nilai ini harus dipisahkan oleh spasi. Berikut contoh penggunaannya:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
iFrames biasanya digunakan untuk menyematkan konten eksternal. Namun, alternatifnya adalah dengan cara mengikutsertakan.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
Atribut ini memiliki efek yang cukup besar. Target referensi dalam dokumen yang diikutsertakan – jika tidak ada yang ditentukan sebaliknya – akan ditampilkan dalam jendela browser di mana elemen iframe didefinisikan. (Pada penyisipan biasa, target referensi – jika tidak ada yang ditentukan lain – akan ditampilkan dalam jendela iFrame).seamless saat ini hanya didukung oleh Google Canary, yaitu versi pengembang dari browser tersebut.
Efek lainnya berhubungan dengan Stylesheets. Stylesheet dari dokumen yang mengikutsertakan berlaku juga untuk dokumen yang diikutsertakan. (Pada penyisipan biasa, pengaturan stylesheet tidak akan berlaku).
Atribut baru lainnya adalah srcdoc. Dengan ini, konten yang akan diikutsertakan dapat ditentukan langsung. Berikut adalah contoh penggunaannya:
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
seamless="seamless" srcdoc="
<script>
top.location.href=" http://www.psd-tutorials.de/"
</script>">
</iframe>Dalam kasus ini, atribut src tidak ada, yang biasanya digunakan untuk menunjukkan file yang akan disisipkan.
Konten yang ditentukan melalui srcdoc diperlakukan seolah-olah berasal dari server asing. Sehingga, konten ini sepenuhnya tunduk pada Kebijakan Asal yang Sama. Perilaku ini menarik terutama dalam konteks definisi skrip. Di dalamnya diizinkan kode HTML dan JavaScript apa pun. Namun, tanda kutip dan simbol & harus dijelaskan dengan karakter yang disebutkan " atau &.
Anda juga bisa langsung mendefinisikan sebuah halaman di sini dan menampilkan konten yang diinginkan.
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc=" <!DOCTYPE html> <html> <head> <title>PSD-Tutorials.de</title> </head> <body> <p>…</p> </body> </html>"> </iframe>
Tidak harus berupa file HTML lengkap. Anda juga bisa melakukan sesuatu seperti ini:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
Tampilan di browser akan terlihat seperti ini:
Ini adalah sintaks HTML yang normal, tanpa skrip, dan sebagainya.
Beberapa catatan tentang atribut-atribut yang biasanya digunakan untuk desain visual: hal-hal seperti scrolling, marginwidth dan marginheight tidak diizinkan lagi dalam HTML5. Atribut-atribut ini digantikan oleh CSS.
