Neue Anforderungen für die Web Share API in Drittanbieter-iFrames

Zum besseren Schutz der Privatsphäre und Sicherheit müssen Web Share API-Aufrufe in Drittanbieter-Iframes jetzt ausdrücklich zugelassen werden.

In diesem Artikel wird eine potenziell funktionsgefährdende Änderung der Web Share API behandelt. Diese Änderung ist bereits in Firefox verfügbar, wird in Chrome ab Version 110 eingeführt und wird voraussichtlich bald in Safari verfügbar sein.

Mit der Web Share API können Sie Text, URLs oder Dateien teilen. In seiner einfachsten Form sieht der Freigabecode so aus:

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

Wenn eine Freigabeaktion in einem Drittanbieter-Iframe erfolgen muss, müssen Sie aufgrund einer neueren Spezifikationsänderung die Aktion explizit zulassen. Füge dazu dem <iframe>-Tag ein allow-Attribut mit dem Wert web-share hinzu. Dadurch wird dem Browser mitgeteilt, dass der eingebettete iFrame des Drittanbieters auf der eingebetteten Website die Freigabeaktion auslösen kann.

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

In einer Demo auf Glitch können Sie sich das in Aktion ansehen und den Quellcode ansehen. Wenn Sie das Attribut nicht angeben, erhalten Sie eine NotAllowedError mit der Meldung Failed to execute 'share' on 'Navigator': Permission denied. Diese Einschränkung wurde von allen Browseranbietern vereinbart, um den Datenschutz und die Sicherheit der Nutzer zu verbessern und zu verhindern, dass böswillige Akteure, z. B. durch missbräuchliche Anzeigen, unerwartete Freigabeaktionen auslösen.