<iframe> Etiketi Temel Özellikler
- Etiket Yazımı ve Etiket Kullanımı :
<iframe></iframe> <!-- Etiket hem açılıp hem de kapanmak zorunda. -->- Örnek :
- DOM Arayüzü :
HTMLIFrameElement- Durum :
- Yaşayan Ölçün
- Öznitelikler :
- Tüm Evrensel Öznitelikler
- Açıklama :
<iframe> Etiketi Kullanımı
Markanız için 300X300 alan.
<iframe> etiketi iç içe geçmiş tarama içeriğini ifade eder.
HTML Nedir ? sayfasında gördüğünüz üzere belgeler bir ya da daha fazla dosyanın birleşiminden oluşabilir. Belgeler "Kesinlikle tek bir dosya olmak zorunda"
gibi bir kural yok. Peki bu nasıl oluyor? Doğru bildiniz. <iframe> etiketi ile !
Eğer src özniteliği kullanılırsa, src değeri geçerli bir URL olmak zorunda.
itemprop özniteliği kullanılırsa, src özniteliği de kullanılmak zorunda.
src özniteliği kullanılan durumlarda URL, diğer belgenin adresidir. Böylece <iframe> etiketinin kullanıldığı belgeye bir başka belge eklenmiş olur.
Belgelere bir başka belge eklemenin bir diğer yöntemi ise <iframe> etiketiyle srcdoc özniteliğinin kullanımıdır. srcdoc eklenmek istenen içeriği (köprü metini) tutar.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>SonDevrim HTML Dersleri, İpuçları ve Örnekleri</title>
</head>
<body>
<p>İçerik buraya geliyor...</p>
<iframe src="https://SonDevrim.com/HTML/etiketler/html_Etiketi"></iframe>
<iframe srcdoc="<p>Ben bu belgeye <strong>iframe etiketi</strong>yle eklendim</p>"></iframe>
</body>
</html><iframe> Etiketi srcdoc Kullanımı
srcdoc özniteliğini kullanırken çift tırnak (") imini " ile kaçmalısınız. href="https://SonDevrim.com" gibi.
"Ve" işareti (&) kullanımında "ve" işareti iki kez kaçılmalıdır.
Dikkat edin: "ve" işareti kaçılırken birinci kaçışta "ve" işaretinin kendisi kullanılır ancak ikinci kaçışta kullanılmaz:
Yanlıştır : &&
Doğrudur : &amp;
<iframe> Etiketi Güvenlik Uyarıları
<iframe> etiketi sandbox (karantina) özniteliğinde kullanılan değerler <iframe> etiketinin tarama içeriği yüklenirken geçerlidir. Sayfa yüklendikten sonra bu değerlerin ya da sandbox özniteliğinin bütünüyle uzaklaştırılması hiç bir şey ifade etmez.
Eğer eklenen sayfa ile <iframe> etiketini içeren sayfa aynı kökenden ise sandbox özniteliğinde allow-scripts ve allow-same-origin anahtar sözcüklerinin aynı anda kullanımı, eklenen sayfaya sandbox özniteliğini kaldırarak kendisini yeniden yükleyebilme olanağı tanır.
Bu durum sandbox kullanmamak ile aynı anlama gelir !
Saldırgan olma olasılığı olan içerik, <iframe> etiketini içeren belge ile aynı sunucu altında yayınlanmamalı. Saldırgan içeriği sandbox koşullarına maruz bırakmak, kullanıcıyı <iframe> etiketi yerine kendisini doğrudan ziyaret etmeye ikna edebilen saldırgana az da olsa yardım etmek demektir. Saldırgan olan HTML içeriğin zararını en aza indirmek için saldırgan HTML ayrı bir dedicated domain altında yayınlanmalıdır.
Ayrı bir dedicated domain kullanmak; saldırgan içerikteki betik (script) dosyalarının,
kullanıcının kandırılarak saldırgan içeriğe sandbox uygulanmayan doğrudan ziyaretlere ikna edildiği durumlarda, saldırgan içeriğin siteye değil dedicated domaine saldırdığı böylece sitenin kesin olarak korunduğu anlamına gelir.
<iframe> Etiketi Tarayıcı Desteği
| Tarayıcı →Öznitelik ↓ | |||||
|---|---|---|---|---|---|
| Temel Destek | Var | Var | Var | 1.0 | Var |
sandbox | 17.0 (17.0) | 15 | 5 | 4 | 10 |
seamless | Yok | Yok | Yok | Yok | Yok |
srcdoc | 25.0 (25.0) | 15 | 6 | 20 | Yok |
allowfullscreen | 9 (9) -moz- / - 18 (18) | Var | Var - 7 | 17 - Var | Yok |
sandbox="allow-popups" | 27.0 (27.0) | ? | ? | ? | ? |
sandbox="allow-popups-to-escape-sandbox" | ? | 32 | ? | 46.0 | ? |
referrerpolicy | 42.0 (42.0) [2] | ? | ? | 46.0 [1] | ? |
| Tarayıcı →Öznitelik ↓ | |||||
|---|---|---|---|---|---|
| Temel Destek | Var | Var | Var | Var | Var |
sandbox | 17.0 (17.0) | Yok | 4.2 | 2.2 | 10 |
seamless | Yok | ? | ? | ? | Yok |
srcdoc | 25.0 (25.0) | ? | ? | ? | Yok |
allowfullscreen | 9 (9) -moz - 18 (18) | Yok | Var webkit - 7 | ? | Yok |
sandbox="allow-popups" | 27.0 (27.0) | ? | ? | ? | ? |
sandbox="allow-popups-to-escape-sandbox" | ? | 32 | ? | Yok | ? |
referrerpolicy | ? | ? | ? | Yok | ? |
[1] : Bu öznitelik Firefox 42'den 44'e kadar referrer olarak adlandırıldı ve about:config adresindeki network.http.enablePerElementReferrer ayarına bağlıydı. Firefox 45 ile referrerpolicy olarak adlandırıldı.
[2] : Daha fazla ayrıntı için tıklayın !
Öznitelikler
src- Adresle (
URL) yapılan eklemelerde, eklenmek istenen içeriğin adresini tutar. srcdoc- Doğrudan yapılan eklemelerde, eklenmek istenen içeriği (köprü metini) tutar.
name- İç içe geçmiş tarama içeriğinin adı.
sandbox-
İç içe geçmiş tarama içeriğine karşı güvenlik kuralları.
Bu özniteliğinin kullanımı durumunda içerik başka bir kökenden geliyormuş gibi yorum yorumlanır; formlar, betikler ve kötüye kullanılabilecek çeşitliAPI'ler etkisizleştirilir, bağlantıların diğer iç içe geçmiş tarama içeriği bölümlerini hedeflemeleri (target) engellenir, yardımcı tarayıcı yazılımları (plugins) güvenlik çemberine alınır.
Değer olarak boş metin girilirse güvenlik bayraklarının (önlemlerinin) hepsi etkinleşir.
Aşağıdaki anahtar sözcüklerin (birden fazla kullanılmak istenmesi durumunda aralarında birer boşluk bırakılarak)sandboxözniteliğine değer olarak girilmesi durumunda o bayraklar (önlemler) kaldırılır. İzin verilen değerler:allow-forms- Form verisi iletimine izin verir.
allow-modals-
Aşağıdakilerin (ki bunlar pencere açıcılar ve genellikle pencere açmada kullanılan olaydır) kullanımına izin verir.
window.alert()window.confirm()window.print()window.prompt()window.showModalDialog()beforeunloadOlayı
allow-pointer-lock- İmleç kitlemesine (???) izin verir.
allow-popups- ( Örnek olarak
targetözeliği yardımıylawindow.open()yöntemi ya dawindow.showModalDialog()kullanılarak) Yeni bir tarama içeriği oluşturulmasına izin verir. allow-popups-to-escape-sandbox- Aynı karantina öznitelikleri açılan pencerede geçerli olacak biçimde, pencere açılmasına izin verir.
allow-same-origin-
Kullanılmasıyla, eklenen belge eklendiği belgeyle aynı kökendenmiş gibi yorumlanır. Bu eklenen belgeye, eklendiği belgenin kaynaklarına (çerezler ve vebdepo gibi) erişim izni verir.
İki koşul için düşünüldü:- Betiklerin çalışmasını engellemek ama karantinadaki içeriğin
DOM'una erişebilmek için (yoksa Aynı Köken İlkesi karantinadaki DOM'a erişimi engeller) - Bir yandan pop-up ve benzeri pencerelerin açılmasını engellerken diğer yandan eklenen belgenin eklendiği belgeye erişimi sağlayabilmek için (depoya veri kaydetmek ve benzeri amacıyla).
- Betiklerin çalışmasını engellemek ama karantinadaki içeriğin
allow-scripts- Eklenen belgenin betik (script) dosyalarının çalışmasına (yeni bir pencere açabilmesi dışında) izin verir.
allow-top-navigation- Kendisinde bir bağlantıya tıklandığında yüklenecek içeriğin eklendiği sayfada (
target) yüklenmesine izin verir.
seamless-
Boolean özniteliktir. Belgenin biçiminin iç içe geçmiş tarama içeriğine uygulanıp uygulanmayacağını belirler.
Birseam biçimsiz demektir. seamless biçimsizleşmemek yani biçimlenmişlik olarak çevirilebilir.
<iframe>etiketinin biçimli kabul edilebilmesi için aşağıdaki koşulların tamamının karşılanması gerekmektedir:<iframe>etiketindeseamlessözniteliğinin kullanılması<iframe>etiketinin eklendiği belgeninsandboxed seamless iframesbayrağının etkin olmaması (ki bu koşul bağlantılardatarget="_self"kullanılmadığı sürece kendiliğinden karşılanır)- ve de aşağıdakilerden herhangi biri:
- Tarama içeriğinin etkin belgesi
<iframe>etiketinin eklendiği belge ile aynı kökenden olmalı - Tarama içeriğinin etkin belgesinin adresi ile
<iframe>etiketinin eklendiği belge aynı kökenden olmalı - Tarama içeriğinin etkin belgesi
srcdocözniteliği kullanılmış olan<iframe>etiketi olmalı
- Tarama içeriğinin etkin belgesi
sandboxed seamless iframesbayrağıallow-same-originanahtar sözcüğü kullanılmış<iframe>etiketindeseamlessözniteliğinin etkinleştirilmesini engeller. Böylece eklenen belgeler CSS-seçici-tabanlı yöntemlerleDOM'a, diğer bir deyişle hassas içeriğe iye etiketlere erişemez.HTML Etiketleri Evrensel Özniteliklerinden olan
contentEditable,seamless<iframe>etiketi üzerinde etkisizdir. allowfullscreen- Boolean özniteliktir.
<iframe>etiketinin içeriğininrequestFullscreen()kullanıp kullanamayacağı. Örnek olarak<iframe>etiketi ile gelen içerikte video varsa kullanılabilir. width- Yatay boyut.
height- Dikey boyut.