基于React与C# ASP.NET的PTT虚拟支付网关：如何获取iframe支付结果？

我正在用React.js + C# ASP.NET开发PTT虚拟支付网关，按照文档要求，需要在组件中嵌入以下iframe完成支付流程：

<iframe src={https://aeo.ptt.gov.tr/api/Payment/threeDSecure/${code}} height="900px" width="100%"></iframe>

第一步已完成：向指定URL发送包含clientId、ApiUser、密钥等信息及CallbackURL的POST请求，该CallbackURL会在支付完成后接收网关回传的数据。目前有疑问：**能否直接从该iframe获取支付完成后的返回数据？还是必须通过CallbackURL将数据传到后端处理？**另外我在浏览器网络面板的payload标签中能看到支付相关的响应数据，以下是第一步的POST请求代码：

const clientId = ******
const ApiUser = "******"
const rnd = randomGenerator.toString();
const timestamp = moment().format("YYYYMMDDHHmmss");
const ApiPass = "******"
const hashString = ApiPass + clientId + ApiUser + rnd + timestamp;
const hash = SHA512(hashString).toString(enc.Base64);
const callBackUrl = `${import.meta.env.VITE_API}/tests`
const Amount = 5000
const currency = 949

const data = {
    "clientId": clientId,
    "apiUser": ApiUser,
    "rnd": rnd,
    "timeSpan": timestamp,
    "hash": hash,
    "callbackUrl": callBackUrl,
    "amount": Amount,
    "currency": currency
}

const [ThreeDSessionId, SetThreeDSessionId] = useState();
useEffect(() => {
    handleSubmit();
}, []);

const handleSubmit = () => {
    // Perform API request with form data
    axios.post("https://aeo.ptt.gov.tr/api/Payment/threeDPayment", data).then((res) => {
        if (res.data.ThreeDSessionId) {
            SetThreeDSessionId(res.data.ThreeDSessionId)
        }
    })
};

核心结论 #

• 直接从跨域iframe获取数据几乎不可行：PTT支付网关域名与你的前端域名不同，浏览器同源策略会严格限制跨域iframe的JavaScript交互，即便你在网络面板能看到响应记录，前端代码也无法直接捕获这些数据。
• 必须依赖CallbackURL走后端接收流程：这是支付网关的标准设计逻辑，原因包括：
  1. 安全性：支付结果属于敏感数据，直接返回前端存在被篡改风险，通过后端接收并校验签名（若网关提供）可确保数据真实可信。
  2. 可靠性：若用户支付过程中关闭页面，前端无法接收结果，但网关仍会将数据发送至CallbackURL，后端可持久化数据，避免订单状态不一致。

补充建议 #

1. 后端接收Callback数据时，务必按照PTT网关文档要求校验签名或哈希，确认请求来自官方网关而非伪造。
2. 前端可通过轮询后端接口、WebSocket推送等方式，在支付完成后获取后端同步的订单状态，更新页面UI。

内容的提问来源于stack exchange，提问作者Omar Dak Elbab