New requirements for the Web Share API in third-party iframes
For improved privacy and security, Web Share API calls in third-party iframes now need to be explicitly allowed.
Published on
Tom is a Developer Advocate
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.
Updated on • Improve article