이제 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을 방문하여 신용카드로 신발 한 켤레를 구매합니다. - 신용카드 번호를 입력하면 통합 결제 제공업체에서 빠른 결제를 위해 사용자에게 전화번호를 인증하라는 메시지가 표시된
bank.example의 양식을 iframe 내에 표시합니다. bank.example는 사용자가 OTP를 입력하여 신원을 확인할 수 있도록 OTP가 포함된 SMS를 사용자에게 전송합니다.
교차 출처 iframe에서 WebOTP API를 사용하는 방법
교차 출처 iframe 내에서 WebOTP API를 사용하려면 다음 두 가지 작업을 실행해야 합니다.
- SMS 텍스트 메시지에서 상단 프레임 출처와 iframe 출처를 모두 주석 처리합니다.
- 교차 출처 iframe이 사용자로부터 OTP를 직접 수신할 수 있도록 권한 정책을 구성합니다.
https://web-otp-iframe-demo.stackblitz.io에서 직접 데모를 사용해 볼 수 있습니다.
SMS 문자 메시지에 bound-origins 주석 추가
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은 조상 체인에 고유한 출처가 하나 이하인 교차 출처 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를 개선하는 데 큰 도움이 됩니다. WebOTP API를 사용해 보고 의견을 공유해 주세요.
리소스
Unsplash의 rupixen.com 제공 사진