이제 WebOTP API가 iframe 내에서 OTP를 수신할 수 있습니다.
WebOTP API를 사용하면 웹사이트에서 프로그래매틱 방식으로 다음을 수행할 수 있습니다. SMS 메시지에서 일회용 비밀번호를 가져와 입력합니다. 양식을 자동으로 변환하여 있습니다. SMS는 특수한 형식이 지정되고 출처에 바인딩되므로 피싱 웹사이트가 OTP를 도용할 가능성도 있습니다.
WebOTP에서 아직 지원되지 않은 한 가지 사용 사례는 출처를 타겟팅하는 것이었습니다. 표시할 수 있습니다. 일반적으로 결제 확인에 사용됩니다. 특히 결제 확인에 사용됩니다. 3D Secure(3D 보안)를 제공합니다. 공통적인 교차 출처를 지원하는 형식 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를 참조하세요.
교차 출처 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 문자 메시지에 bound-origins 주석 달기
iframe 내에서 WebOTP API를 호출할 때 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는 동일한 SMS 형식을 공유합니다.
input[autocomplete="one-time-code"] 지원이 필요합니다. Safari에서는
출처 제한 일회성 코드 형식이 포함된 SMS가 일치하는
키보드에서 입력 필드에 OTP를 입력하도록 제안합니다.
2021년 4월부터 Safari는
%
그러나 사양 논의가 @를 대신 사용하는 것으로 결론을 내렸으므로
지원되는 SMS 형식의 구현이 통합될 것입니다.
의견
여러분의 의견은 WebOTP API를 개선하는 데 매우 중요합니다. 지금 사용해 보세요. Google에 알려 주세요. 여러분의 의견을 들려주세요.
리소스
사진 제공: rupixen.com(Unsplash 제공)