Atribut Konten, Keamanan, dan Desain untuk IFRAME

click fraud protection

Itu iframe elemen menyematkan halaman web lain langsung ke halaman saat ini. HTML5 memperkenalkan tiga atribut baru ke elemen ini untuk membantu mengatasi masalah keamanan dan kegunaan dari HTML4 iframe penerapan.

Atribut 'kotak pasir'

Itu bak pasir atribut dari iframe elemen adalah fitur keamanan yang berguna untuk iframe. Ketika Anda menempatkannya di iframe elemen, agen pengguna melarang fitur yang mungkin menimbulkan risiko keamanan ke situs dan penggunanya.

Sebagai contoh:

menginstruksikan browser untuk melarang semua fitur yang mungkin berisiko keamanan — jadi tidak ada plugin, formulir, skrip, tautan keluar, kue, penyimpanan lokal, dan akses halaman situs yang sama.

Kemudian, dengan menggunakan bak pasir nilai kata kunci, aktifkan kembali beberapa fitur. Kata kunci ini adalah:

  • izinkan-formulir: Izinkan pengiriman formulir.
  • izinkan-sama-asal: Izinkan skrip mengakses konten seperti cookie dari domain Asal yang sama.
  • izinkan-skrip: Izinkan skrip untuk berjalan di IFRAME ini.
  • izinkan-navigasi atas: Izinkan tautan dan skrip iframe ke target "_top"
instagram viewer

Jangan atur keduanya izinkan-skrip dan izinkan-sama-asal kata kunci bersama pada hal yang sama iframe. Jika Anda melakukannya, halaman yang disematkan kemudian dapat menghapus bak pasir atribut, meniadakan manfaat keamanannya.

Atribut 'srcdoc'

Itu srcdoc atribut memberi desainer web lebih banyak kontrol atas iframe serta keamanan lebih. Alih-alih menautkan ke halaman web di tempat yang berbeda URL, perancang web menempatkan HTML yang akan ditampilkan dalam bentuk iframe di dalam srcdoc atribut.

Dengan menempatkan HTML yang dibuat oleh sumber yang tidak tepercaya, seperti formulir, ke dalam iframe Anda dapat mengkotak pasir konten yang tidak tepercaya dan tetap menampilkannya di halaman. Komentar blog adalah contohnya. Sebagian besar blog hanya menawarkan sejumlah tag HTML yang dapat digunakan komentator dalam komentar mereka. Tetapi dengan menempatkan komentar itu di kotak pasir iframe menggunakan srcdoc atribut, komentar bisa lebih kuat sambil tetap melindungi situs secara keseluruhan.

Keamanan dan Iframe

Dua atribut di atas memberikan keamanan untuk Anda iframe elemen, tetapi mereka bukan pertahanan terhadap semua situs berbahaya. Jika situs jahat dapat meyakinkan pengunjung situs Anda untuk mengakses konten bermusuhan secara langsung (seperti dengan mengetikkan URL ke browser mereka), mereka masih dapat diserang.

Jika bisa, atur konten yang ada di kotak pasir sand iframe sebagai teks/html-kotak pasir jenis MIME.

Atribut 'mulus'

Itu mulus atribut adalah atribut boolean yang memberitahu browser untuk menampilkan display iframe seolah-olah itu adalah bagian dari dokumen induk. Jika Anda ingin Anda iframe untuk ditampilkan dengan mulus, cukup sertakan atribut ini di elemen:

Tapi membuat iframe mulus lebih dari sekedar tampilan, itu juga bagaimana halaman berinteraksi dengan bingkai. Beberapa kiat:

  • Tautan di iframe akan terbuka di jendela induk kecuali jika iframe halaman memiliki target "_SELF" yang ditetapkan.
  • CSS di iframe akan ditambahkan ke kaskade seluruh dokumen.
  • Elemen akar dari iframe halaman dianggap sebagai anak dari iframe.
  • Lebar dan tinggi iframe diatur dengan cara yang mirip dengan bagaimana elemen level blok lainnya akan ditetapkan.
  • Saat dokumen induk dilihat oleh alat perenderan ucapan seperti pembaca layar, iframe akan dibaca tanpa mengumumkannya sebagai dokumen terpisah.

Skrip apa pun pada dokumen induk akan memengaruhi iframe dokumen dengan cara yang sama. Misalnya, jika skrip mencantumkan semua bingkai di halaman, tautan di in iframe akan terdaftar juga.

Dengan kata lain, mulus atribut melakukan lebih dari sekadar menghapus batas dari iframe. Jika Anda akan mengatur iframe agar mulus, Anda harus sangat yakin dengan isinya sehingga Anda tidak menambahkan risiko keamanan apa pun ke situs web Anda dengan menyematkan situs jahat.

instagram story viewer