iFrame Nedir?

Her gün yüzbinlerce yeni web sitesi oluşturulan bu dönemde, internette oldukça çeşitli web server tipleri ve 1,7 milyar civarında web sitesi bulunur. Bu sebeple hazır web sitesi oluşturmak ve web sayfalarını efektif bir biçimde tasarlayabilmek, gün geçtikçe daha da önemli bir hale gelmiştir. Web sitelerini geliştirmek ve daha büyük bir okuyucu kitlesine ulaşmak için ise doğru kaynaklardan destek ve bilgi almak gerekir.

Web siteleri oluştururken HTML kodunda sıklıkla kullanılan <iframe> elementi, sitenizin dinamik ve ilgi çekici bir hale gelmesine büyük ölçüde katkı sağlar. Inline Frame’in kısaltması olan iFrame, bir web sayfasının içerisine başka bir sayfaların içeriklerini veya sayfanın tamamını yerleştirmenizi sağlar. HTML ile düzenlenmiş sitelerin içerisinde, seçtiğiniz doküman ve medya içeriklerini herhangi bir sekme açmaksızın çalıştırmanıza yardımcı olur. Web sitenizde dilediğiniz sayfalara YouTube ve Vimeo videolarını, Twitter akışınızı veya Google Maps kutucuklarını HTML iFrame elementini kullanarak kolayca yerleştirebilirsiniz.

iFrame Nasıl Kullanılır?

iFrame kullanımı oldukça kolaydır. Bunun için öncelikle bir iFrame kodu oluşturmanız gerekir. Sonrasında iFrame eklemek istediğiniz sayfanızın HTML dokümanına, oluşturmuş olduğunuz iFrame kodunu yazmanız yeterlidir. Böylece HTML kodunda kaynak olarak belirttiğiniz site her ne ise sizin sitenizde görünür hale gelecektir. Örneğin, bu kaynak içerik bir YouTube videosu ise ilgili video sizin internet siteniz üzerinden, ayrı bir sekme açılmaksızın izlenilebilir özellikte olacaktır.

iFrame Etiketleri Ne Anlama Gelir?

HTML iFrame kodu oluşturulurken birçok farklı etiketten yararlanılır. iFrame kodu oluşturmada sık kullanılan etiketler şu şekilde sıralanabilir:

  • src: Bu etiket iFrame’in en temel etiketidir. “Source”, yani “kaynak” kelimesinin kısaltmasıdır. src etiketi ile siteye eklenmek istenen kaynağın URL’si belirtilir.
  • name: Bu etiket ile iFrame isimlendirilebilir. Böylece iFrame elementinin JavaScript’te tanımlanması sağlanır.
  • height: Bu etiket ile iFrame’in uzunluk ölçüsü belirlenebilir. Varsayılan uzunluk 150 piksel (pixel)dir.
  • width: Bu etiket, iFrame’in genişlik ölçüsünü belirlemek amacıyla kullanılır. Varsayılan genişlik 300 pikseldir.
  • frameborder: Bu etiket, iFrame ile eklenen içeriğin çerçevesi ile ilgilidir. iFrame ile eklenen içerikler, varsayılan olarak bir çerçeve içerisinde olur. Kod içerisinde bu etiketin değeri “0” olarak belirtilirse bu kenarlıklar görünmez.
  • allow: Bu etiket, eklenen içeriğin hangi aksiyonları alabileceğini belirleyen bir etikettir. Kullanılan “fullscreen, autoplay” gibi değerler ile çeşitli aksiyonlara izin verilir.
  • allowfullscreen: Bu etiket ile iFrame ile eklenen bir içerik tam ekran olarak görüntülenebilir.
  • scrolling: Bu etiket ile iFrame’in kenarına kaydırma çubuğu eklenebilir.
  • loading: Bu etiket ile sayfa açılırken sayfadaki iFrame’in hemen yüklenmesine veya belli koşulları sağladıktan sonra yüklenmesine karar verilir. Tercih edilen seçeneğe göre kullanılan değerler; “eager”, “lazy” veya “auto” olarak adlandırılır.
  • align: iFrame ile eklenen içeriğin sayfadaki konumunu belirlemek için kullanılır. Örneğin, “top” değeri eklendiğinde, bu etiket içeriği sayfanın en başına taşıyacaktır. Bu etiketle birlikte kullanılabilen diğer değerler ise;
    • middle,
    • bottom,
    • top,
    • left,
    • right olarak sıralanabilir.

iFrame Kodu Nasıl Eklenir?

İnternet sitenize iFrame kodu eklemek oldukça kolay bir işlemdir:

  1. iFrame etiketi, HTML kod belgesinin içindeki <body> etiketinin içine yerleştirilir.
  2. Kullanılan temel kod <iframe src=”url”></iframe> şeklindedir. Bu temel koda istediğiniz etiketleri yerleştirerek, eklemek istediğiniz içeriğin aksiyonlarını ve konumunu düzenleyebilirsiniz.
  3. Kodu ilgili alana yerleştirip HTML belgesini kaydettikten sonra, açacağınız sayfada iFrame elementini görebilirsiniz.

iFrame ve Güvenlik Sorunları

iFrame oluşturmak internet siteleri için her ne kadar kullanışlı olsa da bazı güvenlik sorunlarını da beraberinde getirebilir. Bu problemlerden biri, “clickjacking” saldırısı olarak adlandırılan güvenlik sorunudur. Eğer iFrame elementiyle aldığınız içeriğin kaynağı güvenli olmayan bir web sitesi ise bu sitenin sahipleri kaynak sitenizin adresini değiştirebilir, kullanıcılarınızın tıklama hareketlerine ulaşabilir, birtakım eklentileri (plugins) bilginiz olmaksızın çalıştırabilir, isteğiniz dışında sayfanızda pop-up pencerelerin açılmasına neden olabilir. Aynı zamanda, bu saldırı sonucunda kullanıcılarınızın bilgilerini elde etmek amaçlı gönderilmiş birtakım bildirimler alabilirsiniz. Bu saldırılara çözüm olarak “sandbox” etiketi kullanılabilir. Bu etiketle; pop-up pencerelerinin açılmasını, herhangi bir JavaScript’in ve eklentilerin çalıştırılmasını, istek dışı form yüklemelerini, URL’nizde değişiklikler yapılmasını, sayfanızın çerezlerinin okunmasını ve yerel dosyalarınıza ulaşılmasını engelleyebilirsiniz.

Sitenizin başka bir sitede iFrame elementiyle kullanılması da bazı güvenlik sorunlarına sebep olabilir. Kötü niyetli siteler, sizin sitenizi tam sayfa olarak iFrame içinde gösterebilir ve ilgili iFrame üzerinde sahte bir giriş sekmesi (kullanıcı adı ve şifre bilgileri isteme gibi) içeren bir form oluşturabilir. Böyle bir durumda dikkatsiz bir kullanıcı, iFrame’i kötü niyetli olarak kullanan siteye kullanıcı adı ve şifresini veya duruma göre başka bilgilerini verebilir.

Bu güvenlik sorunun önüne geçmek için iki farklı yol kullanılır. Bu yolların ikisinde de farklı kodlar aracılığıyla, “X-Frame-Options” adındaki header (başlık bilgisi) ayarları düzenlenerek, kötü niyetli kişilerin sitenizi iFrame olarak kullanmasını engelleyebilirsiniz. İlk yol, ilgili ayarlardaki “httpd.conf” adlı konfigürasyon dosyasına x-frame-options: DENY kodunu girmektir. Böylece sitenizin iFrame olarak kullanılmasını reddetmiş olursunuz. İkinci yolda da yine aynı konfigürasyon dosyasına x-frame-options: sameorigin kodu girilir. Bu “sameorigin” etiketi sayesinde sadece sizin sitenizin kaynağından yani domain’inden gelen iFrame isteklerine izin verilir, diğerleri reddedilir. X-Frame-Options; Chrome, Safari, Internet Explorer 8 ve üst versiyonları, Firefox, Edge gibi birçok tarayıcı tarafından desteklenmektedir.

HTML iFrame Kullanımı ve Site Hızı

HTML kodunuza iFrame elementi eklemek, bellek gibi bilgi işlem kaynaklarının kullanımını artıracağından sitenizin hızını düşürebilir. Özellikle YouTube videosu gömülmüş olan bir sayfanız önemli ölçüde yavaşlayabilir. iFrame’in sitenizi yavaşlatmasının önüne geçmek için “loading” etiketine “lazy” değeri atayabilirsiniz (loading=”lazy”). “lazy” değerini atadığınızda, web sitesi eklenen içeriği sadece içerik okuyucunun önüne geldiğinde yükler. Sayfaları bu şekilde “lazy” olarak yükleme işlemi, Chromium tabanlı bütün tarayıcılar tarafından desteklenir. Bu yönteme ek olarak, “LazyLoad” kütüphanelerinden site hızınızı artırmak üzere faydalanabileceğiniz basit HTML kodlarına da ulaşabilirsiniz.