Question

我正在尝试通过iframe向第三方API发送http请求以克服交叉来源错误“在access-control-allow-origin中找不到来源”的问题

第三方API不会在响应标头中返回Origin，并且它们也不接受JSONP http请求，因此我尝试使用iFrame实现此功能。我正在测试简单的html表单，看它是否有效。下面我有父母和子女的HTML。我的Web应用程序拥有Parent和Child。父母向孩子发送消息使用postMessage，然后child向指定的url发出GET请求，并尝试将响应发布到父级。

当我运行此操作时，我在第三方的网络选项卡中看到了响应，但浏览器仍然无法将其发送到iFrame（child.html）。任何人都可以指出我在这里失踪了吗？我想我需要将iFrame定位为与第三方相同的域名。谢谢你的任何建议。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>postMessage Demo: Parent</title>

    <script type="text/javascript">
        window.onload = function () {
            var receiver = document.getElementById("ifrmChild").contentWindow;

            var btn = document.getElementById('send');

            function sendMessage(e) {
                e.preventDefault();
                receiver.postMessage('https://test.computing.com/my-pay/MyPay.do?UserID=8888&Amount=100&Name=Test', '*');
            }

            btn.addEventListener('click', sendMessage);
           
            function ReceiveMessage(evt) {
                alert(evt.data);
            }
			
			window.addEventListener("message", ReceiveMessage, false);
        }
    </script>
</head>
<body>

    <iframe id="ifrmChild" src="receiver.html" frameborder="0" width="500" height="200">
    </iframe>
    <br />

    <p>
        <button id="send">Send Message</button>
    </p>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Child</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <script type="text/javascript">

        window.onload = function () {

            var messageEle = document.getElementById('message');

            function receiveMessage(evt) {
                messageEle.innerHTML = "Message Received: " + evt.data;

                    $.ajax({
                        url: evt.data,
                        type: 'GET',
                        success: function (data, textStatus, jqXHR) {
                            console.log(data);
                            evt.source.postMessage(data, "*");
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            console.log(textStatus + " " + errorThrown);
                            evt.source.postMessage(textStatus, "*");
                        }
                    });
            }

            // Setup an event listener that calls receiveMessage() when the window
            // receives a new MessageEvent.
            window.addEventListener('message', receiveMessage);
        }
	</script>
</head>

<body style="background-color: gray;">
    <h1>Receiver</h1>
    <div id="message"></div>
</body>

</html>

Answer 1

这是iFrame中的一项安全功能，如果域不允许，则不允许劫持。 this Stack Overflow answer给出了一个很好的解释......

您需要控制要嵌入的域以删除/修改它   CORS政策。该域名已明确阻止了Cross-Origin   请求，你无能为力。

这用于避免任何人劫持你想要的任何网站（你可以   在iframe中运行全屏Google，并将广告放在首位   bettergoogle.com，这样的事情。）

编辑：

要解决此问题，您必须在第三方域中托管带有iframe的网页。或者您可以请求第三方域所有者为特定域地址（您的托管域）启用CORS。

如何实现iFrame通信以防止跨源错误？

1 个答案:

编辑：