이 페이지는 Cloud Translation API를 통해 번역되었습니다.

WebOTP API를 사용하여 교차 출처 iframe 내의 OTP 양식 작성

이제 WebOTP API가 iframe 내에서 OTP를 수신할 수 있습니다.

Eiji Kitamura

Yi Gu

SMS OTP(일회용 비밀번호)는 일반적으로 전화번호를 확인하는 데 사용됩니다(예: 인증의 두 번째 단계로 사용하거나 웹에서 결제를 확인하는 경우). 그러나 브라우저와 SMS 앱 간에 전환하거나, 복사하여 붙여넣거나, 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를 직접 수신할 수 있도록 권한 정책을 구성합니다.

작동 중인 iframe 내의 WebOTP API

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 제공 사진