Kaynaklar arası iframe'lerde OTP formlarını WebOTP API ile doldurma

WebOTP API artık iframe'lerden OTP alabilir.

Eiji Kitamura
Yi Gu
SMS OTP'leri (tek kullanımlık şifreler), telefon numaralarını doğrulamak için yaygın olarak kullanılır. Örneğin, kimlik doğrulamanın ikinci adımı olarak veya web'deki ödemeleri doğrulamak için kullanılır. Ancak OTP'yi kopyalayıp yapıştırmak veya manuel olarak girmek için tarayıcı ile SMS uygulaması arasında geçiş yapmak, hata yapmayı kolaylaştırır ve kullanıcı deneyimini zorlaştırır.

WebOTP API, web sitelerinin tek kullanımlık şifreyi bir SMS mesajından programatik olarak almasına ve uygulama değiştirmeden tek bir dokunuşla kullanıcılar için forma otomatik olarak girmesine olanak tanır. SMS özel olarak biçimlendirilir ve kaynağa bağlanır. Bu sayede, kimlik avı web sitelerinin OTP'yi çalma olasılığı da azalır.

WebOTP'de henüz desteklenmeyen bir kullanım alanı, bir iFrame içindeki kaynağı hedefliyordu. Bu, genellikle ödeme onayı için, özellikle de 3D Secure ile kullanılır. Çapraz kaynak iframe'leri destekleyen ortak biçime sahip olan WebOTP API, Chrome 91'den itibaren iç içe yerleştirilmiş kaynaklara bağlı OTP'ler sunuyor.

WebOTP API'nin işleyiş şekli

WebOTP API'nin kendisi oldukça basittir:

…
  const otp = await navigator.credentials.get({
    otp: { transport:['sms'] }
  });
…

SMS mesajı, kaynağa bağlı tek kullanımlık kodlarla biçimlendirilmelidir.

Your OTP is: 123456.

@web-otp.example.com #12345

Son satırda, bağlanacak kaynağın başında @, ardından OTP'nin başında # olduğunu göreceksiniz.

Kısa mesaj ulaştığında bir bilgi çubuğu açılır ve kullanıcıdan telefon numarasını doğrulamasını ister. Kullanıcı Verify düğmesini tıkladıktan sonra tarayıcı, OTP'yi otomatik olarak siteye yönlendirir ve navigator.credentials.get() işlemini tamamlar. Web sitesi daha sonra OTP'yi alıp doğrulama sürecini tamamlayabilir.

WebOTP'yi kullanmayla ilgili temel bilgileri WebOTP API ile web'de telefon numaralarını doğrulama başlıklı makaleden öğrenebilirsiniz.

Çapraz kaynak iframe'lerin kullanım alanları

Ödeme senaryolarında, çapraz kaynaklı iframe'deki bir forma OTP girilmesi yaygındır. Bazı kredi kartı veren kuruluşlar, ödeme yapan kişinin kimliğini kontrol etmek için ek bir doğrulama adımı gerektirir. Bu, 3D Secure olarak adlandırılır ve form genellikle ödeme akışının bir parçasıymış gibi aynı sayfadaki bir iframe içinde gösterilir.

Örneğin:

  • Kullanıcı, kredi kartıyla ayakkabı satın almak için shop.example adresini ziyaret eder.
  • Kredi kartı numarası girildikten sonra entegre ödeme sağlayıcı, iframe içinde bank.example tarafından sağlanan bir form gösterir. Bu formda kullanıcıdan, hızlı ödeme için telefon numarasını doğrulaması istenir.
  • bank.example, kullanıcıya kimliğini doğrulamak için girebileceği bir OTP içeren SMS gönderir.

Çapraz kaynak iframe'den WebOTP API'yi kullanma

WebOTP API'yi çapraz kaynaklı bir iFrame'den kullanmak için iki şey yapmanız gerekir:

  • SMS kısa mesajında hem üst çerçeve kaynağına hem de iFrame kaynağına ek açıklama ekleyin.
  • Çapraz kaynak iframe'in doğrudan kullanıcıdan OTP almasına izin vermek için izin politikasını yapılandırın.
WebOTP API within an iframe in action.

Demoyu https://web-otp-iframe-demo.stackblitz.io adresinde kendiniz deneyebilirsiniz.

SMS kısa mesajına bağlı kaynakları ekleme

WebOTP API bir iFrame içinden çağrıldığında SMS kısa mesajı, üst çerçeve kaynağını (önünde @ ile), ardından OTP'yi (önünde # ile) ve iFrame kaynağını (önünde @ ile) içermelidir.

@shop.example #123456 @bank.exmple

İzin politikasını yapılandırma

WebOTP'yi çapraz kaynak iframe'de kullanmak için yerleştiricinin, istenmeyen davranışları önlemek amacıyla otp-credentials izinler politikası aracılığıyla bu API'ye erişim izni vermesi gerekir. Genel olarak bu hedefe ulaşmanın iki yolu vardır:

  • HTTP üstbilgisi aracılığıyla:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • iframe allow özelliği aracılığıyla:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

İzin politikasının nasıl belirtileceğiyle ilgili daha fazla örnek inceleyin.

Uyarılar

İç içe yerleştirme seviyeleri

Şu anda Chrome, yalnızca üst öğe zincirinde en fazla bir benzersiz kaynak bulunan çapraz kaynak iframe'lerden gelen WebOTP API çağrılarını desteklemektedir. Aşağıdaki senaryolarda:

  • a.com -> b.com
  • a.com -> b.com -> b.com
  • a.com -> a.com -> b.com
  • a.com -> b.com -> c.com

b.com'da WebOTP kullanımı desteklenir ancak c.com'da desteklenmez.

Aşağıdaki senaryonun da talep eksikliği ve kullanıcı deneyimi karmaşıklıkları nedeniyle desteklenmediğini unutmayın.

  • a.com -> b.com -> a.com (WebOTP API'yi çağırır)

Birlikte çalışabilirlik

Chromium dışındaki tarayıcı motorları WebOTP API'yi uygulamasa da Safari, input[autocomplete="one-time-code"] desteğiyle aynı SMS biçimini paylaşır. Safari'de, kaynağa bağlı tek seferlik kod biçimi içeren bir SMS, eşleşen kaynakla birlikte ulaştığında klavye, giriş alanına OTP'nin girilmesini önerir.

Nisan 2021 itibarıyla Safari, % kullanan benzersiz bir SMS biçimiyle iframe'i desteklemektedir. Ancak spesifikasyon tartışmasında @ kullanılmasına karar verildiğinden, desteklenen SMS biçiminin uygulanmasının yakın zamanda gerçekleşeceğini umuyoruz.

Geri bildirim

Geri bildiriminiz, WebOTP API'yi daha iyi hale getirmek için çok değerlidir. Bu nedenle, API'yi deneyip düşüncelerinizi bize bildirin.

Kaynaklar