Xamarin WebView接收iframe消息方案咨询（Apple Pay/Google Play支付场景）

针对托管支付场景（iframe加载第三方支付页），跨平台（iOS/Android）下接收iframe支付结果的核心方案是标准HTML5 postMessage API + 平台WebView原生回调，你尝试的window.external.notify仅适用于Windows平台的WebView（如Edge WebView2），跨平台不通用，下面是具体实现和优化建议：

1. 跨平台通用首选：postMessage API #

这是所有现代WebView（iOS WKWebView、Android WebView、WebView2）都支持的标准方案，安全且可靠：

iframe端（支付页）代码 #

支付完成后，向父窗口（WebView主页面）发送结构化消息，务必指定目标Origin避免安全风险：

// 支付成功/失败后执行
window.parent.postMessage(
  {
    type: "payment_status",
    data: {
      orderId: "ORD_20240501_123456",
      status: "success", // 可选：failure/canceled
      transactionId: "TXN_ABC789"
    }
  },
  "https://your-app-webview-domain.com" // 替换为你的WebView主页面域名，禁止用"*"（风险高）
);

WebView端（原生应用）配置 #

需要在WebView主页面添加JS中转层，再将消息传递给原生代码：

iOS（WKWebView）

1. 实现WKScriptMessageHandler协议处理Native回调：

class PaymentMessageHandler: NSObject, WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        guard message.name == "paymentCallback", let payload = message.body as? [String: Any] else { return }
        // 在这里处理支付结果：更新本地订单、跳转成功页面等
        let orderId = payload["orderId"] as? String
        let status = payload["status"] as? String
        print("收到支付结果：订单\(orderId ?? "")，状态\(status ?? "")")
    }
}

2. 初始化WebView时注册消息监听：

let contentController = WKUserContentController()
contentController.add(PaymentMessageHandler(), name: "paymentCallback")
let config = WKWebViewConfiguration()
config.userContentController = contentController
let webView = WKWebView(frame: view.bounds, configuration: config)

3. WebView主页面的JS中转代码：

window.addEventListener("message", (event) => {
    // 严格验证消息来源，仅信任你的支付处理器域名
    if (event.origin !== "https://your-payment-processor-domain.com") return;
    // 将消息转发给iOS Native
    window.webkit.messageHandlers.paymentCallback.postMessage(event.data);
});

Android（WebView）

推荐使用Android 11+支持的WebMessageListener（比addJavascriptInterface更安全）：

1. 配置WebView并添加监听：

webView.settings.javaScriptEnabled = true
// 仅允许指定支付域名发送消息
val allowedOrigins = setOf("https://your-payment-processor-domain.com")
webView.addWebMessageListener("paymentListener", allowedOrigins) { _, message, _, _, _ ->
    val payload = message.data.toString()
    // 切换到主线程处理UI更新
    runOnUiThread {
        // 处理支付结果：比如跳转订单详情页
        Toast.makeText(this, "支付结果：$payload", Toast.LENGTH_SHORT).show()
    }
}

2. WebView主页面的JS中转代码：

window.addEventListener("message", (event) => {
    if (event.origin !== "https://your-payment-processor-domain.com") return;
    // 将消息转发给Android Native
    window.chrome.webview.postMessage(event.data, "paymentListener");
});

2. 关于window.external.notify的适配 #

这个API仅在Windows平台的Edge WebView2或旧版IE环境中生效，跨平台场景不适用：

• 若你的应用仅面向Windows，可在WebView2中监听WebMessageReceived事件，iframe调用window.external.notify("payment_success|ORD_123456")即可接收消息。

3. 关键安全注意事项 #

• 必须验证消息来源：始终检查event.origin是否为信任的支付处理器域名，防止恶意脚本注入。
• 敏感数据加密：若消息包含交易ID、用户信息等敏感内容，建议采用对称加密后传输。
• 避免使用通配符Origin：禁止在postMessage中用"*"作为目标Origin，仅指定明确的信任域名。

4. 应急 fallback方案（仅当无法修改iframe时使用） #

如果第三方支付页不支持postMessage，可在WebView主页面定期轮询iframe的DOM状态（比如查找支付成功的标识元素），但这种方式效率低且易出错，仅作为临时应急方案：

// 轮询示例：每2秒检查一次iframe状态
const checkPaymentStatus = setInterval(() => {
    const iframe = document.getElementById("payment-iframe");
    if (!iframe) return;
    try {
        const statusElement = iframe.contentWindow.document.querySelector(".payment-status");
        if (statusElement?.textContent === "success") {
            clearInterval(checkPaymentStatus);
            // 通知Native支付成功
        }
    } catch (e) {
        // 跨域访问被阻止时忽略
    }
}, 2000);

内容的提问来源于stack exchange，提问作者Timothy Belvin