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

【问题标题】：How to implement iFrame communication to prevent from cross origin error?如何实现 iFrame 通信以防止跨源错误？
【发布时间】：2018-03-25 20:56:38
【问题描述】：

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

第三方 API 不会在响应标头中返回 Origin，它们也不接受 JSONP http 请求，因此我尝试使用 iFrame 来实现它。我正在测试简单的 html 表单以查看它是否有效。下面我有父子html。我的 Web 应用程序同时拥有父级和子级。父母向孩子发送消息使用 postMessage 然后子级向指定的 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>

【问题讨论】：

无法绕过浏览器内部的 CORS。拥有不起作用的安全性有什么意义。

标签： javascript jquery iframe cross-domain

【解决方案1】：

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

您需要控制要嵌入的域才能删除/修改其 CORS 政策。如果域已明确阻止跨域请求，你无能为力。

这用于避免任何人劫持您想要的任何网站（您可以在 iframe 中运行全屏 Google，并在顶部显示您的广告 Bettergoogle.com，诸如此类）。

编辑：

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

【讨论】：

谢谢。这是否意味着我需要将 iframe 托管在第三方域中？
是的，您必须在第三方域中使用 iframe 托管网页。或者您可以要求第三方域所有者为特定域地址（您的托管域）启用 CORS。如果您得到答案，请考虑标记问题，否则请随时进一步提问。