iFrames uzun süredir HTML standardın bir parçasıdır. Ancak HTML 4.0'da Frames etiketleri Frameset-HTML varyantına taşınmıştır. HTML5'te Frames artık dikkate alınmazken, gömülü Frames (iFrames) hala kullanılmaktadır.
iFrames ile farklı web siteleri entegre edilebilir. Tarayıcı mevcut web sitesi içinde başka bir HTML dosyası daha işler. iFrame penceresinin içeriği bireysel olarak biçimlendirilebilir.
iFrames hakkında konuşulduğunda, bu HTML teknolojisinin güvenliği ayrıca ele alınmalıdır. Burada bir sorun, iFrames aracılığıyla web sitelerine gizlice sokulabilen zararlı kodlardır. Bu şüphesiz büyük bir sorundur.
Ancak HTML5'te bu sorunları atlatmak için uygun güvenlik mekanizmaları bulunmaktadır. Daha fazlası bu kılavuzun devamında anlatılacaktır. Ancak iFrames kullanmadan önce, bu potansiyel bir tehlike olabilir çünkü henüz tüm tarayıcılar tarafından desteklenmeyen yeni güvenlik öznitelikleridir.
HTML5'te iFrames artık sabit bir standarttır ve ekstra özniteliği vardır. Aşağıdaki örnek, iFrames'in nasıl tanımlanabileceğini göstermektedir.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
Tarayıcıda sonuç şu şekilde görünecektir:
iframe elemanına src özniteliği atanır. Bu src, gösterilecek sayfanın değerini içerir. Bu yerel bir dosya olabileceği gibi - gösterilen örnekte olduğu gibi - harici bir kaynağı çağırma da mümkündür.width ve height öznitelikleriyle iFrame'in genişliği ve yüksekliği belirlenir. Eklenti içeriği belirtilen iFrame boyutundan büyükse, kaydırma çubukları görüntülenir.
Açılış ve kapanış <iframe> etiketleri arasında herhangi içerikler tanımlanabilir. Bunlar, yalnızca iframe etiketini tanımayan tarayıcılarda görüntülenir.
HTML5'te iFrames ile ilgili olarak Sandbox davranışıyla ilgili bazı yeni öznitelikler tanıtılmıştır.
Tarayıcılarda, Same Origin Policy, bir gömülü web sayfasının gösterimi sırasında manipüle edilemeyeceğini sağlar. Bu güvenlik işlevi oldukça mantıklıdır. Bununla birlikte her zaman ideal değildir. Bu nedenle HTML5'te, gömülü bir sayfada harici bir sayfadan gelen içeriğe hangi izinlerin verileceğini belirten bir sandbox özniteliği tanıtılmıştır.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
sandbox özniteliği ile donatılan iFrames, gömülü web sayfasının DOM'una erişemez. Ayrıca betik çalıştıramaz ve çerez kaydedemezler. Bu kısıtlamalar, çeşitli Sandbox değerleri ile kaldırılabilir.sandbox özniteliğine farklı değerler atanabilir. allow-forms ile gömülü web sayfası, kullanıcıdan bilgi alabilir. Kullanıcılar bunu yaparken, formun şu anki sayfadan gelmediğini bilmemektedirler.
Öte yandan, allow-some-origin belirtildiğinde, gömülü web sayfası, aynı ana sunucudan gelmiş gibi işlenir. Bu değerle, Same Origin Policy kaldırılır.allow-top-navigation değeri, gömülü içeriğin en üst gezinti bağlamının içeriğini değiştirmesine izin verir.
Son olarak, allow-script'i var. Böylece, gömülü web sayfasında, gömülü sayfayı manipüle edebilecek JavaScript bulunabilir.
Aşağıdaki örnek, bir sandbox komutunun nasıl görünebileceğini göstermektedir:
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
Aynı şekilde birden fazla değeri de atayabilirsiniz. Bu değerler boşluklarla ayrılır. İşte bir örnek daha:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
iFrames genellikle harici içerikleri gömme amacıyla oluşturulmuştur. Bunun alternatifi olarak bunları dahil edebilirsiniz.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
Bu öznitelik oldukça önemlidir. Dahil edilen belgedeki bağlantı hedefleri - tanımlandığı yerin tarayıcı penceresinde - gösterilir (normal bir eklemeye nazaran, belirtilmediğinde, bağlantı hedefleri iFrame penceresinde gösterilir).seamless şu anda yalnızca Google Canary, yani bu tarayıcının geliştirici sürümü tarafından desteklenmektedir.
Diğer etki, Stil sayfalarını içerir. Çünkü dahil edilen dosyanın stil sayfaları dahil edilen belge için de geçerlidir (normal eklemelerde stil sayfaları etkili değildir).
Bir diğer öznitelik de eklenmiştir. srcdoc ile dahil edilecek içeriği doğrudan tanımlayabilirsiniz. Buna bir örnek için aşağıdaki örneğe bakınız:
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
seamless="seamless" srcdoc="
<script>
top.location.href=" http://www.psd-tutorials.de/"
</script>">
</iframe>Bu durumda, genellikle ekleyeceğiniz dosyanın belirtildiği src özniteliği eksiktir.
Özniteliği srcdoc ile belirtilen içerik, yabancı bir sunucudan geldiği gibi işlenir. Bu nedenle Tam Köken Politikası'nın tam kapsamına tabidir. Bu davranış özellikle komut tanımlarıyla ilgiliyken ilginçtir. İçinde herhangi bir HTML ve JavaScript kodu izinlidir. Bununla birlikte, çift tırnak ve ve işareti adlandırılmış karakterler " ve & ile tanımlanmalıdır.
Burada ayrıca bir sayfa doğrudan tanımlayarak istediğiniz içeriği de yayınlayabilirsiniz.
<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>
Bu tam bir HTML dosyası olmasına gerek yok. Aşağıdaki gibi bir şey de mümkündür:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
Tarayıcıda görünen şu şekildedir:
Bu tamamen normal HTML sözdizimidir, komut dosyaları olmadan vs.
Şimdiye kadar görsel tasarım için kullanılan öznitelikler hakkında bazı ipuçları: scrolling, marginwidth ve marginheight gibi şeyler artık HTLM5'te izin verilmiyor. Bu öznitelikler CSS ile değiştirilmelidir.
