Question

我在PHP页面中有一个iframe，我试图从iframe中访问父元素，但总是在控制台中出现此错误：

未捕获的DOMException：使用origin阻止了一个帧 https://subdomain.domain.com访问跨域框架。

我已经在Google <?php session_start(); // remove all session variables session_unset(); // destroy the session session_destroy(); //redirect user header("Location:index.php");和Same Origin policy的第一页上阅读了每一个搜索结果，但这似乎并没有解决我的问题。我仍然遇到同样的错误。

这是我到目前为止所做的：

在我的iframe内容中添加了Access-Control-Allow-Origin。
在我的iframe内容中添加了Access-Control-Allow-Origin。

还有其他人有类似的问题吗？我该怎么做才能解决它？

这是我的代码：

document.domain

b.example.com中的脚本

<?php
header('Access-Control-Allow-Origin: https://b.example.com');
?>

<script>
    function receiveMessage(event) {
        if (event.origin !== "https://a.example.com")
            return;
    }
    window.addEventListener("message", receiveMessage, false);
</script>


<div>
    <button title="Close (Esc)" type="button" class="close">×</button>
</div>

<iframe name="myIframe" class="myIframe"
        src="https://b.example.com" width="100%" height="600px"
        frameborder="0" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="">
</iframe>

</div>

Answer 1

无论https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage如何，您都可以在文档和iframe之间实现通信。

在这种情况下，您必须指定父窗口上可用的所有操作。这是一个例子：

父窗口：

<html>
<head>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>
<body>
<script>
    function receiveMessage(event) {
        console.log(event);
        if (event.data.message === 'Hello world') {
            $('#openFeedback').click();
        }
    }
    window.addEventListener("message", receiveMessage, false);
</script>


<div>
    <button title="Close (Esc)" type="button" class="close">×</button>
</div>

<iframe name="myIframe" class="myIframe"
        src="http://b.test.dev" width="100%" height="600px"
        frameborder="0" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="">
</iframe>

</body>
</html>

iframe中的子域名：

<html>
<head>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>
<body>
<script>
    window.parent.postMessage({message: 'Hello world'}, 'http://test.dev');
</script>
</body>
</html>

此外，您应该为您在示例中添加的iframe身份提供一些安全检查。在这种情况下，您不需要添加跨源标题

Access-Control-Allow-Origin和document.domain无法正常工作

1 个答案: