iframe
Satır İçi Çerçeve
- Okunuşu
- ayfreym
Kısaca
iframe, başka bir web sayfasını mevcut sayfaya gömen ve sıkça videolar, haritalar, ödeme formları ve üçüncü taraf widget'lar için kullanılan HTML öğesidir.
iframe nedir?
Satır içi çerçeve (inline frame) anlamına gelen iframe, <iframe> etiketiyle oluşturulur ve sayfanızdaki bir dikdörtgenin içinde ayrı bir HTML belgesi gösterir. Gömülü sayfanın kendi DOM'u, stilleri ve betikleri vardır ve tamamen farklı bir web sitesine ait olabilen kendi URL'sinden yüklenir. Gömülü videolar, haritalar, sosyal medya gönderileri, reklamlar ve barındırılan ödeme ya da oturum açma formları genellikle iframe'dir.
src niteliği yüklenecek URL'yi belirler, title çerçeveyi ekran okuyucular için tanımlar, width ve height de boyutunu ayarlar. Tarayıcılar iki sayfayı aynı kaynak politikasıyla birbirinden ayrı tutar: iframe başka bir kaynaktan geliyorsa hiçbir sayfa diğerinin DOM'unu ya da cookie'lerini okuyamaz, yalnızca window.postMessage() ile mesaj alışverişi yapabilirler. sandbox niteliği gömülü sayfayı daha da kısıtlar; açıkça izin verilmedikçe betikleri, formları veya açılır pencereleri engeller. allow niteliği ise kamera ya da tam ekran modu gibi özelliklere erişimi denetler.
iframe, oturma odanızın duvarına monte edilmiş bir televizyon gibidir: odanızın parçasıdır ama üzerinde oynayan şey başka bir yerden gelir ve onu siz denetlemezsiniz. Bu yalıtım yararlıdır. Örneğin ödeme sağlayıcıları iframe kullanır; böylece kart bilgileri doğrudan onlara gider ve satıcının sayfasına hiç uğramaz, bu da satıcının güvenlik yükünü azaltır.
Başlıca risk ters yönde işler: clickjacking'de bir saldırgan sitenizi kendi iframe'inin içinde görünmez biçimde yükler ve kullanıcıları düğmelerinize tıklamaya kandırır. Siteler bunu, kimin kendilerini çerçeveleyebileceğini denetlemek için Content-Security-Policy: frame-ancestors başlığını ya da eski X-Frame-Options başlığını göndererek önler. iframe, bir widget'ı script etiketiyle gömmekten de farklıdır: bir betik sayfanızın içinde ona tam erişimle çalışır, iframe ise gömülü içeriği ayrı bir belgede tutar.
Önemli noktalar
- Bir
<iframe>, kendi DOM'u ve betikleri olan ayrı bir web sayfasını mevcut sayfanın içine gömer. - Aynı kaynak politikası, farklı kaynaklı iframe'leri yalıtır; bunlar üst sayfayla
postMessage()ile konuşur. sandboxveallownitelikleri gömülü bir sayfanın neler yapabileceğini sınırlar.- Siteler clickjacking'e karşı CSP
frame-ancestorsyönergesi veyaX-Frame-Optionsile korunur. - Erişilebilirlik için her iframe'e bir
titleverin ve ekran dışında başlayan iframe'leri lazy load edin.
Örnek
<!-- Embed a map from another site, with restrictions -->
<iframe
src="https://maps.example.com/embed?place=city-hall"
title="Map showing the location of City Hall"
width="600" height="400"
loading="lazy"
sandbox="allow-scripts allow-same-origin"
></iframe>
<script>
// Only trust messages that come from the embedded site
window.addEventListener("message", (event) => {
if (event.origin !== "https://maps.example.com") return;
console.log("Map says:", event.data);
});
</script>Sık sorulan sorular
Sitemin bir iframe içinde gösterilmesini nasıl engellerim?
Content-Security-Policy: frame-ancestors 'none' başlığını gönderin ya da yalnızca kendi sayfalarınıza izin vermek için 'self' kullanın. Eski X-Frame-Options: DENY başlığı eski tarayıcılarda aynı işi yapar.
JavaScript bir iframe'in içindeki içeriğe erişebilir mi?
Yalnızca iframe üst sayfayla aynı kaynaktaysa. Farklı kaynaklı iframe'lerde tarayıcı doğrudan erişimi engeller ve iki sayfa postMessage() ile iletişim kurmak zorundadır.
iframe'ler SEO için kötü müdür?
Arama motorları bir iframe'in içindeki içeriği dizine ekleyebilir ama bunu genellikle sayfanıza değil, gömülü URL'ye atfeder. İçeriğin sayfanızın parçası olarak sıralanmasını istiyorsanız ana içeriğinizi bir iframe'e koymayın.
İlgili sayfalar
- HTMLWeb Geliştirme, s. 19HTML, başlık, paragraf, bağlantı, görsel ve form gibi öğelerle web sayfalarının yapısını ve içeriğini tanımlayan işaretleme dilidir.
- Same-Origin PolicyGüvenlik, s. 32Same-origin policy, bir sitedeki betiklerin, o site açıkça izin vermedikçe başka bir sitedeki verileri okumasını engelleyen tarayıcı güvenlik kuralıdır.
- ClickjackingGüvenlik, s. 3Clickjacking, meşru bir siteyi kötü amaçlı bir sayfada görünmez bir çerçeveye gizleyerek kullanıcıları göremedikleri düğmelere tıklamaya kandıran saldırıdır.
- Content Security PolicyGüvenlik, s. 4Content Security Policy, tarayıcıya sayfanın hangi betik, stil ve kaynakları yükleyebileceğini bildirip enjekte edilen kodu engelleyen HTTP yanıt başlığıdır.
- Lazy LoadingWeb Geliştirme, s. 28Lazy loading, görsel, video, betik gibi kaynakların yüklenmesini gerçekten gerekene, genellikle görünür alana kaydırılana kadar erteleyen tekniktir.
- DOMWeb Geliştirme, s. 14DOM, tarayıcının bir web sayfasını temsil eden ve JavaScript'in okuyup değiştirerek kullanıcının gördüğünü güncelleyebildiği bellek içi nesne ağacıdır.
Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin