Yerleştirilmiş içerik, diğer sayfa veya sitelerdeki içeriği paylaşırken kullanıcıları sitenizde tutmanın en iyi yoludur. Bu, Twitter'ın stilinde ve biçiminde görüntülenen yerleşik bir Tweet kadar küçük olabilir. Bu, kendi sitenize yerleştirilmiş tamamen ayrı bir site de olabilir. Örneğin, ziyaretçilerin sitenizden ayrılmadan alışveriş yapabileceği yerleşik bir Shopify mağazası da olabilir.
İçeriği yerleştirdiğimizde sitelerimizin güvenliğini sağlamak artık her zamankinden daha fazla önem taşıyor.
Geliştiricilerin bir web sitesine 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 <iframe> kullanmaktır. Bir iframe'i daha güvenli hale getirmek için sandbox özelliği halihazırda eklenebilir.
Alternatif olarak, önerilen bir HTML öğesini de kullanabilirsiniz:
- Üçüncü taraf içeriği yerleştirmenin gizliliği korumaya yönelik bir yolu olarak
<fencedframe>önerilir. - 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ür kullanım durumu için kullanılabilir.
<iframe src="https://example.com/maps"></iframe>
Her iframe'in kendi oturum geçmişi ve belgesi olan kendi tarama bağlamı vardır. iframe'i yerleştiren bağlam, parent göz atma bağlamı olarak adlandırılır.
iFrame'de görüntülenen üçüncü taraf içerik, postMessage() üzerinden üst siteyle etkileşim kurabilir. Bu sayede geliştiriciler, tarama bağlamları arasında rastgele değerler gönderebilir. Mesaj alıcısı, değerleri almak için onmessage etkinlik işleyicisini kullanabilir.
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
sandbox özelliğiyle daha fazla güvenlik
Kötü amaçlı içerik bir iframe'e dağıtılırsa istenmeyen eylemler (JavaScript yürütme veya form gönderme gibi) yürütülebilir.
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>
Korumalı alan, 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 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 birkaç olası değer vardır.
İzin Politikası
Web için giderek daha güçlü özellikler geliştirildikçe bunların tümüne ilişkin izinleri yönetmek için izin politikaları oluşturuldu. İzin politikası bir ü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>
çitle çevrili çerçevelerle yerleştirme
Etilmiş çerçeve (<fencedframe>), iframe'e benzer şekilde, yerleştirilmiş içerik için önerilen bir HTML öğesidir. Kısıtlanmış çerçeve, iframe'in aksine, çerçevenin yerleştirme içeriği ile paylaşılmadan siteler arası verilere erişmesine izin vermek için yerleştirme bağlamıyla iletişimi kısıtlar. Benzer şekilde üst sayfanın sayfasındaki birinci taraf verileri, sınırlandırılmış ç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 tekliflerinin çoğu, üçüncü taraf çerezleri veya diğer izleme mekanizmaları olmadan siteler arası kullanım alanlarını karşılamayı hedefler. Bazı Özel Korumalı Alan API'leri, çitlenmiş bir çerçeve içinde oluşturulacak belirli belgeleri gerektirebilir.
Örneğin, FLEDGE API reklam açık artırmasının kazananı için sınırlı bir çerçeve oluşturulur. FLEDGE API, sınırlı bir çerçeve içinde oluşturulabilen, konumdan bağımsız bir URN şeması olan opak bir kaynak sağlar. Opak kaynaklar, reklam kaynağı URL'sini site sahibine göstermeden sitelerin sitelerinde içerik görüntülemesine olanak tanır.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
Son olarak, sınırlanmış çerçeveler iframe'lerin yerini almaz. Bunları kullanmak zorunda değilsiniz. Farklı üst düzey bölümlerden verilerin aynı sayfada görüntülenmesi gerektiğinde, çitle çevrili çerçevelerin kullanılması için daha gizli bir çerçeve önerilir.
Portallarla yerleştirme
Portal (<portal>), bağımsız tarama bağlamı olan ve sayfa geçiş deneyimini iyileştirebilecek, önerilen bir HTML öğesidir. Portallar iframe gibi içerikler yerleştirir, ancak kullanıcı
portalın koduna erişemez. Portal, salt görüntülenebilirdir ve kullanıcıların etkileşimde bulunması mümkün değildir.
Portallar, tek sayfalık bir uygulamanın sorunsuz geçişleri sayesinde çok sayfalı bir uygulamanın karmaşıklığını azaltır. Bu geçişler animasyonla oluşturularak tarayıcı penceresindeki içeriğin yerini hızla değiştirebilir.
<portal src="https://example.com/"></portal>
portal spesifikasyonu hâlâ geliştirmenin ilk aşamalarındadır.
Gömme işlemleri için kullanılan diğer HTML öğeleri
Web geçmişi boyunca, içeriği yerleştirmek için çok sayıda HTML öğesi önerilmiş ve
API'lar oluşturulmuştur. Bir süredir, birden çok <frame> ve <frameset> öğesine sahip siteler oluşturuluyordu. Birkaç <frameset> öğesine sahip siteler, birçok bağımsız çerçevenin kaynağına bakılmaksızın adres çubuğunda üst sayfanın URL'sini gösteriyordu. Bu durum, site içindeki içeriklerin bağlantılarının paylaşılmasını zorlaştırıyordu. Bu API'ler artık kullanımdan kaldırılmıştır.
Java <applet> öğesi gibi eklenti teknolojilerinin diğer kullanım alanlarını ele almak için kullanıldığı bir dönem de olmuştur. Bu, daha sonra <object> öğesi ile değiştirildi. Bu öğelerin her ikisi de Flash eklentilerini görüntülemek için yaygın olarak kullanılmakla birlikte, 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 eski oluşturdu.
<object> ve <embed> henüz resmi olarak kullanımdan kaldırılmasa da özellikle bazı tuhaf davranışları olduğundan bunlardan kaçınmak en iyisidir.
<applet>, 2017'de HTML spesifikasyonundan kaldırılmıştır.
Sonuç
Mevcut iframe spesifikasyonunu kullanarak içeriği herhangi bir web sitesine güvenli bir şekilde yerleştirebilirsiniz. Güvenlik ve stil iyileştirmeleri için <fencedframe> ve <portal> de dahil olmak üzere daha fazla HTML öğesi önerilmiştir. Sınırlanmış Çerçeveler teklifi ile ilgili ilerleme durumunu, süreç ilerledikçe paylaşmaya devam edeceğiz.
Jackson So'nun lokomotif resmi.