iFrame'lerdeki geçiş anahtarları

Eiji Kitamura

Kuruluşlar, birden fazla alan arasında sorunsuz ve bağlam içi kimlik doğrulama sağlamak için genellikle oturum açma sayfalarını iFrame'lere yerleştirir. Ancak, kimlik doğrulama bağlamlarının üçüncü taraf çerçevelerine yüklenmesi, kullanıcıları tıklatma hırsızlığı (kullanıcı arayüzü değiştirme) ve yetkisiz kimlik bilgisi oluşturma gibi kritik tehditlere maruz bırakır. Bu riskleri azaltmak için tarayıcılar, kaynaklar arası iframe'lerde WebAuthn'i varsayılan olarak devre dışı bırakır. Bu kısıtlamanın güvenli bir şekilde kaldırılması için etkin katmanlı savunma protokolleri gerekir.

Tehdit modellerini belirleme

Alt çerçevelerde geçiş anahtarlarını (WebAuthn) etkinleştirmeden önce, savunma yaptığınız kötüye kullanım senaryolarını anlayın:

• Gizli iFrame yerleştirme kullanılarak izleme: Saldırgan, güvenilir bir sitedeki reklam veya widget'ı kullanarak kendi alanından bir WebAuthn istemi tetikler ve kullanıcıları bağlamı görmeden geçiş anahtarı yetkilendirmeye ikna eder. Bu, kullanıcının kimliğini saldırgan tarafından kontrol edilen bir hesaba bağlayarak veri toplama işlemini gerçekleştirir.
• Görsel yer paylaşımı ve tıklama hırsızlığı (kullanıcı arayüzü değişikliği): Kötü amaçlı bir üst sayfa, kimlik doğrulama iFrame'ini standart CSS kullanarak görünmez hale getirir ve kimlik doğrulama akışını tetikleyen bir tıklamayı çalmak için sahte bir kullanıcı arayüzü öğesi yerleştirir. Bu durum, kullanıcı istemi yanlışlıkla tamamladığında oturum ele geçirmeye veya zorla yetkisiz işlemlere yol açabilir.

Bu tehditlere karşı koymak için aşağıdaki en iyi uygulamaları izleyin:

En üst düzeydeki doküman (üst çerçeve) için:

• İzin politikası kullanarak yetki verme özelliğini etkinleştirme

Yerleştirilmiş doküman (iFrame) için:

• Bölümlendirilmiş üçüncü taraf çerezlerini etkinleştirme
• İçerik Güvenliği Politikası ile uç noktayı koruma
• Güvenin ancak sunucu tarafında doğrulayın

Her iki belge için:

• postMessage() kullanılarak güvenli oturum oluşturma

İzin politikası kullanarak yetkilendirmeyi etkinleştirme

Tarayıcılar, kaynaklar arası iframe'lerde WebAuthn'e erişimi varsayılan olarak engeller. İzin Politikası üst düzey bir dokümanın bu güçlü özellikleri belirli ve güvenilir üçüncü taraf kaynaklarına açıkça devretmesine olanak tanıyan birleşik web platformu mekanizmasıdır.

Özellik jetonları

WebAuthn iki farklı jeton kullanır:

• publickey-credentials-get: Geçiş anahtarıyla oturum açma akışları için yetki verir (navigator.credentials.get()).
• publickey-credentials-create: Geçiş anahtarı kayıt akışları için yetki verilir (navigator.credentials.create()).

Etkinleştirme koşulları

Bu özelliklerin etkinleştirilmesi için hem üst sunucu yanıtında hem de istemci tarafı işaretlemesinde uyum sağlanması gerekir:

• Permissions-Policy HTTP yanıt başlığı (üst sunucu sitesi): Üst sayfa, izin verilen kaynakları Yapılandırılmış Alanlar söz dizimini kullanarak HTTP yanıt başlıklarında bildirmelidir.

Permissions-Policy: publickey-credentials-get=(self "https://embedded-auth.example.com")

İzinler Politikası: publickey-credentials-get uyumluluğu:

Browser Support

• 88
• 88
• x
• x

Source

İzin Politikası: publickey-credentials-create uyumluluğu:

Browser Support

• 88
• 88
• x
• x

Source

• HTML allow özelliği: HTML işaretlemesinde, <iframe> öğesi de özelliği etkinleştirdiğini bildirmelidir.

<iframe src="https://embedded-auth.example.com?nonce=deadbeef12345678&client=https%3A%2F%2Fembedded-auth.example.com" allow="publickey-credentials-get"></iframe>

iframe allow="publickey-credentials-get" uyumluluğu:

Browser Support

• 84
• 84
• 118
• x

iframe allow="publickey-credentials-create" uyumluluğu:

Browser Support

• x
• x
• 123
• x

Bölümlenmiş üçüncü taraf çerezlerini etkinleştirme

Güvenilir bir kimlik doğrulama akışı sağlamak için yerleştirilmiş kaynaklar arası iframe'de bir oturum oluşturulmalı ve sürdürülmelidir. Modern tarayıcılar, üçüncü taraf çerezleriyle ilgili katı kısıtlamalara geçiş yaptığından standart kalıcılık mekanizmaları genellikle varsayılan olarak engellenir ve erişim elde etmek için Storage Access API'nin çağrılması gerekebilir.

Bu engelleri azaltmak için oturum çerezlerinizi SameSite: None, Secure ve Partitioned özellikleriyle yapılandırın. Bu birleşik platform mekanizması, tarayıcı düzeyindeki gizlilik kontrollerine saygı gösterirken iframe'de kalıcı durum sağlar.

SameSite: None ayarla

SameSite: None Bir çerezi siteler arası erişim için açıkça işaretler ve üçüncü taraf bağlamından (ör. bir iFrame) yapılan isteklerle gönderilmesine izin verir. Bu özellik, çerezlerin kaynaklar arası senaryolarda işlevsel olması için ön koşuldur. Ancak modern tarayıcılar tarafından kabul edilmesi için Secure özelliğiyle birlikte kullanılması gerekir.

Partitioned ayarla

Partitioned özelliği, çerezi CHIPS (Bağımsız Bölümlendirme Durumuna Sahip Çerezler)'e kaydeder. Bu sayede çerez, her üst düzey site için ayrı ayrı depolanabilir. Bu sayede çerez, belirli üçüncü taraf iFrame bağlamında erişilebilir kalır ve siteler arası izleme etkinleştirilmeden kalıcı oturum durumu sağlanır. Kullanıcının farklı bir sitedeki her yerleştirme için tekrar oturum açması gerekir.

İçerik Güvenliği Politikası ile uç noktayı koruma

İzin Politikası, iFrame'inizin WebAuthn'yi çalıştırıp çalıştıramayacağını belirlerken İçerik Güvenliği Politikası (İGP), iFrame'inizi kimin barındırmasına izin verildiğini belirler.

Kimlik doğrulama uç noktası için yalnızca yetkili iş ortağı sitelerinin veya kendi mülklerinizin giriş alt çerçevesini yükleyebildiğinden emin olmak çok önemlidir. Bu sayede, yetkisiz tıklama korsanlığı girişimleri kullanıcı arayüzünü yükleyemeden engellenebilir.

frame-ancestors hareketini kullanın

frame-ancestors yönergesi sitenizi yerleştirebilecek geçerli üst sayfaları tanımlar. Bu yönergeye alanlar ekleyerek, giriş alt çerçevesinin yerleştirilmesine izin verilen alanlara izin verebilirsiniz.

Content-Security-Policy: frame-ancestors 'self' https://parent-site.example.com;

İçerik Güvenliği Politikası: frame-ancestors uyumluluğu:

Browser Support

• 40
• 15
• 58
• 10

Source

X-Frame-Options ayarla

Eski X-Frame-Options üstbilgisi benzer bir özelliği destekler ancak yalnızca ikili seçenekleri (DENY veya SAMEORIGIN) destekler. Tarayıcı CSP'yi desteklemiyorsa hem CSP frame-ancestors hem de X-Frame-Options: DENY ayarlanmalıdır. CSP, desteklendiği her yerde her zaman önceliklendirilir.

X-Frame-Options: DENY

X-Frame-Options uyumluluğu:

Browser Support

• 4
• 12
• 4
• 4

Source

Not: Tıklama korsanlığına karşı korunmak için Intersection Observer API'yi de kullanabilirsiniz. Bu, CSP frame-ancestors ve X-Frame-Options: DENY üzerinde ikinci koruma katmanı olacaktır.

Güvenin ancak sunucu tarafında doğrulayın

Tarayıcının istemci tarafı kontrolleri, amacı ve izinleri değerlendirir ancak güven konusunda nihai karar verici sunucudur. Bağlı Taraf (RP) sunucusundaki yanıtı doğrulayarak bağlamın geçerli ve imzalı olduğundan emin olun.

İstemci verisi yükü

WebAuthn istemci verileri, özellikle bir iframe'de yapılan isteğin bağlamını doğrulamanıza yardımcı olmak için tasarlanmış parametreler içerir:

• crossOrigin (boolean): WebAuthn API'nin kaynaklar arası bir iframe içinde çağrılıp çağrılmadığını gösterir. Mimariniz iFrame'lere dayanıyorsa sunucunuz bu işaretin true olmasını zorunlu kılmalıdır.
• topOrigin (dize): Üst düzey göz atma bağlamının kaynağı (tarayıcının adres çubuğunda görünen). Sunucu, bunu bilinen ve yetkili üst kaynakların listesine göre doğrulamalıdır.

Doğrulama kontrol listesi

Sunucunuzdaki kimlik doğrulayıcı yanıtını doğrulamak için aşağıdaki adımları uygulayın:

1. Kimlik doğrulayıcı yanıtından imzalı collectedClientData öğesini ayrıştırın ve kodunu çözün.
2. type öğesinin törenle (webauthn.get veya webauthn.create) eşleştiğinden emin olun.
3. Kullanıcı varlığını ve imzayı doğrulayın.
4. İsteğin bir iframe yapısından gelmesi amaçlanıyorsa:
   • crossOrigin === true özelliğini zorunlu kılın.
   • topOrigin'nın, yetkili ebeveyn kaynakları listenizle eşleşmesini zorunlu kılın.

Dikkat: Safari, Mayıs 2026 itibarıyla topOrigin parametresini desteklemeyecek. Bu doğrulamayı atlasanız bile İGP frame-ancestors yönergesini kullanarak üst bağlamı zorunlu kılarak güvenliği korumaya devam edebilirsiniz.

Dikkat: Güvendiğiniz kitaplık da dahil olmak üzere, kaynaklar arası oturum doğrulamasının desteklendiğinden emin olmak için sunucu tarafı uygulamanızı doğrulayın.

postMessage() kullanarak oturumları güvenli bir şekilde oluşturma

Oturumu güvenilir bir şekilde oluşturmak için iframe, kimlik doğrulama jetonunu postMessage() kullanarak üst sayfaya geri iletmelidir. Böylece üst sayfa, oturum durumunu kendi birinci taraf bağlamında yönetebilir.

Güvenli iş akışı

Güvenli bir oturum oluşturmak için şu iş akışını izleyin:

1. iFrame src URL'sinin nonce ve origin sorgu parametrelerini içerdiğinden emin olun:
   • nonce için rastgele bir değer kullanın. nonce, bir iframe'den alınan kimlik doğrulama jetonunun üst sayfa tarafından başlatılan belirli oturumla meşru bir şekilde eşleşmesini sağlamak için güvenlik doğrulama jetonu olarak kullanılır.
   • origin için üst çerçeve alanını kullanın. Bir origin parametresi, üst sayfanın kaynağını belirtir ve iframe'in yerleştirildiği yetkili bağlamı güvenli bir şekilde tanımlamasını sağlar.
2. Iframe, kendi sunucusuyla WebAuthn kimlik doğrulamasını tamamlar.

3. iFrame sunucusu, nonce değerini içeren bir JWT gibi bir jeton yayınlar ve üst sayfaya yönlendirir.

   // Extract nonce and origin from the URL params
   const urlParams = new URLSearchParams(window.location.search);
   const nonce = urlParams.get('nonce');
   const origin = urlParams.get('origin');
   if (!nonce || !origin) {
     alert('Nonce or origin is missing in the URL');
     return;
   }
   
   // Create a JWT
   const response = await post('/createToken', { nonce, origin });
   const token = response.token;
   
   // Post the JWT to the parent frame
   window.parent.postMessage({ token }, origin);
   

4. Üst sayfa message etkinliğini dinler, gönderen kaynağını doğrular ve jetonu onaylar.

   window.addEventListener("message", (event) => {
     if (event.origin !== "https://embedded-auth.example.com") return;
     // Verify the received JWT
     const result = await post('/verifyIdToken', {
       token: event.data.token,
       origin: provider.origin,
     });
   });
   

5. JWT başarıyla doğrulanırsa üst sayfa oturumu kalıcı hale getirir.

Hem gönderen hem de alıcı güvenlik sorumluluklarını paylaşır:

• Gönderen (iFrame): İleti gönderirken her zaman katı bir hedef kaynak belirtin ("*" hiçbir zaman kullanmayın).
• Alıcı (üst öğe): Kaynak sahteciliğini önlemek için mesaj alırken her zaman event.origin simgesini doğrulayın.

Sonuç

Güvenli iframe kullanımı; etkinleştirme için İzin Politikasına, kısıtlama için İGP'ye, oturum kalıcılığı için bölümlendirilmiş üçüncü taraf çerezlerine, istemci bağlamının sunucu tarafı doğrulamasına ve postMessage() kullanılarak bağlama duyarlı oturum aktarımına bağlıdır.

İlgili konular hakkında daha fazla bilgi edinmek için Google'ın Chrome geliştirici blogunu takip edin ve Chrome Geliştirici Kimliği belgelerinde daha fazla kaynak keşfedin.