Để cải thiện quyền riêng tư và tính bảo mật, giờ đây bạn cần cho phép rõ ràng các lệnh gọi API Chia sẻ web trong iframe của bên thứ ba.
Bài viết này đề cập đến một thay đổi có thể gây lỗi trong API chia sẻ trên web. Thay đổi này đã có trong Firefox, sẽ ra mắt trong Chrome từ phiên bản 110 và dự kiến sẽ ra mắt trong Safari trong thời gian sớm nhất.
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 một thao tác 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 thao tác đó một cách rõ ràng. Hãy thực hiện việc này bằng cách thêm thuộc tính allow vào thẻ <iframe> với giá trị là web-share. Điều này cho trình duyệt biết rằng trang web nhúng cho phép iframe của 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 cách hoạt động của tính năng này trong một bản minh hoạ trên Glitch và xem mã nguồn.
Nếu không cung cấp thuộc tính này, bạn sẽ thấy NotAllowedError kèm theo thông báo Failed to execute 'share' on 'Navigator': Permission denied. Tất cả nhà cung cấp trình duyệt đều đồng ý với giới hạn này để cải thiện quyền riêng tư và sự an toàn 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 sai trái) kích hoạt các hành động chia sẻ ngoài dự kiến.