Redirecting URL With Token Parameter That Contains '+'

Question

I'm having issues creating a redirect to an URL from an API that I'm using within my application. I request a session token which is used in the redirect URL, but I experience issues when the token contains a + in it. My guess is that the browser is picking this up as a space instead of an actual token character which is causing the redirect to fail ever so often.

Here is an example token that can come back from a request to the API: 1w5OX65MRj+3J9R5AXjMWQLAAXIo5TXa

Looking at the network tab I see that it tries to request the redirect with this token instead: 1w5OX65MRj 3J9R5AXjMWQLAAXIo5TXa, which would be why it's causing issues.

I tried replacing the + with %2B but it seems like my application isn't replacing it at all which is a little odd to me.

Here is my code:

let token = "";

        $.get('/_token_req', {contentType: "application/x-www-form-urlencoded"}, (response) => {
            //console.log(response);
            token = response;
            token = token.replace(/\+/g, "%2B");  // this doesn't replace the + character for some reason

            $.get('/_redirect', {token: response}, (response) => {
                //console.log(response);
                if(response == "OK"){
                    window.location.href = "https://someapi/payments/?auth_token=" + token;
                }
            })
        })

I don't know much about URL encoding, but if someone could point me in the right direction, that would be super helpful. Thanks!

Answer 1

You have 2 issues with your code:

One that you need to use encodeURIComponent to encode any symbols in your token so that it can be sent in appropriate manner.

Two, while calling the second request $.get('/_redirect', you didn't use the replaced token but the simple response that you received from earlier request.

Change your code to this to eliminate both errors:

        let token = "";

        $.get('/_token_req', {contentType: "application/x-www-form-urlencoded"}, (response) => {
            token = encodeURIComponent(response);

            $.get('/_redirect', {token: token}, (response) => {
                if(response == "OK"){
                    window.location.href = "https://someapi/payments/?auth_token=" + token;
                }
            })
        })