Nowe wymagania dotyczące interfejsu Web Share API w elementach iframe innych firm

Aby zwiększyć prywatność i bezpieczeństwo, wywołania interfejsu Web Share API w ramkach iframe innych firm muszą być teraz wyraźnie dozwolone.

Z tego artykułu dowiesz się o potencjalnie niekompatybilnej zmianie w interfejsie Web Share API. Ta zmiana jest już dostępna w Firefoksie, zostanie wprowadzona w Chrome od wersji 110, a wkrótce trafi do Safari.

Interfejs Web Share API umożliwia udostępnianie tekstu, adresów URL i plików. W najprostszej formie kod udostępniania wygląda tak:

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

Jeśli udostępnianie ma się odbywać w ramce iframe zewnętrznej, niedawna zmiana specyfikacji wymaga wyraźnego zezwolenia na tę operację. Aby to zrobić, dodaj atrybut allow do tagu <iframe> z wartością web-share. Informuje przeglądarkę, że witryna, na której znajduje się element iframe, zezwala na wywołanie funkcji udostępniania przez wstawiony iframe innej firmy.

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

Możesz to zobaczyć w wersji demonstracyjnej w Glitch i wyświetlić kod źródłowy. Jeśli nie podasz tego atrybutu, otrzymasz NotAllowedError z komunikatem Failed to execute 'share' on 'Navigator': Permission denied. To ograniczenie zostało uzgodnione przez wszystkich dostawców przeglądarek w celu poprawy prywatności i bezpieczeństwa użytkowników oraz zapobiegania nieuczciwym podmiotom, np. reklamom z nadużyciami, aby nie powodowały nieoczekiwanych działań związanych z udostępnianiem.