Aus Gründen des Datenschutzes und der Sicherheit müssen Web Share API-Aufrufe in Drittanbieter-Iframes jetzt explizit zugelassen werden.
In diesem Artikel geht es um eine potenziell funktionsgefährdende Änderung in der Web Share API. Diese Änderung ist bereits in Firefox verfügbar, wird ab Chrome 110 eingeführt und soll bald auch in Safari verfügbar sein.
Mit der Web Share API können Sie Text, URLs oder Dateien teilen. In der 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, ist es aufgrund einer neuen Spezifikationsänderung erforderlich, dass Sie den Vorgang explizit zulassen. Fügen Sie dazu dem <iframe>-Tag ein allow-Attribut mit dem Wert web-share hinzu. Dadurch wird dem Browser mitgeteilt, dass die Einbettungswebsite dem eingebetteten Drittanbieter-iFrame erlaubt, die Freigabeaktion auszulösen.
<!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>
Hier finden Sie eine Demo auf GitHub und den Quellcode.
Wenn Sie das Attribut nicht angeben, wird der Fehler NotAllowedError mit der Meldung Failed to execute 'share' on 'Navigator': Permission denied ausgegeben. Diese Einschränkung wurde von allen Browseranbietern vereinbart, um den Datenschutz und die Sicherheit der Nutzer zu verbessern und zu verhindern, dass Akteure mit bösen Absichten, z. B. durch missbräuchliche Anzeigen, unerwartete Freigabeaktionen auslösen.