Checkout: Fix modal iframe clipboard permissions (#4453)

* Checkout: Fix modal iframe clipboard permissions 

WebKit-based browser require a [permissions policy](https://web.dev/async-clipboard/#permissions-policy-integration) to be set on the iframe element. See the discussions [here](https://github.com/btcpayserver/btcpayserver/discussions/4308#discussioncomment-4399342) and [on Mattermost](https://chat.btcpayserver.org/btcpayserver/pl/z7kdgidcjtnd8f5zs5648t1dhe).

* Updates from code review
This commit is contained in:
d11n 2022-12-20 14:54:47 +01:00 committed by GitHub
parent 76a953819e
commit e6c68dc5bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 5 deletions

View File

@ -9,17 +9,25 @@ function confirmCopy(el, message) {
}, 2500);
}
window.copyToClipboard = function (e, data) {
window.copyToClipboard = async function (e, data) {
e.preventDefault();
const item = e.target.closest('[data-clipboard]') || e.target.closest('[data-clipboard-target]') || e.target;
const confirm = item.dataset.clipboardConfirmElement
? document.getElementById(item.dataset.clipboardConfirmElement) || item
: item.querySelector('[data-clipboard-confirm]') || item;
const message = confirm.getAttribute('data-clipboard-confirm') || 'Copied';
if (navigator.clipboard) {
navigator.clipboard.writeText(data).then(function () {
confirmCopy(confirm, message);
});
// Check compatibility and permissions:
// https://web.dev/async-clipboard/#security-and-permissions
let hasPermission = true;
if (navigator.clipboard && navigator.permissions) {
try {
const permissionStatus = await navigator.permissions.query({ name: 'clipboard-write', allowWithoutGesture: false });
hasPermission = permissionStatus.state === 'granted';
} catch (err) {}
}
if (navigator.clipboard && hasPermission) {
await navigator.clipboard.writeText(data);
confirmCopy(confirm, message);
} else {
const copyEl = document.createElement('textarea');
copyEl.style.position = 'absolute';

View File

@ -40,6 +40,9 @@
iframe.style.zIndex = '2000';
// Removed, see https://github.com/btcpayserver/btcpayserver/issues/2139#issuecomment-768223263
// iframe.setAttribute('allowtransparency', 'true');
// https://web.dev/async-clipboard/#permissions-policy-integration
iframe.setAttribute('allow', 'clipboard-read; clipboard-write')
var origin = 'http://chat.btcpayserver.org join us there, and initialize this with your origin url through setApiUrlPrefix';
var scriptMatch = thisScript.match(scriptSrcRegex)