Để tăng cường quyền riêng tư và bảo mật, các lệnh gọi Web Share API trong iframe của bên thứ ba hiện cần được cho phép một cách rõ ràng.
Bài viết này đề cập đến một thay đổi có thể gây lỗi trong Web Share API. Thay đổi này đã có trong Firefox, sẽ xuất hiện trong Chrome từ phiên bản 110 và dự kiến sẽ xuất hiện trong Safari trong thời gian tới.
Web Share API 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 cần thực hiện thao tác chia sẻ trong iframe của bên thứ ba, thì thay đổi gần đây về thông số kỹ thuật yêu cầu bạn cho phép rõ ràng thao tác này. Bạn có thể làm việc này bằng cách thêm một thuộc tính allow vào thẻ <iframe> với 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 được nhúng của bên thứ ba 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ế trong bản minh hoạ trên GitHub và xem mã nguồn.
Nếu không cung cấp thuộc tính này, bạn sẽ nhận được NotAllowedError 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 ý với hạn chế này để cải thiện quyền riêng tư và bảo mật của người dùng, đồng thời ngăn chặn các đối tượng xấu (ví dụ: quảng cáo phản cảm) kích hoạt các hành động chia sẻ không mong muốn.