Persyaratan baru untuk Web Share API di iframe pihak ketiga

Untuk privasi dan keamanan yang lebih baik, panggilan Web Share API di iframe pihak ketiga kini harus diizinkan secara eksplisit.

Artikel ini membahas perubahan yang berpotensi dapat menyebabkan gangguan di Web Share API. Perubahan ini sudah ada di Firefox, akan hadir di Chrome mulai versi 110, dan diperkirakan akan hadir di Safari dalam waktu dekat.

Web Share API memungkinkan Anda berbagi teks, URL, atau file. Dalam bentuk yang paling sederhana, kode berbagi akan terlihat seperti ini:

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

Jika tindakan berbagi perlu terjadi dalam iframe pihak ketiga, perubahan spesifikasi terbaru mengharuskan Anda mengizinkan operasi secara eksplisit. Lakukan ini dengan menambahkan atribut allow ke tag <iframe> dengan nilai web-share. Hal ini memberi tahu browser bahwa situs penyematan mengizinkan iframe pihak ketiga tersemat untuk memicu tindakan berbagi.

<!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>

Anda dapat melihat cara kerjanya dalam demo di Glitch dan melihat kode sumber. Kegagalan memberikan atribut akan menghasilkan NotAllowedError dengan pesan Failed to execute 'share' on 'Navigator': Permission denied. Batasan ini disetujui oleh semua vendor browser untuk meningkatkan privasi dan keamanan pengguna serta mencegah pihak tidak bertanggung jawab, misalnya, iklan yang melanggar, agar tidak memicu tindakan berbagi yang tidak terduga.