How can I stop a form.submit() from redirecting me to another page?

Question

I'm building a Web App and I am required to make some form of Cross-Domain POST request to a server which I don't personally have access to.

I've tried many things to make it work with Ajax but I found no success. I did a bit of research and eventually I eventually found a solution which was to create an invisible iframe with a form, then submit the said form to get back the information I require.

However, this form is created in javascript, so I use the form.submit() method to submit the said form, and this, rather than simply giving me the JSON file with the information I require, redirects me to the actual JSON file in a different page altogether.

How can I prevent this from happening?

    var ifr = document.createElement('iframe');
    var frm = document.createElement('form');
    frm.setAttribute("id", "invis_form");
    frm.setAttribute("action", endpoint);
    frm.setAttribute("method", "post");

    var x = document.createElement("INPUT");
    x.setAttribute("type", "text");
    x.setAttribute("name", "chave");
    x.setAttribute("value", apikey);

    var y = document.createElement("INPUT");
    y.setAttribute("type", "text");
    y.setAttribute("name", "valor");
    y.setAttribute("value", "125");

    frm.appendChild(x);
    frm.appendChild(y);

    ifr.appendChild(frm);
    document.body.appendChild(ifr);
    frm.submit();

I was expecting to get something I could print on the console, not to be redirected to a JSON file with the information I need.

What you're describing is basically XSS and the problems you've been having trying to make it work with AJAX is absolutely intentional to prevent XSS attacks. — Niet the Dark Absol, Jan 25 '19 at 11:26
I meant CSRF didn't I? Too many acronyms to keep track of XD — Niet the Dark Absol, Jan 25 '19 at 11:28
CSRF is another different class of attack. I don't think this one has a name because it is basically impossible. It just runs straight into the same origin policy and bounces off. — Quentin, Jan 25 '19 at 11:30

score 2 · Answer 1 · answered Jan 25 '19 at 11:27

The act of submitting a form triggers browser navigation to the response returned from the HTTP request.

The only way to stop it replacing the current page is to make the navigation happen elsewhere (e.g. in a frame or new window) with target … but then cross-origin security would prevent you from reading the data with JavaScript.

You can't use a form to read data from a remote site for the same reasons you can't use Ajax to do it.

The browser is designed to stop your JavaScript from reading data that someone else's website is willing to share with the owner of the browser.

If the data is public (i.e. doesn't need the user to log in, be on the same LAN, or anything similar) then use server-side technology to read it (you can proxy it to the browser).

But I still have access to the information from the POST. https://i.imgur.com/HIeMsm5.png It's just that I am redirected straight to it, rather than simply getting it as a variable or something I can print in the console. — Rui, Jan 25 '19 at 11:36
@Rui — You, the owner of the browser which make the HTTP request, does. You, the writer of the JavaScript, does not. — Quentin, Jan 25 '19 at 11:36

score 0 · Answer 2 · answered Jan 25 '19 at 15:42

Figured out you can add https://cors-anywhere.herokuapp.com/ to your endpoint and it will just work, even with Ajax requests.

Example

var apikey = "my-api-key";
var cors = "https://cors-anywhere.herokuapp.com/";
var endpoint = "https://test/example";
$.ajax({
        type: "POST",
        url: cors + endpoint + "/create",
        crossDomain: true,
        dataType: 'json',
        data: {
            'chave': apikey,
            'valor': 125.00
        },

        success: function (data) {
            console.log(data);
        },
        error: function (error) {
            console.log(error);
        },

    });

How or why this works? I have no clue.

How can I stop a form.submit() from redirecting me to another page?

2 Answers2