Konten, keamanan, dan atribut desain untuk IFRAME
Elemen ini memungkinkan Anda untuk menyematkan halaman Web lain secara langsung ke halaman Web Anda. Tetapi ketika menggunakan iframe ada beberapa masalah keamanan dan desain yang tidak dibahas dalam HTML 4.01. HTML5 membawa tiga atribut baru ke elemen ini untuk membantu mengatasi masalah ini:
Atribut kotak pasir
Atribut kotak pasir elemen IFRAME adalah fitur keamanan yang sangat berguna dari iframes. Ketika Anda menempatkannya di elemen IFRAME, Anda menginstruksikan agen pengguna untuk melarang fitur yang mungkin menyebabkan risiko keamanan ke situs dan penggunanya.
Sebagai contoh:
Memberi tahu browser untuk melarang semua fitur yang mungkin merupakan risiko keamanan. Secara khusus, plugin tidak diizinkan. Formulir tidak dapat dikirim. Sskrip tidak akan berjalan dan tautan di luar IFRAME tidak diizinkan. Terakhir, akses ke cookie, penyimpanan lokal, dan halaman lain di domain yang sama (asal) tidak diizinkan.
Kemudian, dengan menggunakan nilai kata kunci kotak pasir, Anda dapat mengaktifkan kembali beberapa fitur. Kata kunci ini adalah:
- allow-forms —sebuah pengiriman formulir
- allow-same-origin —allow scripts untuk mengakses konten seperti cookie dari domain asal yang sama
- allow-scripts —sebuah skrip untuk dijalankan dalam IFRAME ini
- allow-top-navigation —allow tautan dan skrip IFRAME ke target _top
Bukan ide yang baik untuk menyetel skrip-ijin dan mengizinkan kata kunci yang sama-sama-sama pada IFRAME yang sama. Jika Anda melakukan ini, halaman yang disematkan dapat sepenuhnya menghapus atribut kotak pasir, meniadakan manfaat keamanan apa pun.
Atribut srcdoc
Atribut srcdoc adalah atribut yang memberikan perancang Web lebih banyak kontrol atas iframes serta keamanan yang lebih. Alih-alih menghubungkan ke halaman Web di URL yang berbeda, perancang Web menempatkan HTML yang ditampilkan dalam IFRAME di dalam atribut srcdoc.
Pada awalnya, Anda mungkin berpikir, "Bagaimana ini berbeda dari meletakkan HTML tepat di halaman?" Dan dalam beberapa hal, itu tidak terlalu berbeda.
Tetapi Anda harus mengingat salah satu fungsi elemen IFRAME, yaitu untuk menjaga agar data yang tidak tepercaya terpisah dari bagian lain situs.
Dengan menempatkan HTML yang dibuat oleh sumber yang tidak tepercaya, seperti formulir, ke IFRAME Anda dapat "meng-sandbox" konten yang tidak dipercaya dan tetap menampilkannya di halaman. Komentar blog adalah contoh. Sebagian besar blog hanya memiliki sejumlah tag HTML komentar yang dapat digunakan dalam komentar mereka. Namun dengan menempatkan komentar tersebut di IFRAME yang menggunakan kotak pasir menggunakan atribut srcdoc, komentar dapat menjadi lebih kuat saat masih melindungi situs secara keseluruhan.
Keamanan dan Iframes
Dua atribut di atas memberikan keamanan untuk elemen IFRAME Anda, tetapi tidak terbukti terhadap semua situs berbahaya. Jika situs jahat dapat meyakinkan pengguna untuk mengakses konten yang bermusuhan secara langsung (seperti dengan mengetikkan URL ke browser mereka) mereka masih dapat diserang.
Jika mungkin, yang terbaik adalah mengatur konten yang ada di IFRAME kotak pasir sebagai jenis teks / html-sandboxed MIME.
Atribut tanpa batas
Atribut seamless adalah atribut boolean yang memberitahu browser untuk menampilkan IFRAME seolah-olah itu adalah bagian dari dokumen induk. Jika Anda ingin IFRAME Anda ditampilkan dengan mulus, cukup sertakan atribut ini di elemen:
Tetapi membuat mulus IFRAME lebih dari sekadar tampilan, tetapi juga bagaimana halaman berinteraksi dengan bingkai. Sebagai contoh:
- Tautan di IFRAME akan terbuka di jendela induk , kecuali jika halaman IFRAME memiliki target set _SELF.
- CSS di IFRAME akan ditambahkan ke kaskade seluruh dokumen.
- Elemen root dari halaman IFRAME dianggap sebagai anak dari IFRAME.
- Lebar dan tinggi IFRAME diatur dengan cara yang sama dengan bagaimana elemen tingkat blok lainnya akan ditetapkan.
- Ketika dokumen induk dilihat oleh alat render pidato seperti pembaca layar, IFRAME akan dibaca tanpa mengumumkannya sebagai dokumen terpisah.
- Semua skrip pada dokumen induk akan mempengaruhi dokumen IFRAME dengan cara yang sama. Misalnya, jika skrip mencantumkan semua bingkai di halaman, tautan di IFRAME akan dicantumkan juga.
Dengan kata lain, atribut tanpa batas tidak lebih dari sekadar menghapus batas dari IFRAME. Jika Anda akan mengatur IFRAME menjadi mulus, Anda harus sangat yakin akan isinya sehingga Anda tidak menambahkan risiko keamanan apa pun ke situs web Anda dengan menyematkan situs berbahaya.