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
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.
If you own the other site then you can try authentication through some token.
Pass an authorized token to url in the iframe.
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>
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.