ข้อกำหนดใหม่สำหรับ Web Share API ใน iframe ของบุคคลที่สาม

เพื่อปรับปรุงความเป็นส่วนตัวและความปลอดภัย ตอนนี้คุณจะต้องอนุญาตการเรียก Web Share API ใน iframe ของบุคคลที่สามอย่างชัดแจ้ง

บทความนี้กล่าวถึงการเปลี่ยนแปลงที่อาจส่งผลเสียใน Web Share API การเปลี่ยนแปลงนี้มีอยู่ใน Firefox แล้ว และจะอัปเดตใน Chrome จากเวอร์ชัน 110 และคาดว่าจะพร้อมให้บริการใน Safari เร็วๆ นี้

Web Share API ช่วยให้คุณแชร์ข้อความ, URL หรือไฟล์ได้ ในรูปแบบที่ง่ายที่สุด รหัสการแชร์จะมีลักษณะดังนี้

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

หากจำเป็นต้องแชร์ใน iframe ของบุคคลที่สาม คุณต้องอนุญาตการดำเนินการดังกล่าวอย่างชัดแจ้งจากการเปลี่ยนแปลงข้อกำหนดล่าสุด โดยเพิ่มแอตทริบิวต์ allow ลงในแท็ก <iframe> ที่มีค่าเป็น web-share ซึ่งจะบอกเบราว์เซอร์ว่าเว็บไซต์ที่ฝังอนุญาตให้ iframe ของบุคคลที่สามที่ฝังไว้ทริกเกอร์การแชร์

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

คุณดูการทำงานจริงนี้ได้ในการสาธิตเกี่ยวกับ Glitch และดูซอร์สโค้ด การไม่ระบุแอตทริบิวต์จะส่งผลให้ NotAllowedError มีข้อความ Failed to execute 'share' on 'Navigator': Permission denied ผู้ให้บริการเบราว์เซอร์ทั้งหมดยอมรับข้อจำกัดนี้เพื่อปรับปรุงความเป็นส่วนตัวและความปลอดภัยของผู้ใช้ และเพื่อป้องกันไม่ให้ผู้ไม่ประสงค์ดี เช่น โฆษณาที่ไม่เหมาะสม ทำให้เกิดการดำเนินการในการแชร์ที่ไม่คาดคิด