object'ten iframe'e - diğer gömme teknolojileri

Multimedya ve İçerik Gömme

Şimdiye kadar, web sayfalarınıza resim, video ve ses de dahil olmak üzere bir şeyler gömmeye alışmış olmalısınız. Bu noktada, çok çeşitli içerik türlerini web sayfalarınıza yerleştirmenize izin veren bazı öğelere bakarak biraz farklı bir adım atmak istiyoruz: <iframe>, <embed> ve <object> öğeleri. <iframe> diğer web sayfalarını gömmek içindir ve diğer ikisi PDF’leri, SVG’yi ve hatta Flash’ı gömmenize izin verir.

Yerleştirmenin kısa bir tarihi

Uzun zaman önce Web’de çerçeveler kullanmak popülerdi – bir web sitesinin ayrı HTML sayfalarında depolanan küçük parçaları. Bunlar, bir tablonun sütunlarını ve satırlarını boyutlandırmak yerine, her çerçevenin doldurduğu ekranda alanı belirtmenize izin veren çerçeve kümesi adı verilen bir ana belgeye gömülüydü. 90’ların ortalarından sonlarına kadar popülerliğin zirvesi olarak kabul edildi ve bir web sayfasının bunun gibi daha küçük parçalara bölünmesinin, indirme hızları için daha iyi olduğuna dair kanıtlar vardı – özellikle o zamanlar ağ bağlantılarının çok yavaş olmasının da bunda payı vardı. Bununla birlikte, ağ hızları arttıkça birçok sorun ortaya çıktı vardı, bu yüzden artık kullanıldıklarını görmüyorsunuz.

Kısa bir süre sonra (90’ların sonu, 2000’lerin başı), Java Applet’leri ve Flash gibi eklenti teknolojileri çok popüler hale geldi – bunlar web geliştiricilerinin videolar ve animasyonlar gibi zengin içeriklerin yerleştirmesine izin verdi. Bu teknolojilerin yerleştirilmesi <object>, ve daha az kullanılan <embed> gibi öğeler aracılığıyla sağlandı ve o zamanlar çok kullanışlıydılar. Erişilebilirlik, güvenlik, dosya boyutu ve daha fazlası da dahil olmak üzere birçok sorun nedeniyle artık modası geçti; bu günlerde çoğu mobil cihaz artık bu tür eklentileri desteklemiyor ve masaüstü desteği de artık kaybolmak üzere.

Son olarak, <iframe> öğesi göründü (içeriği gömmenin diğer yollarıyla birlikte <canvas>, <video>, vb.). Bu, tüm bir web belgesini, bir <img> öğesi gömer gibi, başka bir sayfanın içine gömmek için kullanılır ve bugün de düzenli olarak kullanılmaktadır.

Tarih dersini aradan çıkardığımıza göre şimdi bunlardan bazılarını nasıl kullanacağımızı görebiliriz.

Ayrıntılı olarak iframe’ler

<iframe> öğeleri, diğer web belgelerini geçerli sayfaya gömmenize izin verecek şekilde tasarlanmıştır. Bu, web sitenize, üzerinde doğrudan kontrole sahip olmayabileceğiniz ve kendi sürümünüzü uygulamak zorunda kalmak istemeyeceğiniz, çevrimiçi video sağlayıcılarından videolar, yorum yapma sistemleri gibi üçüncü taraf içeriği eklemek için harika bir yöntem sunar. Örneğin Disqus gibi yorum sistemleri, harita sağlayıcılarından haritalar, reklam afişleri vb. ekleyebilirsiniz.

Aşağıda da tartışacağımız gibi, <iframe>‘de dikkate alınması gereken bazı ciddi güvenlik endişeleri de bulunur. Ancak bu endişeler, <iframe> öğelerini web sitelerinizde kullanmamanız gerektiği anlamına gelmez – sadece biraz bilgi ve dikkatli düşünme bizi dertten kurtaracaktır.

Kodu biraz daha detaylı inceleyelim. Web sayfalarınızdan birine Mozilla MDN sözlüğü eklemek istediğinizi varsayalım – şöyle bir şey deneyebilirsiniz:

<head>
  <style> iframe { border: none } </style>
</head>
<body>
  <iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
          width="100%" height="500" allowfullscreen sandbox>
    <p>
      <a href="/en-US/docs/Glossary">
         Fallback link for browsers that don't support iframes
      </a>
    </p>
  </iframe>
</body>

Bu örnek, <iframe>‘in temellerini içerir :

border: none: Kullanılırsa, <iframe>‘i çevreleyen kenarlık olmadan görüntülenir. Aksi takdirde, tarayıcılar varsayılan olarak <iframe>‘i çevreleyen bir kenarlık görüntüler (ki bu genellikle istenmeyen bir durumdur).

allowfullscreen: Kullanılırsa <iframe> kullanılarak tam ekran moduna geçiş yapılabilir (bu konu bu makalenin kapsamı dışındadır.)

src: Bu öznitelik, <video> ve <img>‘de olduğu gibi gömülecek belgenin URL’sini gösteren bir yol içerir.

width ve height: Bu nitelikler, iframe’in olmasını istediğiniz genişlik ve yüksekliği belirtir.

yedek içerik – fallback content: <video> gibi öğelere benzer şekilde <iframe>‘in desteklenmediği tarayıcılarda gösterilecek bir içerik sağlar. Bu içerik <iframe></iframe> etiketleri arasına yerleştirilir. Ancak bu günlerde <iframe>‘i desteklemeyen herhangi bir tarayıcıyla karşılaşmanız pek de olası değil.

sandbox: Diğer <iframe> özelliklerine göre (örn. IE 10 ve üzeri) daha modern tarayıcılarda çalışan bu öznitelik, daha yüksek güvenlik ayarları talep eder; bir sonraki bölümde bunun hakkında daha fazla konuşacağız.

Not : Sayfa yüklenme hızını artırmak için src özniteliğini ana içeriğin yüklenmesi tamamlandıktan sonra JavaScript ile ayarlamak iyi bir fikirdir. Bu, sayfanızı daha erken kullanılabilir hale getirir ve sayfa yükleme sürenizi azaltır (önemli bir SEO metriği).

Güvenlik endişeleri

Yukarıda güvenlik endişelerinden bahsetmiştik – şimdi buna biraz daha ayrıntılı olarak girelim. Tüm bu içeriği ilk seferde mükemmel bir şekilde anlamanızı beklemiyoruz; Biz sadece sizi bu endişeden haberdar etmek ve daha fazla deneyim kazandıkça ve çalışmalarınızda <iframe> kullanmayı düşünmeye başladıkça geri dönebileceğiniz bir referans sağlamak istiyoruz . Ayrıca korkmanıza ve <iframe>‘den uzaklaşmanıza da gerek yok – sadece dikkatli olmanız yeterli. Devam edelim…

Tarayıcı üreticileri ve Web geliştiricileri, iframe’lerin Web’deki kötü insanların (genellikle bilgisayar korsanları) saldırabilecekleri ortak bir hedef olduğunu (resmi terim: saldırı vektörü ) zor yoldan öğrendiler. Bu nedenle, teknik özellik mühendisleri ve tarayıcı geliştiricileri bu özelliği daha güvenli hale getirmek için çeşitli güvenlik mekanizmaları geliştirdi. Bunun yanında dikkate alınması gereken en iyi uygulama yöntemleri de oluşturdular – bunlardan bazılarını aşağıda ele alacağız.

tıklama hırsızlığı bilgisayar korsanlarının belgenize görünmez bir iframe yerleştirdiği (veya belgenizi kendi kötü niyetli web sitelerine yerleştirdiği) ve bunu kullanıcıların etkileşimlerini yakalamak için kullandığı yaygın bir iframe saldırısı türüdür. Bu, kullanıcıları yanlış yönlendirmenin veya hassas verileri çalmanın yaygın bir yoludur.

Önce hızlı bir örnek — yukarıda gösterdiğimiz önceki örneği tarayıcınıza yüklemeyi deneyin. Beklediğiniz sayfa yerine, muhtemelen “Bu sayfayı açamıyorum” gibi bir mesaj göreceksiniz ve tarayıcı geliştirici araçlarında Konsol’a bakarsanız, şunu görürsünüz: Firefox’ta, “https://developer.mozilla.org/en-US/docs/Glossary” dosyasının bir çerçevede yüklenmesi “X-Frame-Options” yönergesi tarafından “DENY” olarak ayarlanmış gibi bir şey söylenecektir. “. Bunun nedeni, MDN’yi oluşturan geliştiricilerin, web sitesi sayfalarına hizmet veren sunucuya, bunların <iframe> içine gömülmesine izin vermemek için bir ayar eklemiş olmasıdır. Bu mantıklı olabilir — herkes böyle bir şey yapmaya başlasaydı, tüm ek bant genişliği Mozilla’ya çok pahalıya mal olurdu.

Yalnızca gerektiğinde yerleştir

Bazen, youtube videoları ve haritalar gibi üçüncü taraf içeriği yerleştirmek mantıklı olabilir, ancak yalnızca tamamen gerekli olduğunda üçüncü taraf içeriğini yerleştirirseniz, kendinizi birçok sorundan kurtarabilirsiniz. Web güvenliği için iyi bir kural, “Asla çok dikkatli olamazsınız. Yaptıysanız, yine de iki kez kontrol edin. Başka biri yaptıysa, aksi kanıtlanana kadar tehlikeli olduğunu varsayın.”

Güvenliğin yanı sıra, fikri mülkiyet konularının da farkında olmalısınız. Çoğu içerik telif hakkıyla korunmaktadır, çevrimdışı ve çevrimiçi, hatta beklemeyebileceğiniz içerikler bile (örneğin, Wikimedia Commons‘daki çoğu görsel). Size ait olmadıkça veya sahipleri size yazılı, kesin izin vermedikçe, web sayfanızda asla başkasına ait içerik göstermeyin. Telif hakkı ihlali cezaları ağırdır. Yine de, asla çok dikkatli olamazsınız.

İçerik lisanslıysa, lisans koşullarına uymanız gerekir.

HTTPS’yi kullanın

HTTPS , HTTP’nin şifreli sürümüdür. Web sitelerinize mümkün olduğunca HTTPS kullanarak hizmet vermelisiniz:

HTTPS, uzak içeriğin geçiş sırasında kurcalanma olasılığını azaltır,
HTTPS, gömülü içeriğin üst belgenizdeki içeriğe erişmesini engeller ve bunun tersi de geçerlidir.

HTTPS’yi etkinleştirmek, sitenizin yüklenmesi için özel bir güvenlik sertifikası gerektirir. Birçok barındırma sağlayıcısı, bir sertifika koymak için kendi başınıza herhangi bir kurulum yapmanıza gerek kalmadan HTTPS etkin barındırma hizmeti sunar. Ama eğer kendi başınıza Siteniz için HTTPS desteği kurmanız gerekirse, Let’s Encrypt Apache web sunucusu, Nginx ve diğerleri dahil olmak üzere en yaygın kullanılan web sunucuları için de destek veren kullanabileceğiniz araçlar ve talimatlar sağlar. Let’s Encrypt araçları, süreci olabildiğince kolaylaştırmak için tasarlanmıştır, bu nedenle sitenizi HTTPS’yi etkinleştirmek için iyi bir yöntem olabilir.

Not : GitHub sayfaları, içeriğin varsayılan olarak HTTPS üzerinden sunulmasına izin verir, bu nedenle içeriği barındırmak için kullanışlıdır. Farklı bir barındırma sağlayıcısı kullanıyorsanız ve emin değilseniz, bu konuyu barındırma sağlayıcınıza sormanız iyi olacaktır.

Her zaman `sandbox` özniteliği kullanın

Saldırganlara web sitenizde kötü şeyler yapmak için olabildiğince az güç vermek istiyorsunuz. Bu nedenle gömülü içeriğe yalnızca işini yapması için gereken izinleri vermelisiniz. Tabii ki, bu sizin kendi içeriğiniz için de geçerlidir. Kum havuzu – sandbox, uygun şekilde kullanılabilecek – veya test için kullanılacak – ve kodun geri kalanına (kazara veya kötü niyetli) herhangi bir zarar veremeyecek olan bir kod konteynerine denir..

Korumalı alanda olmayan içerik çok fazla şey yapabilir (JavaScript yürütme, form gönderme, açılır pencereler ekleme vb.) Varsayılan olarak, sandbox‘ı parametresiz kullanarak tüm mevcut kısıtlamaları uygulamalısınız – önceki örneğimizde gösterildiği gibi.

Kesinlikle gerekliyse, izinleri birer birer geri ekleyebilirsiniz ( sandbox="" öznitelik değerinin içinde). Önemli bir not: asla hem allow-scripts ve allow-same-origin izinlerini aynı anda eklemeyin.

Not: Saldırganlar insanları kötü niyetli içeriğe doğrudan ulaşmaları yönünde kandırırlarsa sandbox bir işe yaramayacaktır.

CSP yönergelerini yapılandırın

CSP , içerik güvenliği ilkesi anlamına gelir ve HTML belgenizin güvenliğini artırmak için tasarlanmış bir dizi HTTP Üstbilgisi (bir web sunucusundan sunulduğunda web sayfalarınızla birlikte gönderilen meta veriler) sağlar. <iframe> güvenliğini sağlamak söz konusu olduğunda , sunucunuzu uygun bir X-Frame-Options başlığı gönderecek şekilde yapılandırabilirsiniz. Bu, diğer web sitelerinin içeriğinizi web sayfalarına yerleştirmesini engelleyebilir. Daha önce gördüğümüz gibi, bu tam olarak MDN geliştiricilerinin yaptığı şeydir.

embed ve object öğeleri

<embed> ve <object> elementleri <iframe>‘den farklı bir hizmet sunarlar; bu unsurlar Java uygulamaları, Flash eklentisi, PDF, SVG, video ve resim içerikleri gibi birden fazla türde içeriğin gömülmesine olanak tanır.

Not : Eklenti tarayıcının kendi başına okuyamadığı içeriğe erişim sağlayan yazılımları ifade eder.

Ancak, bu öğeleri çok fazla kullanmanız pek olası değildir — Uygulamalar yıllardır kullanılmamaktadır, Flash birkaç nedenden dolayı artık çok popüler değil, PDF’ler bağlantılı olarak daha kullanışlıdır, görüntü ve video gibi diğer içerikler ise daha iyi ve daha kolay öğelere sahiptirler. Eklentiler ve bu gömme yöntemleri gerçekten eski teknolojilerdir. Bunlarla intranetler veya kurumsal projeler gibi belirli durumlarda karşılaşabilirsiniz diye bahsediyoruz.

Yine de eklenti içeriklerini gömmeye ihtiyaç duyuyorsanız, aşağıdaki bilgilere ihtiyacınız olacak:

	`<embed>`	`<object>`
Gömülü içeriğin URL’si	`src`	`data`
gömülü içeriğin doğru ortam türü	`type`	`type`
eklenti tarafından kontrol edilen kutunun yüksekliği ve genişliği (CSS piksel cinsinden)	`height` `width`	`height` `width`
eklentiyi parametre olarak beslemek için adlar ve değerler	bu adlar ve değerlerle geçici nitelikler	`<param>` etiketi
kullanılamayan bir kaynak için yedek olarak bağımsız HTML içeriği	desteklenmiyor ( `<noembed>` geçersiz)	`<object>` içinde `<param>` elementlerinden sonra bulunan

Bir Flash filmi gömmek için <embed> kullanan bir örneğe bakalım:

<embed src="whoosh.swf" quality="medium"
       bgcolor="#ffffff" width="550" height="400"
       name="whoosh" align="middle" allowScriptAccess="sameDomain"
       allowFullScreen="false" type="application/x-shockwave-flash"
       pluginspage="http://www.macromedia.com/go/getflashplayer">

Şimdi <object> ile bir sayfaya PDF yerleştiren bir örneğe bakalım:

<object data="mypdf.pdf" type="application/pdf"
        width="800" height="1200">
  <p>PDF eklentiniz yok, isterseniz 
    <a href="mypdf.pdf">dosyayı indirebilirsiniz
    </a>
  </p>
</object>

PDF’ler, kağıt ve dijital arasındaki önemli basamaklar. Ancak erişilebilirlik zorlukları barındırabilirler ve küçük ekranlarda okunmaları zor olabilir. Yine de popülerdirler. Ancak bunları bir web sayfasına gömmek yerine ayrı bir sayfada indirilebilmeleri veya okunabilmeleri için bağlantı vermek çok daha iyi olabilir.

Eklentiler o kadar da iyi olmayabilir

Bir zamanlar, eklentiler Web’de vazgeçilmezdi. Sadece çevrimiçi film izlemek için Adobe Flash Player’ı yüklemek zorunda kaldığınız günleri hatırlıyor musunuz? Ardından, Flash Player’ı ve Java Runtime Environment’ımızı güncelleme konusunda sürekli olarak can sıkıcı uyarılar alıyorduk. Web teknolojileri o zamandan beri çok daha güçlü hale geldi ve o günler geride kaldı. Hemen hemen tüm uygulamalar için, eklentilere bağlı içerik sunmayı bırakıp bunun yerine Web teknolojilerinden yararlanmaya başlamanın zamanı geldi.

Erişiminizi herkese genişletin. Herkesin bir tarayıcısı var, ancak eklentiler özellikle mobil kullanıcılar arasında giderek daha nadir hale geliyor. Web herhangi bir eklenti olmadan kolayca kullanıldığından, insanlar bir eklenti yüklemek yerine rakiplerinizin web sitelerine gitmeyi tercih eder.
Kendinize bir mola verin Flash ve diğer eklentilerle birlikte gelen baş ağrılarınızdan kurtulun.
Ek güvenlik tehlikelerinden uzak durun. Adobe Flash sayısız yamadan sonra bile hala güvensiz. 2015 yılında, Facebook’un o zamanki Güvenlik Şefi Alex Stamos, Adobe’nin Flash’ı durdurmasını istemişti.

Peki ne yapmalıyız? Etkileşime ihtiyacınız varsa HTML ve JavaScript kullanarak Java uygulamalarına veya ActiveX/BHO teknolojilerinden kurtulabilirsiniz. Adobe Flash’a güvenmek yerine HTML5 video öğelerini, vektör grafikler için SVG‘yi için ve karmaşık görüntü ve animasyonlar için Canvas‘ı kullanabilirsiniz.

Becerilerinizi test edin!

Bu makalenin sonuna geldiniz, ancak en önemli bilgileri hatırlayabiliyor musunuz?

Özet

Web belgelerine diğer içerikleri gömme konusu hızla çok karmaşık hale gelebilir, bu nedenle bu makalede, bu konuyu basit, ve tanıdık gelecek bir şekilde tanıtmaya çalıştık. Aynı zamanda daha gelişmiş özelliklere de değindik. Başlangıç olarak sayfalarınıza haritalar ve videolar gibi üçüncü taraf içerikleri dahil etmenin ötesinde yerleştirmeyi kullanmanız pek olası değil. Bununla birlikte, daha deneyimli hale geldikçe muhtemelen yerleştirmeye dair daha fazla kullanım alanları bulacaksınız.

Burada tartıştıklarımızın yanı sıra içerik gömmeyi sağlayan birçok başka teknoloji de bulunuyor. Daha önceki makalelerimizde bazılarını gördük: <video>, <audio> ve <img> gibi. Fakat keşfetmeye değer diğerlerinin olduğunu da unutmayın, örneğin <canvas> JavaScript ile oluşturulan 2D ve 3D grafikler için, <svg> ise vektör grafiklerini gömmek için kullanılır. Bu kılavuzun bir sonraki makalesinde SVG’ye bakacağız.

object’ten iframe’e – diğer gömme teknolojileri