Persyaratan baru untuk Web Share API di iframe pihak ketiga

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

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

Web Share API memungkinkan Anda membagikan 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 dilakukan di iframe pihak ketiga, perubahan spesifikasi terbaru mengharuskan Anda mengizinkan operasi tersebut 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 yang disematkan 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 GitHub dan melihat kode sumber. Jika atribut tidak diberikan, akan terjadi 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, memicu tindakan berbagi yang tidak terduga.