web-dev-qa-db-ja.com

iframe内のリモートサイトの自動ログイン

アクセスする認証がある既存のリモートサイトがありますが、iframeを使用してこのサイトを自分のサイトに結合したいと思います。 iframeを読み込むときにリモートサイトに自動ログインするのに役立つソリューションはありますか？

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

http://remote.com/list にアクセスしたい場合は、ログインが必要で、投稿のユーザー名/パスワードのみが機能します。 iframeが読み込まれたときに自動ログインする方法は？

ここにいくつかの制限があります

  • ログインはpostメソッドでのみ機能します
  • iframe/javascriptにクロスドメインの問題があります
  • ログインAPIは提供しません
  • リモートサイトで他の変更を行うことはできません
javascripthtmliframeautologin
14
linbo

すべてが可能です。ただし、以下の解決策は、リモートページへのアクセスの詳細が公開されているため、非常に安全ではありません。

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

usernameおよびpassword入力の値は、クライアント側で読み取ることができます。

21
Jakub Hubner

できません。そのような単純な。クロスドメインの制限は、そのようなことを実行できないようにするために特別に設けられています。

4
PhonicUK

これを行うための実装は次のとおりです。ただし、これはクロスドメインの問題を解決しません。クロスドメインの問題については、jQueryの [〜＃〜] jsonp [〜＃〜] メソッドを使用してみることができます（jQueryとこのソリューションをまだ組み合わせて試していません）。

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

他のサイトを所有している場合は、トークンを使用して認証を試すことができます。

承認済みのトークンをiframeのURLに渡します。

3
Subir Kumar Sao