Điền biểu mẫu OTP trong iframe nhiều nguồn gốc bằng API WebOTP

API WebOTP hiện có thể nhận OTP từ bên trong iframe.

Eiji Kitamura
Yi Gu
OTP qua SMS (mật khẩu một lần) thường được dùng để xác minh số điện thoại, chẳng hạn như làm bước thứ hai trong quy trình xác thực hoặc để xác minh các khoản thanh toán trên web. Tuy nhiên, việc chuyển đổi giữa trình duyệt và ứng dụng SMS để sao chép-dán hoặc nhập mã OTP theo cách thủ công dễ gây ra lỗi và làm giảm trải nghiệm người dùng.

API WebOTP cho phép các trang web lấy mật khẩu một lần theo phương thức lập trình từ tin nhắn SMS và tự động nhập mật khẩu đó vào biểu mẫu cho người dùng chỉ bằng một lần nhấn mà không cần chuyển đổi ứng dụng. Tin nhắn SMS được định dạng đặc biệt và liên kết với nguồn gốc nên cũng giảm thiểu khả năng các trang web lừa đảo đánh cắp OTP.

Một trường hợp sử dụng chưa được hỗ trợ trong WebOTP là nhắm mục tiêu một nguồn gốc bên trong iframe. Phương thức này thường dùng để xác nhận thanh toán, đặc biệt là với chiến dịch Bảo mật 3D. Với định dạng phổ biến để hỗ trợ các iframe trên nhiều nguồn gốc, API WebOTP hiện phân phối các OTP được liên kết với các nguồn gốc lồng nhau kể từ Chrome 91.

Cách hoạt động của API WebOTP

Bản thân API WebOTP khá đơn giản:

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

Tin nhắn SMS phải được định dạng bằng mã một lần liên kết với nguồn gốc.

Your OTP is: 123456.

@web-otp.glitch.me #12345

Lưu ý rằng ở dòng cuối cùng, mã này chứa nguồn gốc cần liên kết, trước đó là @, theo sau là OTP, trước đó là #.

Khi tin nhắn văn bản đến, một thanh thông tin sẽ bật lên và nhắc người dùng xác minh số điện thoại của họ. Sau khi người dùng nhấp vào nút Verify, trình duyệt sẽ tự động chuyển tiếp OTP đến trang web và phân giải navigator.credentials.get(). Sau đó, trang web có thể trích xuất OTP và hoàn tất quy trình xác minh.

Tìm hiểu kiến thức cơ bản về cách sử dụng WebOTP tại bài viết Xác minh số điện thoại trên web bằng API WebOTP.

Các trường hợp sử dụng iframe nhiều nguồn gốc

Việc nhập mã OTP vào một biểu mẫu trong iframe nhiều nguồn gốc là phổ biến trong các trường hợp thanh toán. Một số tổ chức phát hành thẻ tín dụng yêu cầu thêm một bước xác minh để kiểm tra tính xác thực của người thanh toán. Phương thức này được gọi là 3D Secure và biểu mẫu thường hiển thị trong một iframe trên cùng một trang như thể là một phần của quy trình thanh toán.

Ví dụ:

  • Người dùng truy cập vào shop.example để mua một đôi giày bằng thẻ tín dụng.
  • Sau khi nhập số thẻ tín dụng, nhà cung cấp dịch vụ thanh toán tích hợp sẽ hiển thị một biểu mẫu từ bank.example trong một iframe yêu cầu người dùng xác minh số điện thoại để thanh toán nhanh.
  • bank.example gửi một tin nhắn SMS chứa OTP cho người dùng để họ có thể nhập OTP nhằm xác minh danh tính.

Cách sử dụng API WebOTP từ một iframe trên nhiều nguồn gốc

Để sử dụng API WebOTP từ trong một iframe nhiều nguồn gốc, bạn cần làm hai việc:

  • Chú thích cả nguồn gốc khung trên cùng và nguồn gốc iframe trong thông báo văn bản qua SMS.
  • Định cấu hình chính sách quyền để cho phép iframe trên nhiều nguồn gốc nhận trực tiếp OTP từ người dùng.
WebOTP API trong một iframe đang hoạt động.

Bạn có thể tự mình dùng thử bản minh hoạ tại https://web-otp-iframe-demo.stackblitz.io.

Chú thích nguồn gốc liên kết trong tin nhắn văn bản SMS

Khi API WebOTP được gọi từ bên trong iframe, tin nhắn văn bản SMS phải bao gồm nguồn gốc khung hình trên cùng đứng trước @, theo sau là OTP đứng trước # và theo sau là gốc iframe đứng trước @.

@shop.example #123456 @bank.exmple

Định cấu hình Chính sách về quyền

Để sử dụng WebOTP trong một iframe nhiều nguồn gốc, trình nhúng phải cấp quyền truy cập vào API này thông qua chính sách về quyền của thông tin xác thực otp để tránh hành vi ngoài ý muốn. Nhìn chung, có hai cách để đạt được mục tiêu này:

  • qua Tiêu đề HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • thông qua thuộc tính allow của iframe:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

Xem ví dụ khác về cách chỉ định một chính sách quyền .

Chú ý

Các cấp độ lồng ghép

Hiện tại, Chrome chỉ hỗ trợ các lệnh gọi API WebOTP từ các iframe trên nhiều nguồn gốc có không quá một nguồn gốc duy nhất trong chuỗi đối tượng cấp trên. Trong các trường hợp sau:

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

sử dụng WebOTP trong b.com được hỗ trợ nhưng sử dụng WebOTP trong c.com thì không được hỗ trợ.

Xin lưu ý rằng trường hợp sau đây cũng không được hỗ trợ do thiếu nhu cầu và độ phức tạp về trải nghiệm người dùng.

  • a.com -> b.com -> a.com (gọi WebOTP API)

Khả năng tương tác

Mặc dù các công cụ trình duyệt khác ngoài Chromium không triển khai API WebOTP, nhưng Safari lại có cùng định dạng SMS với tính năng hỗ trợ input[autocomplete="one-time-code"]. Trong Safari, ngay khi một tin nhắn SMS chứa định dạng mã một lần liên kết với nguồn gốc đến với nguồn gốc đã so khớp, bàn phím sẽ đề xuất nhập OTP vào trường nhập.

Kể từ tháng 4 năm 2021, Safari sẽ hỗ trợ iframe với một định dạng SMS duy nhất sử dụng %. Tuy nhiên, khi cuộc thảo luận về thông số kỹ thuật kết thúc với @, chúng tôi hy vọng việc triển khai định dạng SMS được hỗ trợ sẽ hợp nhất.

Phản hồi

Ý kiến phản hồi của bạn rất có giá trị trong việc cải thiện API WebOTP. Vì vậy, hãy dùng thử API này và cho chúng tôi biết suy nghĩ của bạn.

Tài nguyên

Ảnh của rupixen.com trên Unsplash