Gömülü İçerik

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.

// 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.

<iframe src="https://harita.test/kuzey-yamac"
        title="İstasyonun harita üzerindeki konumu"
        width="640" height="480" loading="lazy"
        sandbox="allow-scripts"
        allow="fullscreen; geolocation 'none'"
        referrerpolicy="no-referrer"></iframe>

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.