CODEWITHSUNDEEP
javascriptjqueryhtmliframe
rocky
rocky

Reputation: 631

iframe if the user authenticated within iframe than redirect parent window

Scenario -

Site X wants to access Site Y using iframe both were located on a different server.

What achieved till now -

X was able to access Y with iframe by adding

Header always append Content-Security-Policy "frame-ancestors https://X.com/ "; in the .htaccess file of Y.

Problem with Site X -

1. X user uses iframe code to input username and password once clicked on submit X wants the parent window redirected to Y site if the authentication was successful.

(I was only able to redirect the parent window by going through https://help.surveygizmo.com/help/break-out-of-iframe) but not with valid authorization.

2. If 1 is not possible with an iframe can we open Y in a new tab if input data was valid authentication?

3. If both 1,2 fails

I have an idea to implement this approach using Javascript by creating a login HTML form with type=post action=Y.com/checkUserInYdb and creating an endpoint at Y in which username and password can be authenticated and in the response X can know whether it is a valid call or not in order to redirect using AJAX call? However, this idea lacks implementation of iframe on the basis of authentication.

Can anyone suggest the right way to do this?

Upvotes: 0

Views: 2959

Answers (1)

rocky
rocky

Reputation: 631

The way we have implemented the iframe was secure enough as it doesn't store any credential information for cross-origin communication between two servers.

Both applications will communicate with each other using postMessage https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Site X iframe code

<iframe src="https://Y.com/" width="500" height="400" 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>

Site Y Javascript code

<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>

Upvotes: 2

Related Questions