如何将POST数据发送到外部框架中的外部页面?

I have problems managing to do what I explained in the title. I was wondering if anyone could help me.

So I will explain it again in more detail:

I have a webpage which contains a form which sends POST data to an external URL(not mysite.com but hissite.com, I hope you got the idea) I used a HTML frame to create a page inside my own website (such as mysite.com/hissite) in order to hide the actual URL of the other website. The problem is that I am not able to pass the form input to hissite.com but through the frame inside my website.

I basically want the following: 1. The user logins on my website. 2. My login form passes the login information to the other website. 3. The user is logged in but instead to be redirected to the other website he is redirected to the frame inside my website which contains the other website.

I do not know how to explain it better, but I hope someone will understand me and help me to finish my project.

I have to mention that the form on my webpage has the same structure(fields, fields names etc) as the form on the other website. So I believed it would be super easy to pass the input through the frame. Well,... I realised it isn't that easy.

Here is the form:

<form action="/home/signin" method="post" name="loginForm" class="large-form" id="loginForm" >
  <fieldset>
    <label for="username">Username</label>
    <input type="text" name="username" tabindex="1" id="username" value="" />
</fieldset>
<fieldset>
  <label for="password">Password</label>
  <input type="password" name="password" tabindex="2" id="password" value="" />
  <input type="hidden" name="themeName" value=""/>
</fieldset>
<br/>
<div id="login-button">
  <input type="submit" value="Log In" tabindex="3" />
</div>

Thank you in advance for your help.

In this case you need to use ajax call, you send the information that you want to the other page and then you can carry on processing the data as you want, simply put a call on form submission as javaScript like:

$.ajax({
        url: siteUrl,
        type: "post",
        async:true,
        dataType: 'json',
        success: function(data){
your function
        },
        error: function(e){
your error function
        }
    });

Short of proxying the third party website, with your approach, this is not possible.

You could:

Use frames normally

This would involve setting the target attribute on the form to the name of the frame, and the action to the third party URL.

This will work so long as the third party site doesn't implement any protection against CSRF attacks on its login form.

This approach will not give you the credentials used to log in (although you could sniff them with JavaScript).

Proxy the entire site

This would involve the same as above, except you set the action to a URL on your site. You would then have to use server side code to make HTTP requests to the third party site (maintaining a per-user cookie jar on your server). For each request you would have to parse each response and change any URLs in HTML, CSS, JavaScript, etc so they continue to work (since relative URIs would fail).


Either way - asking users to enter their credentials for a third party site on yours is a highly suspect request. Credentials like that are supposed to be confidential and not shared.