如果用户在 iframe 中通过身份验证而不是重定向父窗口，则 iframe

Posted 2023-05-09

【中文标题】如果用户在 iframe 中通过身份验证而不是重定向父窗口，则 iframe

【英文标题】：iframe if the user authenticated within iframe than redirect parent window

【发布时间】：2020-07-28 22:30:03

【问题描述】：

场景 -

站点 X 想要使用 iframe 访问站点 Y，两者都位于不同的服务器上。

目前取得的成就 -

X 可以通过添加

来使用 iframe 访问 Y

Header always append Content-Security-Policy "frame-ancestors https://X.com/ ";在Y的.htaccess文件中。

站点 X 的问题 -

1. X 用户在点击提交后使用 iframe 代码输入用户名和密码 X 希望在验证成功后将父窗口重定向到 Y 站点。

（我只能通过https://help.surveygizmo.com/help/break-out-of-iframe 重定向父窗口）但没有有效授权。

2.如果 iframe 不能为 1，如果输入数据是有效的身份验证，我们可以在新选项卡中打开 Y 吗？

3.如果两个1,2都失败了

我有一个想法来使用 javascript 实现这种方法，方法是使用type=post action=Y.com/checkUserInYdb 创建一个登录 html 表单并在 Y 处创建一个端点，其中用户名和密码可以被验证，并且在响应中 X 可以知道它是否是一个有效的调用还是不是为了使用 AJAX 调用重定向？ 但是，这种想法缺乏基于身份验证的 iframe 实现。

任何人都可以提出正确的方法吗？

【参考方案1】：

我们实现 iframe 的方式足够安全，因为它不存储任何用于两台服务器之间跨域通信的凭据信息。

两个应用程序将使用 postMessage 相互通信 https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

网站 X iframe 代码

<iframe src="https://Y.com/"   id='myIframeId'></iframe>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script>
    $('iframe').load(function() 
        var destination = document.getElementById("myIframeId").contentWindow;
        destination.postMessage('iframeLoginRequest','*'); // will pass data from X to Y
    );

</script>

站点 Y Javascript 代码

<script type="text/javascript">
        var eventMethod = window.addEventListener ?
            "addEventListener" :
            "attachEvent";
        var eventer = window[eventMethod];
        var messageEvent = eventMethod === "attachEvent" ?
            "onmessage" :
            "message";
        eventer(messageEvent, function(e) 
            //data you receive from parent is stored inside e.data
            if(e.data == 'iframeLoginRequest')
             $('.testimonial-container').remove();  //remove extra things from login page 
             $('.btnlogin').click(function()
                if($('#Username').val().length > 0 && $('#Password').val().length > 0 && $(".form-group").hasClass("has-error")==false) 
                    jQuery(".form-login-horizontal").attr("target","_blank");
                    jQuery(".form-login-horizontal").submit(); //submit the login form in a new tab parent window
                    return false;
                
             );
            
        );
        </script>