이제 WebOTP API가 iframe 내에서 OTP를 수신할 수 있습니다.
WebOTP API는 웹사이트를 통해 SMS 메시지에서 프로그래매틱 방식으로 일회용 비밀번호를 가져와 앱을 전환하지 않고 탭 한 번으로 사용자를 위해 양식에 자동으로 입력할 수 있는 기능을 제공합니다. SMS는 특수한 형식으로 되어 있으며 출처에 바인딩되므로 피싱 웹사이트에서 OTP를 도용할 가능성도 완화합니다.
WebOTP에서 아직 지원되지 않는 한 가지 사용 사례는 iframe 내부의 출처를 타겟팅하는 것이었습니다. 이는 일반적으로 결제 확인에 사용되며, 특히 3D Secure에서 사용됩니다. 교차 출처 iframe을 지원하는 공통 형식을 갖춘 WebOTP API는 이제 Chrome 91부터 중첩된 출처에 바인딩된 OTP를 전송합니다.
WebOTP API 작동 방식
WebOTP API 자체는 매우 간단합니다.
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
…
SMS 메시지는 출처에 바인딩된 일회성 코드로 형식이 지정되어야 합니다.
Your OTP is: 123456.
@web-otp.glitch.me #12345
마지막 줄에는 앞에 붙는 @, OTP, #이 앞에 오는 출처가 포함됩니다.
문자 메시지가 도착하면 정보 표시줄이 나타나고 사용자에게 전화번호를 확인하라는 메시지가 표시됩니다. 사용자가 Verify 버튼을 클릭하면 브라우저가 자동으로 OTP를 사이트에 전달하고 navigator.credentials.get()를 확인합니다. 그러면 웹사이트에서 OTP를 추출하여 인증 절차를 완료할 수 있습니다.
WebOTP API로 웹에서 전화번호 확인하기에서 WebOTP 사용의 기본사항을 알아보세요.
교차 출처 iframe 사용 사례
결제 시나리오에서는 교차 출처 iframe 내 양식에 OTP를 입력하는 것이 일반적입니다. 일부 신용카드 발급기관은 지불자의 진위 여부를 확인하기 위해 추가 인증 단계를 요구합니다. 이를 3D Secure라고 하며 양식은 일반적으로 결제 흐름의 일부인 것처럼 동일한 페이지의 iframe 내에 노출됩니다.
예를 들면 다음과 같습니다.
- 사용자가 신용카드로 신발을 구매하기 위해
shop.example에 방문합니다. - 신용카드 번호를 입력하면 통합 결제 시스템 공급자는 iframe 내에서
bank.example의 양식을 표시하여 빠른 결제를 위해 사용자에게 전화번호 인증을 요청합니다. bank.example는 사용자가 본인 확인을 위해 입력할 수 있도록 OTP가 포함된 SMS를 사용자에게 전송합니다.
교차 출처 iframe에서 WebOTP API를 사용하는 방법
교차 출처 iframe 내에서 WebOTP API를 사용하려면 다음 두 가지 작업을 실행해야 합니다.
- SMS 문자 메시지에서 최상위 프레임 출처와 iframe 출처에 모두 주석을 추가합니다.
- 교차 출처 iframe에서 사용자로부터 직접 OTP를 수신할 수 있도록 권한 정책을 구성합니다.
https://web-otp-iframe-demo.stackblitz.io에서 데모를 직접 사용해 볼 수 있습니다.
SMS 문자 메시지에 바인드된 출처에 주석 추가
WebOTP API가 iframe 내에서 호출되면 SMS 텍스트 메시지는 최상위 프레임 출처, 앞에 @, OTP, #, iframe 출처, @를 차례로 포함해야 합니다.
@shop.example #123456 @bank.exmple
권한 정책 구성
교차 출처 iframe에서 WebOTP를 사용하려면 삽입기가 의도치 않은 동작을 방지하기 위해 otp-credentials 권한 정책을 통해 이 API에 대한 액세스 권한을 부여해야 합니다. 일반적으로 다음과 같은 두 가지 방법으로 이 목표를 달성할 수 있습니다.
- HTTP 헤더를 통해:
Permissions-Policy: otp-credentials=(self "https://bank.example")
- iframe
allow속성 사용:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>
권한 정책을 지정하는 방법에 관한 더 많은 예 를 참고하세요.
주의사항
수습 기간 수준
현재 Chrome은 상위 체인에 고유한 출처가 2개 이하인 교차 출처 iframe에서의 WebOTP API 호출만 지원합니다. 다음 시나리오는 다음과 같습니다.
- a.com -> b.com
- a.com -> b.com -> b.com
- a.com -> a.com -> b.com
- a.com -> b.com -> c.com
b.com에서 WebOTP를 사용하는 것은 지원되지만 c.com에서는 사용할 수 없습니다.
다음 시나리오도 수요 부족 및 UX 복잡성으로 인해 지원되지 않습니다.
- a.com -> b.com -> a.com (WebOTP API 호출)
상호 운용성
Chromium 이외의 브라우저 엔진은 WebOTP API를 구현하지 않지만 Safari는 input[autocomplete="one-time-code"] 지원과 동일한 SMS 형식을 공유합니다. Safari에서는 출처에 바인딩된 일회성 코드 형식이 포함된 SMS가 일치하는 출처와 함께 도착하는 즉시 키보드에서 OTP를 입력 필드에 입력하도록 제안합니다.
2021년 4월부터 Safari는 %를 사용하는 고유 SMS 형식으로 iframe을 지원합니다.
하지만 사양 논의에서 @를 대신 사용하기로 결정되었으므로 지원되는 SMS 형식의 구현이 수렴되기를 바랍니다.
의견
보내주신 의견은 WebOTP API를 개선하는 데 큰 도움이 됩니다. 계속하여 사용해 보시고 의견을 알려주세요.
자료
사진: rupixen.com(Unsplash 제공)