--- title: 'Gömülü İçerik' source: 'https://academia.sh/tr/kurslar/web-temelleri-ve-html/gomulu-icerik' course: "Web'in Temelleri ve HTML" language: tr updated: '2026-08-17T18:09:32+00:00' license: 'CC BY-SA 4.0' --- # Gömülü İçerik Başka bir belgenin çerçeveyle gömülmesi, gömülen belgenin yalıtımı, yetenek kısıtlama düzeneği ve gömmenin başarım ile erişilebilirlik sonuçları. Ses ve video belgenin kendi kaynaklarıydı. Bazı içerikler ise başka bir belgenin tamamıdır: bir harita, bir oynatıcı, başka bir siteden gelen bir bölüm. Bunları gömmek, belgenin içine ikinci bir belge yerleştirmek demektir. `iframe` ögesi bu işi yapar. Ögenin adı "satır içi çerçeve" anlamına gelir ve tam olarak budur: belgenin akışı içinde, kendi başına yüklenen ve kendi ağacı olan ayrı bir belge. ## Gömülen Belge Ayrı Bir Belgedir `iframe` içindeki belge, dış belgenin ağacının parçası değildir. Kendi kökü, kendi baş bölümü, kendi biçemleri ve kendi betikleri vardır. Dış belgenin biçem kuralları içeriye uygulanmaz; içerideki betik dış belgenin ağacına doğrudan erişemez. Bu ayrım bir kısıt değil, gömmenin tüm gerekçesidir. Denetlemediğiniz bir kaynaktan gelen içeriği belgenize doğrudan yerleştirmek, o içeriğin belgenizin tamamına erişmesi demektir. Çerçeve, aradaki sınırı kurar. Sınırın dayanağı **kaynak (origin)** kavramıdır: şema, konak ve bağlantı noktası üçlüsü. İki belge aynı kaynaktan geliyorsa birbirinin ağacına erişebilir; farklı kaynaklardan geliyorsa erişemez. İnternet Nasıl Çalışır kursundaki Tarayıcı Ne Yapar dersinde ayrılan adres bölümleri burada bir güvenlik sınırına dönüşür. ## Yalıtım Özniteliği Farklı kaynak ayrımı temel bir sınır çizer ama yeterli değildir: gömülen belge yine de betik çalıştırabilir, form gönderebilir, yeni pencere açabilir, üst belgeyi başka bir adrese götürebilir. `sandbox` özniteliği bu yetenekleri kapatır. Özniteliğin çalışma biçimi terstir: yazıldığı anda **hiçbir yetenek verilmez**; geri istenen yetenekler tek tek sayılır. ```js // gomulu.mjs — sandbox ozniteliginin yetenek modeli const YETENEKLER = [ ["allow-scripts", "betik çalıştırma"], ["allow-forms", "form gönderme"], ["allow-popups", "yeni pencere açma"], ["allow-same-origin", "kendi kaynağıyla aynı sayılma"], ["allow-top-navigation", "üst belgeyi başka adrese götürme"], ["allow-modals", "kip pencere açma"], ]; function cozumle(oznitelikDegeri) { if (oznitelikDegeri === null) return new Set(YETENEKLER.map(([ad]) => ad)); // sandbox yok return new Set(oznitelikDegeri.split(/\s+/).filter(Boolean)); } const durumlar = [ ["sandbox ozniteligi yok", null], ["sandbox (bos)", ""], ["sandbox=allow-scripts", "allow-scripts"], ["sandbox=allow-scripts allow-forms", "allow-scripts allow-forms"], ]; for (const [ad, deger] of durumlar) { const acik = cozumle(deger); console.log("[" + ad + "]"); for (const [anahtar, aciklama] of YETENEKLER) { console.log(" " + (acik.has(anahtar) ? "acik" : "kapali").padEnd(6) + " " + aciklama); } } console.log("--- tehlikeli birlesim ---"); const ikisi = cozumle("allow-scripts allow-same-origin"); console.log( "allow-scripts + allow-same-origin:", ikisi.has("allow-scripts") && ikisi.has("allow-same-origin") ? "cerceve kendi sandbox ozniteligini kaldirabilir" : "yalitim korunur", ); ``` ``` [sandbox ozniteligi yok] acik betik çalıştırma acik form gönderme acik yeni pencere açma acik kendi kaynağıyla aynı sayılma acik üst belgeyi başka adrese götürme acik kip pencere açma [sandbox (bos)] kapali betik çalıştırma kapali form gönderme kapali yeni pencere açma kapali kendi kaynağıyla aynı sayılma kapali üst belgeyi başka adrese götürme kapali kip pencere açma [sandbox=allow-scripts] acik betik çalıştırma kapali form gönderme kapali yeni pencere açma kapali kendi kaynağıyla aynı sayılma kapali üst belgeyi başka adrese götürme kapali kip pencere açma [sandbox=allow-scripts allow-forms] acik betik çalıştırma acik form gönderme kapali yeni pencere açma kapali kendi kaynağıyla aynı sayılma kapali üst belgeyi başka adrese götürme kapali kip pencere açma --- tehlikeli birlesim --- allow-scripts + allow-same-origin: cerceve kendi sandbox ozniteligini kaldirabilir ``` İlk iki durum arasındaki fark, özniteliğin yazılıp yazılmamasının bütün farkı yarattığını gösterir. Boş `sandbox`, gömülen belgeyi ayrı bir kaynağa da yerleştirir: kendi sunucusuyla aynı kaynaktan sayılmadığı için depolanmış verilere ve çerezlere erişemez. Son satır, birlikte yazılmaması gereken iki değeri bildirir. `allow-same-origin` gömülen belgeyi kendi kaynağıyla aynı sayar; `allow-scripts` betik çalıştırmasına izin verir. İkisi birlikteyken ve gömülen belge sizinle aynı kaynaktaysa, çerçeve içindeki betik dış belgedeki `sandbox` özniteliğini kaldırıp çerçeveyi yeniden yükleyebilir — yalıtım kendi kendini iptal eder. ## Yetenek İzinleri `sandbox` belgenin **davranışını** kısıtlar; `allow` özniteliği ise aygıt ve platform yeteneklerine erişimi düzenler: kamera, mikrofon, konum, tam ekran. ```html ``` Varsayılan, çoğu yetenek için erişimin kapalı olmasıdır; `allow` bildirimi bunu açar ve `'none'` değeri açıkça kapatır. Bu iki öznitelik birbirinin yerine geçmez ve birlikte kullanılır. `referrerpolicy` özniteliği, gömülen kaynağa yapılan istekte hangi belgeden gelindiği bilgisinin ne kadarının gönderileceğini bildirir. `no-referrer` değeri hiç göndermez; gömülen üçüncü taraf, kullanıcının hangi sayfada olduğunu öğrenemez. ## Ad ve Yükleme `title` özniteliği çerçeveye bir erişilebilir ad verir. Yazılmadığında ekran okuyucu çerçeveyi adsız bir bölge olarak duyurur ve kullanıcı içine girmeden ne olduğunu bilemez. Bu öznitelik gömülü içerikte isteğe bağlı değildir. `loading="lazy"` çerçevenin görüntü alanına yaklaşana kadar yüklenmemesini bildirir. Gömülen belge kendi alt kaynaklarını da istediği için maliyeti tek bir görselden çok daha yüksektir; sayfanın altında duran bir harita ya da oynatıcı için bu bildirim, açılış maliyetini belirgin biçimde düşürür. `width` ve `height` öznitelikleri burada da yer ayırma işini görür; boyut bildirimi olmayan bir çerçeve, yüklendiğinde altındaki içeriği kaydırır. ## Gömülmeye Karşı Korunmak Gömme iki yönlüdür: kendi belgenizi gömebildiğiniz gibi, başkaları da onu kendi belgelerine gömebilir. Bu, kullanıcının hangi siteyle etkileştiğini yanıltmak için kullanılabilir — görünen belge sizinki, üzerine yerleştirilen saydam katman başkasınındır ve kullanıcının tıkladığı yer ile bastığını sandığı düğme ayrışır. Korunma, belgede değil sunucu yanıtında bildirilir. `Content-Security-Policy` başlığındaki `frame-ancestors` yönergesi, belgenin hangi kaynaklarca gömülebileceğini sayar. ``` Content-Security-Policy: frame-ancestors 'self' ``` Bu bildirim belgenin yalnızca kendi kaynağındaki sayfalarca gömülmesine izin verir; `'none'` değeri hiçbir gömmeye izin vermez. Meta Etiketleri dersinde belirtildiği gibi aynı bildirim `http-equiv` ile de yazılabilir, ancak bu yönerge için geçerli değildir: gömme kararı belge ayrıştırılmadan önce verilir, dolayısıyla bildirim de yanıt başlığında bulunmalıdır. Oturum verisi taşıyan ya da işlem başlatan her belgede bu başlık yazılır. Yazılmadığında belgenin gömülmesi serbesttir ve bu, belgenin denetimi dışındaki bir sayfanın onu kullanıcının önüne istediği bağlamda koymasına izin verir. ## Gömmenin Bedeli Gömülen her belge bağımsız bir yükleme zinciri başlatır: kendi ad çözümlemesi, kendi bağlantısı, kendi alt kaynakları. Kaynak Yükleme Sırası dersinde sayılan adımların tümü yeniden yürütülür ve bu adımlar dış belgenin kaynaklarıyla aynı bant genişliğini paylaşır. Bir işlevin gömme olmadan gerçekleştirilebildiği durumlarda gömmemek yeğlenir. Bir konumun gösterilmesi için etkileşimli bir harita gerekmiyorsa, bir görsel ve koordinat metni aynı bilgiyi çok daha ucuza verir. İstasyon belgesinde de tercih bu yöndedir: konum bir şekille anlatılmış, harita gömülmemiştir. ## Özet - `iframe` içindeki belge ayrı bir belgedir; kendi ağacı, biçemleri ve betikleri vardır ve farklı kaynaktan geliyorsa dış belgeye erişemez. - `sandbox` yazıldığı anda tüm yetenekleri kapatır; istenen yetenekler tek tek geri verilir. - `allow-scripts` ile `allow-same-origin` birlikte ve aynı kaynakta yazıldığında yalıtım çerçevenin kendisi tarafından kaldırılabilir. - `sandbox` davranışı, `allow` aygıt ve platform yeteneklerini düzenler; ikisi birbirinin yerine geçmez. - `title` gömülü içerikte zorunludur; `loading="lazy"` ve boyut bildirimi, gömmenin açılış maliyetini ve içerik kaymasını sınırlar. ## Sonraki Adım Bu konu belgeye anlam kazandıran ögeleri tamamladı. Geriye, hiçbir tanımlı anlamı olmayan ama belgeye veri iliştirmeye yarayan bir düzenek kalıyor: her ögeye takılabilen, ad çakışması üretmeyen ve betiklerce okunabilen öznitelikler. Sonraki ders bu düzeneği ve öznitelik adının program tarafındaki karşılığına nasıl çevrildiğini ele alır.