在动态渲染的 iframe 中使用 Apple Pay（同源）

Question

我正在尝试在我创建的 iframe 中使用 Apple Pay，并使用 Javascript 填充其 DOM。

（上下文：我正在开发第三方小部件，网站可以将其嵌入到现有网站中，因此需要隔离 iframe 中的所有内容；还有其他隔离选项，但这就是我们当前使用的）。

据我所知，Apple Pay 有两个要求：

1. 该框架具有安全来源
2. 该框架与页面上的主框架同源。

为了满足这两个要求，我尝试使用以下代码（在Safari中测试）：

const iframe = document.createElement('iframe')
document.body.appendChild(iframe)
// the iframe origin is 'about:blank'
// let's try to fix that
iframe.contentDocument.open()
// Render the DOM content here
iframe.contentDocument.close()
// That seems to set the origin of the iframe to the origin of the caller of `open`

// Test 
const script = iframe.contentDocument.createElement('script')
script.text = `
console.log(location.origin == parent.location.origin)
// true, so iframe origin should be secure now like the parent

console.log(ApplePaySession.supportsVersion(2))
// But it still triggers the following error:
// "InvalidAccessError: Trying to start an Apple Pay session from an insecure document."
`
iframe.contentDocument.head.appendChild(script)

正如您所看到的，尽管文档来源被识别为与父来源相同并且是安全的，但这不起作用。

结论：有什么方法可以在我在第 3 方网站上动态创建的 iframe 中使用 Apple Pay？

任何帮助将不胜感激。

Answer 1

正在研究同一问题。我知道 Safari 17.0 现在允许您将

allow="payment"

添加到 iframe 中以绕过跨源错误。然而，merchantValidation 仍然存在一个问题，即付款未完成并取消了您的会话。