auto login remote site inner in iframe

Question

I have an existing remote site which has Authentication to access, now I want to combine this site in my own site using iframe. Is there any solution which can help to auto login remote site when load the iframe?

<iframe src="http://remote.com/list"></iframe>

If want to access http://remote.com/list, login require and only post username/password works. How to auto login when iframe loaded?

Here are some restriction

• login only works with post method
• iframe / javascript has cross domain issue
• no login API provide
• no other modification can do in remote site

Answer 1

If you own the other site then you can try authentication through some token.

Pass an authorized token to url in the iframe.

Answer 2

Here is my implementation for doing this. This does not solve the cross-domain issue though. For the cross-domain issue, you can try using jQuery's JSONP method (I haven't tried combining jQuery with this solution yet).

<iframe id="MyIFrame" width="400" height="400"></iframe>
<script type="text/javascript">
    var iframeURL = 'http://mysite.com/path/applicationPage.aspx';
    var iframeID = 'MyIFrame';

    function loadIframe(){
        //pre-authenticate
        var req = new XMLHttpRequest();
        req.open("POST",this.iframeURL, false, "username", "password"); //use POST to safely send combination
        req.send(null); //here you can pass extra parameters through

        //setiFrame's SRC attribute
        var iFrameWin = document.getElementById(this.iframeID);
        iFrameWin.src = this.iframeURL + "?extraParameters=true";
    }

    //onload, call loadIframe() function
    loadIframe();   
</script>

Answer 3

Can't be done. Simple as that. The cross domain restrictions are in place quite specifically to stop you from being able to do something like that.

Answer 4

Everything's possible. However the solution below is very insecure due to disclosure of access details to the remote page.

<form id="login" target="frame" method="post" action="http://remote.com/login">
    <input type="hidden" name="username" value="login" />
    <input type="hidden" name="password" value="pass" />
</form>

<iframe id="frame" name="frame"></iframe>

<script type="text/javascript">
    // submit the form into iframe for login into remote site
    document.getElementById('login').submit();

    // once you're logged in, change the source url (if needed)
    var iframe = document.getElementById('frame');
    iframe.onload = function() {
        if (iframe.src != "http://remote.com/list") {
            iframe.src = "http://remote.com/list";
        }
    }
</script>

The values of username and password inputs are readable on the client side.