Cross domain form submission via iframe, without server side controls - javascript

I'm attempting to set up a same-page form submission mechanism for a client website. Their forms submit to a handler page which is on a different domain, so I cannot submit via ajax. Previously I have had success cloning my form into an iframe and submitting that (I don't need to retain control of the iframe, and I don't need to verify receipt, just post the data) but that is now being blocked in Chrome.
It would be relatively trivial to add cross-domain headers if I had control of the servers involved, but I don't.
Is there any way to resolve this, or do I have to tell my client that the method I was using is no longer available and they have no options without making server-side changes?

There's no need to clone the form. Just set target="iframe_name" on the <form> element.

Just target the iframe.
You can change form's target and action dynamically, if for example you need to reuse it for some other submission.
<form target="IFRAME_NAME">...

Related

implement post url in IFrame

How can I make a POST request to some URL (see my code below) in Javascript ?
My code so far doesn't work and I actually need to put it into an iFrame (having its with and height set to 0) to prevent the main page to reload.
$(document).ready(function(){
$("button").click(function(){
$.post(
"http://control.msg91.com/api/sendotp.php?otp_length=4&authkey=xxx&message=Your OTP is ##OTP##&sender=OTPSMS&mobile=xxx&otp_expiry=2"
, function(data){
alert(data);
});
});
});
If you want to use an iframe, then do not use XMLHttpRequest (NB $.post is a jQuery that wraps around XMLHttpRequest).
Create a <form>. Set its action to the URL. It's method to POST and its target to the ID of the <iframe>.
Put the data in that form. Then submit it.
If you want to do this entirely with JavaScript, then you can create the form using DOM and with entirely hidden inputs so that nothing shows up in the existing page. Ensure that you append the form to the document as some browsers will not let you submit forms that aren't part of the document.
That said, since you want an iframe with no dimensions, it seems odd to want to use an iframe at all.
You might be trying to work around CORS limitations, but you should be able to use the code you are using to make a request successfully. You just won't be able to tell if it was successful or not (because the restrictions are on reading the response). If you used an iframe, you would have the same limitations.
If you want to suppress the error message that is shown in the console, you could use fetch with mode: "no-cors". You still wouldn't be able to read the response though.
Make sure you are not hitting an issue with CORS. Unless the resource you are hitting allows exceptions to the cross-origin policy, you will not be able to access it if your webpage is not located on control.msg91.com.

Prevent form redirect after submit without ajax

I have a form in my html which has an action url to different domain. After submit, it redirects the browser. I want it to be submitted but not redirected to another page. I know i can submit it with Ajax but since the domain is different it gives CORS error. I cannot mirror request in my own php file because form submission is made by virtual credit card payment system and it doesn't allow you to mirror it.
So, is there any way to submit form but prevent redirect without using ajax. As i know, it's impossible to make a request to different domain with ajax.
Solution 1
AJAX is possible across domains. You need the destination domain to set the appropriate headers on the response.
Access-Control-Allow-Origin: yourdomain.com
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Headers: [anything else you might send]
return false from your ajax call or call preventDefault() to prevent the browser from redirecting the page.
Solution 2
Submit to your own server side code and emulate the transaction. However, you mentioned that they don't allow you to mirror it and I don't have details to address this problem. You can submit to your own server either AJAX (without CORS issues and no headers necessary) or normal POST.
Solution 3
Submit it to their server but have their server redirect back to a page on your own site.
Usually there is a way to set this up through whatever API control panel they give you.
Once again, without specific details, I can't directly address the problem
Solution 4
Load up the data in an iframe and submit in the iframe. This may have issues depending on the value of X-Frame-Options or if they have some sort of CSRF token but you should be able to POST a form in the iframe without redirecting the main page. The iframe can be hidden as well and submitted via JS (use submit() method on form--ajax not required)
New
I would imagine you can do something with an iFrame.
So the logic would be:
Have an empty <div> with display:none;
Have a <form action='self.php'>
Submit and preventDefault()
Build a URL with a querystring
Preferably a totally different page newself.php?var1=something&var2=anotherthing
Append an <iframe> to the hidden <div> with the URL+querystring
$('div').append('<iframe src="newself.php?var1=something&var2=anotherthing"><iframe>");
Get stuff from URL and build replica form
Give newself.php some JS to automatically submit the form to the API URL upon document load
Clear the hidden <div> of it's contents to await a new submission
Original
I am leaving this here because someone upvoted while I edited lol
In order to submit to a different domain they would have to open up their server to accept cross-domain POSTs.
So here the logic that you should be looking into:
AJAX submit to your PHP file and do e.preventDefault()
Use PHP to cURL the POST vars to the other domain. SO cURL Questions
Wait for response from other domain
Send a "yay" or "nay" back to your AJAX call
If the main goal is to keep the visitor on your website and submit visitor input to a third party website, you could submit the form to a local php script that performs a cUrl to the third party website.
That way, the data is posted 'under water' without showing all post parameters to your visitors and you get to keep your visitor on your own website.
The only thing is that your payment provider will probably redirect you to different pages depending on the payment result (succes/failure/unreacheable).

How to redirect page on form submission

I have a form that I would like to submit. Once done redirect the page to another. However currently it is not working for me.
<form name="myname" method="post" action="actionurl" onsubmit="gotonext()">
function gotonext(){
var portalpath = window.location.pathname;
var myredirect = portalpath +"?uP_fname=msu/survey&command=display&sid=162";
alert(myredirect);
window.location.href = myredirect;
}
So the alert displays the correct url that I am seeking to go to. And the form submits the data to the correct actionurl. What is not working is the redirect.
Any ideas on where I might be going wrong?
Well, it's a bit more complicated. The problem is when the form is submitted, the client basically already starts processing a new request by URL specified in the form's action attribute.
One usual workaround is to use AJAX to submit the form, then trigger the redirect in that AJAX request's callback. That's easier, but has obvious limitations: AJAX requests won't cross domains.
Another approach (that might be useful in your case) is the following:
create a hidden iframe on the page with the form.
set the form's target attribute to that iframe's name
set onload event handler on this iframe, and trigger redirect in this handler.
Here's proof of concept.

Form Headers Prior to Postback

I have a submit input in a form with an onclick method. The onclick method correctly adjusts the action of the form and allows the form to submit (submission is handled naturally, not through a javascript submit). What I need to do is add a http request header (X-Requested-With = XMLHttpRequest to be exact). Is there a way to ensure the form post is sent with that header? The post cannot be submitted via javascript using the form.submit() method.
According to this answer what you're asking for is impossible in its current form. However you could modify where the form submits too. For example POST to:
www.mysite.com/XMLHttpRequest or www.mysite.com/NormalRequest
so that the server understands the context of the request.

How to adjust form values sent to iframe without showing changes to a user?

I'm sending form data to an iframe (<form target="myIframe" ... >) because I need to upload a file and because I don't want to reload the page.
The problem is that I need to encrypt some data of the form. Surely I can replace values in form with encrypted values but it would not be really user-friendly. Is there some kind of callback to adjust the data of submitted form in javascript/jQuery?
Thanks!
Just use SSL.
<form action="https://..."
You need to load the page that displays the form via SSL to, otherwise it can be interfered with by a man-in-the-middle attack.

Categories