Yerleştirilmiş içerik, diğer sayfalardan veya sitelerden içerik paylaşırken kullanıcıları sitenizde tutmanın en iyi yoludur. Bu, Twitter'ın stili ve biçiminde görüntülenen yerleştirilmiş bir Tweet kadar küçük de olabilir. Ziyaretçilerin sitenizden ayrılmadan satın alma işlemi gerçekleştirebileceği yerleşik bir Shopify mağazası gibi kendi sitenize yerleştirilmiş tamamen ayrı bir site kadar büyük olabilir.
Artık, içerik yerleştirdiğimizde sitelerimizin güvenli durumda kalması büyük önem taşıyor.
Geliştiricilerin web sitelerine içerik yerleştirmesinin birkaç yolu vardır. En yaygın teknik, herhangi bir içeriği sitenize yalnızca bir URL ile yerleştirmenize olanak tanıyan bir <iframe> kullanmaktır. Bir iframe'i daha güvenli hale getirmek için sandbox özelliği eklemek mümkündür.
Alternatif olarak, önerilen bir HTML öğesi de kullanabilirsiniz:
<fencedframe>, üçüncü taraf içeriğini yerleştirmenin gizliliği koruyan bir yolu olarak önerilmektedir.- Daha sorunsuz sayfa geçişleri için
<portal>önerilir.
Yerleştirilmiş içeriğinizin güvenliğini nasıl iyileştireceğinizi öğrenmek için okumaya devam edin.
Iframe ile yerleştirme
iFrame'ler, bir iletişim sayfasına harita veya form ekleme ve reklam görüntüleme gibi her türlü kullanım alanı için kullanılabilir.
<iframe src="https://example.com/maps"></iframe>
Her iFrame'in kendi oturum geçmişi ve belgesi ile kendi tarama bağlamı vardır. Iframe'i yerleştiren bağlama üst tarama bağlamı denir.
Bir iframe'de görüntülenen üçüncü taraf içerik, postMessage() aracılığıyla üst siteyle etkileşim kurabilir. Bu sayede geliştiriciler, tarama bağlamları arasında istedikleri değerleri gönderebilir. 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 güvenlik ekleme
Kötü amaçlı içerik bir iFrame'de dağıtılırsa istenmeyen işlemler (ör. JavaScript çalıştırma veya form gönderme) gerçekleştirilebilir.
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>
Özel Korumalı Alan, yerleştirilmiş içeriğiniz için önemli olan belirli API'lerin kullanılamamasına neden olabilir. Devre dışı bırakılmış bir API'ye izin vermek için korumalı alan ö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 bir dizi olası değer vardır.
İzin Politikası
Web için giderek güçlenen özellikler geliştirildikçe tüm özelliklerin izinlerini yönetmek için izin politikaları oluşturuldu. İzin politikası, üst siteye ve iframe içeriğine uygulanabilir. Üst siteye verilen izinler, allow özelliği kullanılarak iframe'e de verilebilir.
<iframe src="https://example.com" allow="fullscreen"></iframe>
Çitli çerçevelerle yerleştirin
Sınırlandırılmış çerçeve (<fencedframe>), iframe'e benzer şekilde, yerleştirilmiş içerik için önerilen bir HTML öğesidir. Bir iFrame'den farklı olarak, çitle çevrili çerçeve, çerçevenin siteler arası verilere erişmesine izin vermek için yerleştirme bağlamıyla olan iletişimi kısıtlar. Benzer şekilde, üst öğenin sayfasındaki birinci taraf verileri sınırlı çerçeveyle paylaşılamaz.
<fencedframe src="https://3rd.party.example"></fencedframe>
Kısıtlanmış Çerçeveler, üst düzey sitelerin verileri bölümlendirmesi gerektiğini öneren bir Özel Korumalı Alan teklifidir. Özel Korumalı Alan tekliflerinin çoğu, üçü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 belgelerin çitli bir çerçeve içinde oluşturulmasını gerektirebilir.
Örneğin, FLEDGE API reklam açık artırmasının galibi için çevrili bir çerçeve oluşturulur. FLEDGE API, çitle çevrili bir çerçeve içinde oluşturulabilen, konumdan bağımsız bir URN şeması olan opak bir kaynak sağlar. Saydam olmayan kaynaklar, sitelerin reklam kaynağı URL'sini site sahibine göstermeden sitelerinde içerik göstermesine olanak tanır.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
Sınırlandırılmış çerçeveler, iFrame'lerin yerini almayacak. Bunları kullanmanız gerekmez. Farklı üst düzey bölümlere ait verilerin aynı sayfada gösterilmesi gerektiğinde kullanım için daha gizli bir çerçeve sağlamak amacıyla çitli çerçeveler önerilir.
Portallarla yerleştirme
Portal (<portal>), bağımsız göz atma bağlamına sahip, önerilen bir HTML öğesidir. Bu da sayfa geçiş deneyimini iyileştirebilir. Portallar iframe gibi içerikleri yerleştirir ancak kullanıcı portalın koduna erişemez. Portallar salt görüntülenebilirdir ve kullanıcılar bu portallarla etkileşimde bulunamaz.
Portallar, tek sayfalık bir uygulamanın sorunsuz geçişleri ile çok sayfalı bir uygulamanı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, hâlâ 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 birçok HTML öğesi önerilmiş ve API'ler oluşturulmuştur. Bir süredir, birden fazla <frame> ve <frameset> öğesi içeren siteler oluşturuluyordu. Birkaç <frameset> öğesi içeren siteler, birçok ayrı çerçevenin kaynağından bağımsız olarak adres çubuğunda üst sayfanın URL'sini gösteriyordu. Bu durum, sitedeki içeriklerin bağlantılarını paylaşmayı zorlaştırıyordu. Bu API'ler kullanımdan kaldırılmıştır.
Java <applet>
öğesi gibi eklenti teknolojilerinin diğer kullanım alanlarını kapsayacak şekilde kullanıldığı zamanlar da vardı. Bu alan daha sonra <object> öğesi ile değiştirildi. Bu öğelerin ikisi de genellikle Flash eklentilerini görüntülemek için kullanılıyordu ancak diğer HTML öğelerini (iFrame'lere benzer) görüntülemek için de kullanılıyordu.
<canvas>, <audio>, <video> ve <svg> gibi diğer öğeler hem <object> hem de <applet> öğelerini kullanımdan kaldırdı.
<object> ve <embed> henüz resmi olarak kullanımdan kaldırılmamış olsa da, özellikle bazı garip davranışları olduğu için bunlardan 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 önerilmiştir. Çitli çerçeve önerisi ile ilgili gelişmeleri ilerleyen süreçte paylaşmaya devam edeceğiz.