İçerikleri sitenize güvenli bir şekilde yerleştirin

Yerleştirilmiş içerik, diğer sayfa veya sitelerdeki içerikleri paylaşırken kullanıcıları sitenizde tutmanın en iyi yoludur. Bu, Twitter'ın stil ve biçiminde gösterilen yerleşik bir Tweet kadar küçük olabilir. Kendi sitenize yerleştirilmiş tamamen ayrı bir site kadar büyük olabilir (ör. ziyaretçilerin sitenizden ayrılmadan satın alma işlemi yapabileceği yerleşik bir Shopify mağazası).

İçerik yerleştirirken sitelerimizin güvenliğini sağlamak artık hiç olmadığı kadar önemli.

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ğini eklemek zaten 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.
  • <portal>, daha sorunsuz sayfa geçişleri için önerilir.

Yerleştirdiğiniz içeriğin 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 çeşitli olası değerler vardır.

İzin Politikası

Web için giderek daha güçlü özellikler geliştirildikçe, bunların tümünün 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>

Sınırlandırılmış çerçevelerle yerleştirme

Çitli çerçeve (<fencedframe>), yerleştirilmiş içerik için iframe'e benzer bir önerilen 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, çitle çevrili çerçeveyle paylaşılamaz.

<fencedframe src="https://3rd.party.example"></fencedframe>

Çitli çerçeveler, üst düzey sitelerin verileri bölümlendirmesi gerektiğini öne süren bir Özel Korumalı Alan önerisidir. Özel Korumalı Alan önerilerinin ç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, konuma bağlı olmayan 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ümlerdeki verilerin aynı sayfada gösterilmesi gerektiğinde, daha gizli bir çerçeve için çitli çerçeveler önerilir.

Portallara yerleştirme

Portal (<portal>), bağımsız bir tarama bağlamına sahip, sayfa geçiş deneyimini iyileştirebilecek önerilen bir HTML öğesidir. 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'in geçmişinde, içerik yerleştirmek için önerilen ve oluşturulan çeşitli HTML öğeleri ve API'ler olmuştur. Bir süredir birden fazla <frame> ve <frameset> öğesi içeren siteler oluşturmak yaygındı. 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 o zamandan beri 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 daha sonra <object> öğesiyle 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ı tuhaf davranışları olduğundan bu sürümleri kullanmaktan kaçının. <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.