Yêu cầu mới đối với API Chia sẻ web trong iframe của bên thứ ba

Để cải thiện quyền riêng tư và tính bảo mật, bạn cần phải cho phép các lệnh gọi API Chia sẻ web trong iframe của bên thứ ba một cách rõ ràng.

Thomas Steiner

Bài viết này đề cập đến một thay đổi có thể có thể gây lỗi trong API Chia sẻ web. Thay đổi này đã có trong Firefox, sẽ áp dụng trong Chrome từ phiên bản 110 và dự kiến sẽ sớm ra mắt trong Safari.

API Chia sẻ web cho phép bạn chia sẻ văn bản, URL hoặc tệp. Ở dạng đơn giản nhất, mã chia sẻ sẽ có dạng như sau:

try {
  await navigator.share({
    title: 'Title',
    text: 'Text',
    url: location.href,
  });
} catch (err) {
  console.error(`${err.name}: ${err.message}`);
}

Nếu hành động chia sẻ cần diễn ra trong iframe của bên thứ ba, thì thay đổi gần đây về thông số kỹ thuật sẽ yêu cầu bạn cho phép thực hiện thao tác này một cách rõ ràng. Bạn có thể thực hiện việc này bằng cách thêm thuộc tính allow vào thẻ <iframe> có giá trị web-share. Điều này cho trình duyệt biết rằng trang web nhúng cho phép iframe bên thứ ba được nhúng kích hoạt thao tác chia sẻ.

<!DOCTYPE html>
<html lang="en">
  <body>
    <h1>Web Share in third-party iframes</h1>
    <!-- The embedding page is hosted on https://example.com/index.html. -->
    <iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>
  </body>
</html>

Bạn có thể xem ví dụ thực tế ở bản minh hoạ về Glitch và xem mã nguồn. Nếu không cung cấp thuộc tính này, NotAllowedError sẽ kèm theo thông báo Failed to execute 'share' on 'Navigator': Permission denied. Tất cả các nhà cung cấp trình duyệt đều đồng ý giới hạn này nhằm cải thiện quyền riêng tư và tính bảo mật của người dùng, đồng thời để ngăn các đối tượng xấu (ví dụ: quảng cáo lạm dụng) kích hoạt hành động chia sẻ không mong muốn.