דרישות חדשות ל-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>

אפשר לראות את הפעולה הזו בהדגמה ב-GitHub ולצפות בקוד המקור. אם לא תספקו את המאפיין, תופיע השגיאה NotAllowedError עם ההודעה Failed to execute 'share' on 'Navigator': Permission denied. כל ספקי הדפדפנים הסכימו להגבלה הזו כדי לשפר את הפרטיות והאבטחה של המשתמשים ולמנוע מגורמים זדוניים, למשל מודעות פוגעניות, להפעיל פעולות שיתוף לא צפויות.