Cypress: GET request to API with % as part of query, URI malformed error is thrown

[eugeneoei]

Current behavior:

When a GET request is made to API with % as part of query, URI malformed error is thrown. For eg, GET request to /api/query?tag=10%

Works on Chrome browser:

But not when Cypress test is run:

Desired behavior:

API call with % should be decoded correctly and should behave as on Chrome.

I am not entirely sure if issues 2372 and 5274 are relevant to this.

Test code to reproduce

I have created a repository here for the steps to be reproduced. express app to serve static html file and handle API request

Versions

Cypress: ^5.0.0
Chrome: Version 84.0.4147.125 (Official Build) (64-bit)
OS: macOS Mojave Version 10.14.2

[jennifer-shehane]

@eugeneoei Thanks for providing a reproducible example!

Cypress is calling JavaScript's decodeURIComponent on the url http://localhost:8080/api/query?tag=10%. This throws an error about the URI being malformed, which is what is surfacing here.

Calling it here: https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cypress/server.js#L488:L488

We should probably be catching this error and having some sort of fallback here instead of failing to handle the request at all.

Repro

it('test cy.route()', () => {
  cy.visit('https://example.com')
  cy.window().then((win) => {
    const xhr = new win.XMLHttpRequest()
    xhr.open('GET', '/api/query?tag=10%')
    xhr.send()
  })
})

[eugeneoei]

@jennifer-shehane thanks for getting back so quickly! For now, I'll skip the test cases that makes API calls with % as part of the query.

[harshitdxt3004]

@jennifer-shehane, I would like to work on this.
Can you guide me on this?
First timer here, so help would be appreciated a lot.

[jennifer-shehane]

@harshitdxt3004 Check out our contributing doc.

[nirajgeorgian]

@harshitdxt3004 if you are not working on this I can take up this as my first contribution to this.

[harshitdxt3004]

@nirajgeorgian please go ahead.

[nirajgeorgian]

@harshitdxt3004 any feedback or any progress till now ?

[nimish-gupta]

We should probably be catching this error and having some sort of fallback here instead of failing to handle the request at all.

Should we just pass a flag around to skip % or just use regex for replacing % with %25 (unicode for %) ? @jennifer-shehane

[pstephenwille]

Why not allow the encoded URI?
Chrome Network tab shows the encoded URI which is what our server requires. In my test, I want to confirm the URI is properly encoded. Re-encoding the test string does not confirm my code is handling the URL query params correctly.

[sinharaksh1t]

@eugeneoei since we know that Cypress is calling JavaScript's decodeURIComponent on the URL, have you tried encoding the query parameters in the URL before making the call? Not sure if this will help, but in the codebase of where I work, we use JavaScript's encodeURIComponent for some API calls where we need to specifically append query params on the URL.

Below is an example from your own example repo to demonstrate what I mean:

axios.get(`/api/query?tag=${encodeURIComponent(10%)}`)
                    .then(function (response) {
                        ...do something
                    })
                    .catch(function (error) {
                        ...do something else after catch
                    })

[eugeneoei]

@sinharaksh1t i made the changes according to your suggestion and ran the test case again. you are right!! URI malformed error is no longer thrown after encoding the query params.

And now it made me realised I actually should be using encodeURIComponent in all the API calls involving query params on the URL made from the front-end application I'm working on. Currently, the API I did "decodes" by running a regex which will no longer be needed if encodeURIComponent is used on the front-end application. Thanks for the tip!

I guess this is technically not a bug and can be closed? what do you think @jennifer-shehane ?

[bahmutov]

You can close it, thank you for seeing it through

Sent from my iPhone

On Sep 17, 2020, at 22:31, eugeneoei [e-mail] wrote:


@sinharaksh1t i made the changes according to your suggestion and ran the test case again. you are right!! URI malformed error is no longer thrown after encoding the query params.

And now it made me realised I actually should be using encodeURIComponent in all the API calls involving query params on the URL made from the front-end application I'm working on. Currently, the API I did "decodes" by running a regex which will no longer be needed if encodeURIComponent is used on the front-end application. Thanks for the tip!

I guess this is technically not a bug and can be closed? what do you think @jennifer-shehane ?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or unsubscribe.