Nieuwe vereisten voor de Web Share API in iframes van derden

Voor verbeterde privacy en veiligheid moeten Web Share API-aanroepen in iframes van derden nu expliciet worden toegestaan.

Dit artikel behandelt een mogelijk baanbrekende wijziging in de Web Share API. Deze wijziging zit al in Firefox, komt vanaf versie 110 in Chrome terecht en zal naar verwachting binnenkort ook in Safari terechtkomen.

Met de Web Share API kunt u tekst, URL's of bestanden delen. In de eenvoudigste vorm ziet de deelcode er ongeveer zo uit:

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

Als een deelactie moet plaatsvinden in een iframe van derden, vereist een recente specificatiewijziging dat u de bewerking expliciet toestaat. Doe dit door een allow attribuut toe te voegen aan de <iframe> -tag met de waarde web-share . Dit vertelt de browser dat de insluitingssite het ingebedde iframe van derden toestaat de deelactie te activeren.

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

Je kunt dit in actie zien in een demo op Glitch en de broncode bekijken. Als u het kenmerk niet opgeeft, resulteert dit in een NotAllowedError met het bericht Failed to execute 'share' on 'Navigator': Permission denied . Deze beperking is door alle browserleveranciers overeengekomen om de privacy en veiligheid van gebruikers te verbeteren en om te voorkomen dat slechte actoren, bijvoorbeeld beledigende advertenties, onverwachte deelacties veroorzaken.