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

Für mehr Datenschutz und Sicherheit müssen Web Share API-Aufrufe in Drittanbieter-iFrames jetzt explizit zugelassen werden.

Thomas Steiner

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

Mit der Web Share API können Sie Text, URLs oder Dateien teilen. In der einfachsten Form sieht der Freigabecode in etwa 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 den Vorgang bei einer kürzlich erfolgten Spezifikationsänderung explizit zulassen. Fügen Sie 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 einbettenden Website die Aktion zum Teilen 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>

Sie können dies in einer Demo zu Glitch in Aktion sehen und sich den Quellcode ansehen. Wenn das Attribut nicht angegeben wird, wird ein NotAllowedError mit der Meldung Failed to execute 'share' on 'Navigator': Permission denied zurückgegeben. 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. missbräuchliche Anzeigen) unerwartete Freigabeaktionen auslösen.