Yerleştirilmiş içerik, kullanıcıları sitenizde tutarken diğer sayfalardaki veya sitelerdeki içerikleri paylaşmanın en iyi yoludur. Bu, Twitter'ın stil ve biçiminde gösterilen yerleştirilmiş bir tweet kadar küçük olabilir. Bu, kendi sitenize yerleştirilmiş tamamen ayrı bir site kadar büyük olabilir. Örneğin, ziyaretçilerin sitenizden ayrılmadan satın alma işlemi yapabileceği yerleştirilmiş bir Shopify mağazası.
İçerik yerleştirirken sitelerimizin güvenli kalması artık hiç olmadığı kadar önemli.
Geliştiriciler, web sitesine içerik yerleştirmek için çeşitli yöntemler kullanabilir. En yaygın teknik, <iframe> kullanmaktır. Bu teknik, yalnızca bir URL ile herhangi bir içeriği sitenize yerleştirmenize olanak tanır. Bir iFrame'i daha güvenli hale getirmek için sandbox özelliğini eklemek zaten mümkündür.
Alternatif olarak, önerilen bir HTML öğesi de kullanabilirsiniz:
<fencedframe>, üçüncü taraf içeriğini yerleştirmek için gizliliği korumaya yönelik bir yöntem olarak önerilmektedir.- Daha sorunsuz sayfa geçişleri için
<portal>önerilir.
Yerleştirilmiş içeriğinizin güvenliğini nasıl artıracağınızı öğrenmek için okumaya devam edin.
iframe'lerle yerleştirme
iFrame'ler, iletişim sayfasına harita veya form ekleme ve reklam gösterme gibi her türlü kullanım alanında kullanılabilir.
<iframe src="https://example.com/maps"></iframe>
Her iFrame'in kendi oturum geçmişi ve belgesiyle birlikte kendi göz atma bağlamı vardır. iframe'i yerleştiren bağlam, üst göz atma bağlamı olarak adlandırılır.
Bir iFrame'de gösterilen üçüncü taraf içeriği, postMessage() aracılığıyla üst siteyle etkileşime geçebilir. Bu, geliştiricilerin göz atma bağlamları arasında rastgele değerler göndermesine olanak tanır. Mesaj alıcısı, değerleri almak için etkinlik işleyiciyi onmessage
kullanabilir.
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
sandbox özelliğiyle ek güvenlik
Bir iFrame'e kötü amaçlı içerik yerleştirilirse istenmeyen işlemlerin (ör. JavaScript çalıştırma veya form gönderme) gerçekleştirilmesi mümkündür.
Bunu önlemek için sandbox özelliği, iFrame'deki yürütülebilir API'leri kısıtlar ve zararlı olabilecek özellikleri devre dışı bırakır.
<iframe src="https://example.com" sandbox></iframe>
Sandbox, yerleştirilmiş içeriğiniz için önemli olan belirli API'leri kullanılamaz hale getirebilir. Devre dışı bırakılmış bir API'ye izin vermek için sandbox özelliğine açıkça bir bağımsız değişken ekleyebilirsiniz.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
sandbox spesifikasyonu için allow-forms, allow-same-origin, allow-popups ve daha fazlası dahil olmak üzere çeşitli olası değerler vardır.
İzin Politikası
Web için giderek daha güçlü özellikler geliştirildikçe tüm bu özelliklerin izinlerini yönetmek için izin politikaları oluşturuldu. İzin politikası, üst siteye ve iFrame içeriğine uygulanabilir. Bir üst siteye verilen izinler, allow özelliği kullanılarak iFrame'e de verilebilir.
<iframe src="https://example.com" allow="fullscreen"></iframe>
Sınırlı çerçevelerle yerleştirme
Sınırlı çerçeve (<fencedframe>), iFrame'e benzer şekilde yerleştirilmiş içerik için önerilen bir HTML öğesidir. Bir iframe'in aksine, sınırlı çerçeve, çerçeveye farklı sitelerden gelen verilere erişme izni vermek için yerleştirme bağlamıyla iletişimi kısıtlar ancak bu verileri yerleştirme bağlamıyla paylaşmaz. Benzer şekilde, üst öğenin sayfasındaki birinci taraf verileri de sınırlı çerçeveyle paylaşılamaz.
<fencedframe src="https://3rd.party.example"></fencedframe>
Fenced Frames, üst düzey sitelerin verileri bölümlendirmesi gerektiğini öneren bir Özel Korumalı Alan teklifidir. Özel Korumalı Alan'daki birçok teklif, üçüncü taraf çerezleri veya diğer izleme mekanizmaları olmadan siteler arası kullanım alanlarını karşılamayı amaçlamaktadır. Belirli Özel Korumalı Alan API'leri, belirli dokümanların sınırlı bir çerçeve içinde oluşturulmasını gerektirebilir.
Örneğin, FLEDGE API reklam açık artırmasının kazananı için bir sınırlı alan oluşturulur. FLEDGE API, opak bir kaynak (konumdan bağımsız bir URN şeması) sağlayacak. Bu kaynak, sınırlı bir çerçeve içinde oluşturulabilir. Opak kaynaklar, sitelerin reklam kaynağı URL'sini site sahibine göstermeden sitelerinde içerik yayınlamasına olanak tanır.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
Sonuç olarak, sınırlı çerçeveler iFrame'lerin yerini almayacak. Bunları kullanmanız gerekmez. Fenced frame'ler, farklı üst düzey bölümlerdeki verilerin aynı sayfada gösterilmesi gerektiğinde kullanılmak üzere daha gizli bir çerçeve olarak önerilmektedir.
Portallarla yerleştirme
Portal (<portal>), bağımsız bir tarama bağlamına sahip, önerilen bir HTML öğesidir. Bu öğe, sayfa geçişi deneyimini iyileştirebilir. Portallar, iFrame gibi içerikleri yerleştirir ancak kullanıcı portalın koduna erişemez. Portal salt görüntülenir ve kullanıcılar tarafından etkileşimde bulunulamaz.
Portallar, tek sayfalık uygulamaların sorunsuz geçişleriyle çok sayfalı uygulamaların düşük karmaşıklığını sunar. Bu geçişler animasyonlu olabilir ve tarayıcı penceresindeki içeriği hızlıca değiştirebilir.
<portal src="https://example.com/"></portal>
Portal spesifikasyonu henüz geliştirmenin ilk aşamalarındadır.
Yerleştirmeler için kullanılan diğer HTML öğeleri
Web geçmişi boyunca, içerik yerleştirmek için çeşitli HTML öğeleri önerilmiş ve API'ler oluşturulmuştur. Bir süre boyunca, birden fazla <frame> ve <frameset> öğesi içeren siteler oluşturmak yaygındı. Birkaç <frameset> öğesi içeren sitelerde, çok sayıda bağımsız çerçevenin kaynağına bakılmaksızın adres çubuğunda üst sayfanın URL'si gösteriliyordu. Bu durum, site içindeki içeriklere bağlantı paylaşmayı zorlaştırıyordu. Bu API'lerin desteği sonlandırılmıştır.
Java <applet> öğesi gibi eklenti teknolojilerinin diğer kullanım alanlarını kapsamak için kullanıldığı zamanlar da olmuştur. Bu daha sonra <object> öğesiyle değiştirildi. Bu öğelerin her ikisi de Flash eklentilerini göstermek için yaygın olarak kullanılırdı ancak diğer HTML öğelerini (iFrame'lere benzer şekilde) göstermek için de kullanılırdı.
<canvas>, <audio>, <video> ve <svg> gibi diğer öğeler, hem <object> hem de <applet> öğelerini kullanımdan kaldırmıştır.
<object> ve <embed> henüz resmi olarak kullanımdan kaldırılmamış olsa da özellikle garip davranışları olduğundan bunları kullanmaktan kaçınmak en iyisidir.
<applet>, 2017'de HTML spesifikasyonundan kaldırıldı.
Sonuç
Mevcut iframe spesifikasyonunu kullanarak içerikleri herhangi bir web sitesine güvenli bir şekilde yerleştirebilirsiniz. Güvenlik ve stil iyileştirmeleri için <fencedframe> ve <portal> dahil olmak üzere daha fazla HTML öğesi önerildi. Fenced Frames teklifi ile ilgili gelişmeleri paylaşmaya devam edeceğiz.