This article covers a potentially breaking change in the Web Share API. This change is already in
Firefox, will land in Chrome from version 110,
and is expected to land in
Safari soon.
The Web Share API allows you to share
text, URLs, or files. In its simplest form, the share code looks something like this:
try {
await navigator.share({
title: 'Title',
text: 'Text',
url: location.href,
});
} catch (err) {
console.error(`${err.name}: ${err.message}`);
}If a sharing action needs to happen in a third-party iframe, a
recent spec change requires you to explicitly allow the
operation. Do this by adding an allow attribute
to the <iframe> tag with a value of web-share. This tells the browser that the embedding site allows the embedded
third-party iframe to trigger the share action.
<!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>You can see this in action in a demo on Glitch
and view the
source code.
Failing to provide the attribute will result in a NotAllowedError with the message
Failed to execute 'share' on 'Navigator': Permission denied. This limitation was agreed by all
browser vendors to improve the privacy and security of users and to prevent bad actors, for example,
abusive ads, from triggering unexpected share actions.
This post is also available in:
English