Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix invalid pathname slashes in "getURL()" utility #70144

Open
wants to merge 1 commit into
base: canary
Choose a base branch
from

Conversation

takueof
Copy link

@takueof takueof commented Sep 16, 2024

For Contributors

Improving Documentation

Adding or Updating Examples

Fixing a bug

For Maintainers

  • Minimal description (aim for explaining to someone not on the team to understand the PR)
  • When linking to a Slack thread, you might want to share details of the conclusion
  • Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
  • Add review comments if necessary to explain to the reviewer the logic behind a change

What?

If you access a root page that has two or more extra slashes at the end, such as https://foo.com//, errors throw in the URL constructor and Next.js will stop rendering.

TypeError: Failed to construct 'URL': Invalid URL UA (Web Browser) location bar screenshot

Why?

Because getURL() utility function in /packages/next/src/shared/lib/utils.ts does not remove two or more extra slashes.

How?

Add processing to the getURL() utility function to replace two or more leading slashes with one slash.

Note

  • This bug has been around for over 7 years since the PR was created
  • This bug does not occur in HTTP web browser environments, only in HTTPS web browser environments
  • I created a PR because this bug can't be fixed without addressing it on the Next.js side

Closes NEXT-
Fixes #

@takueof takueof force-pushed the fix/wrong-value-set-to-asPath-when-root-index-page-have-multiple-slash branch from a559e15 to f807db6 Compare September 16, 2024 07:19
@ijjk
Copy link
Member

ijjk commented Sep 16, 2024

Allow CI Workflow Run

  • approve CI run for commit: 8f14e57

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

@takueof takueof marked this pull request as ready for review September 16, 2024 07:44
@takueof

This comment was marked as resolved.

@takueof takueof force-pushed the fix/wrong-value-set-to-asPath-when-root-index-page-have-multiple-slash branch from f807db6 to b211556 Compare September 16, 2024 08:23
@huozhi huozhi added CI approved Approve running CI for fork and removed CI approved Approve running CI for fork labels Sep 16, 2024
@huozhi
Copy link
Member

huozhi commented Sep 16, 2024

If you have more trailing slashes, even standard util will treat them as part of pathname, sounds correct it was thrown as invalid URL?

new URL('https://fooo.com//').pathname
>> '//'

@takueof
Copy link
Author

takueof commented Sep 16, 2024

@huozhi
Thank you for your reply.

Yes, but it doesn't happen in your example...

It occurs with the following pattern (this is the code pattern used within /packages/next/src/shared/lib/router/utils/as-path-to-search-params.ts):

new URL(asPath, 'http://n').searchParams

The following error should be thrown:

Uncaught TypeError: Failed to construct 'URL': Invalid URL

Screenshot:

new URL() throw by Google Chrome in JavaScript console

V8 (Blink), SpiderMonkey (Gecko) and JavaScriptCore (WebKit) all have the same behavior.

@takueof
Copy link
Author

takueof commented Sep 16, 2024

Initially, I thought that changing

new URL(asPath, 'https://n.com').searchParams

to

new URL(`https://n.com${asPath}`).searchParams

would complete the fix.

However, when I investigated deeper, I started to think that the fundamental solution might not be solved unless I changed getURL().

The reason is that the return value of getURL() is different for http:// and https://.

  • If we execute now getURL() on http://n.com//, / will be returned
  • If we execute now getURL() on https://n.com//, // will be returned

By fixing the core part, we can avoid problems that may occur in other code that uses the result of getURL().

@takueof takueof force-pushed the fix/wrong-value-set-to-asPath-when-root-index-page-have-multiple-slash branch 6 times, most recently from 80de3fd to 23fc909 Compare September 17, 2024 03:19
@huozhi
Copy link
Member

huozhi commented Sep 17, 2024

The test seem cannot demostrate the issue you describe, if I manually run in https mode and just visit the page, it looks working correctly 🤔

@takueof

This comment was marked as resolved.

@takueof takueof force-pushed the fix/wrong-value-set-to-asPath-when-root-index-page-have-multiple-slash branch 3 times, most recently from a2879fd to 7a8c3ee Compare September 17, 2024 14:23
@takueof
Copy link
Author

takueof commented Sep 17, 2024

Oh, after splitting the test file into http and https, the e2e test is now working.

If you git pull the latest commit and run the following command, it does what I want:

pnpm build && pnpm test-start test/e2e/invalid-url-slash

I'm very sorry.

@takueof takueof force-pushed the fix/wrong-value-set-to-asPath-when-root-index-page-have-multiple-slash branch 5 times, most recently from 1ea30c7 to ed53e03 Compare September 21, 2024 02:52
@huozhi
Copy link
Member

huozhi commented Sep 21, 2024

Tests are passed regardless we have the changes

@takueof takueof force-pushed the fix/wrong-value-set-to-asPath-when-root-index-page-have-multiple-slash branch from ed53e03 to e5a015e Compare September 21, 2024 12:35
@takueof
Copy link
Author

takueof commented Sep 21, 2024

@huozhi
Thanks to reply.

I also confirmed that the e2e test did not fail using the old code.

Then I remembered that the case I encountered was a Pages Router, not an App Router.

When I rewrote the e2e test using Pages Router, changed utils.ts to its pre-patch state, and checked again, the e2e test failed.

After applying the patch to utils.ts, the e2e test now passes.

Thank you for making me realize that.

I have pushed the latest code, so please test it yourself 🙏

@takueof takueof force-pushed the fix/wrong-value-set-to-asPath-when-root-index-page-have-multiple-slash branch 5 times, most recently from 7c48f52 to 0547468 Compare September 23, 2024 02:57
@takueof takueof force-pushed the fix/wrong-value-set-to-asPath-when-root-index-page-have-multiple-slash branch from 0547468 to 8f14e57 Compare September 23, 2024 10:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants