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.

Sign up for GitHub

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(routing): supports encoded forward slashes in URI params #9696

Closed
wants to merge 4 commits into from
Closed

fix(routing): supports encoded forward slashes in URI params #9696

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eec5ad0
fix for url encode slash in path
asdfjkalsdfla Jan 14, 2024
5ddec50
add unit test
asdfjkalsdfla Jan 14, 2024
92519a2
Merge branch 'main' into slash_in_uri_fix
asdfjkalsdfla Jan 20, 2024
b0a2a4b
add additonal unit test
asdfjkalsdfla Jan 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/astro/src/core/render/params-and-props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ function getRouteParams(route: RouteData, pathname: string): Params | undefined
if (route.params.length) {
// The RegExp pattern expects a decoded string, but the pathname is encoded
// when the URL contains non-English characters.
const paramsMatch = route.pattern.exec(decodeURIComponent(pathname));
const paramsMatch = route.pattern.exec(decodeURI(pathname));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We've had many URI encoding issues in the past, so we tend to be very cautious when modifying any logic related to this.

Seems like using decodeURI here would break users who have encoded , ? : @ & = + $ # but potentially fix just users who have encoded /?

Copy link
Author

@asdfjkalsdfla asdfjkalsdfla Jan 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, the change the behavior for users who have those symbols encoded in their parameter. But, it prevents encoded components from being interrupted as query params, uri params, location hash, etc... My gut is the change here is the right long-term strategy to prevent that class of bugs since this is really decoding a uri and not a component of the URI. (I also think may be issues with cache misses for these cases.)

I did think about adding automatic uri component decoding when accessing the parameter itself. However, I couldn't find a great spot to do that. The params object are used as part of the URI cache today, so, I can't encode it there and still have the cache work. There might be a spot to add this when accessing the value, but I don't know if that would cause other inconsistencies.

The behavior around this one was changed in a minor release in the past (i.e. from not decoded to decoded), so I leaned towards not making a more major refactor to keep backwards compatibility.

What do you think?

Copy link
Member

@ematipico ematipico Jan 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, the change the behavior for users who have those symbols encoded in their parameter

This will cause a breaking change for users who rely on , ? : @ & = + $ #. Not sure we can land this PR as is 🤔

Also, if we decided to apply this change using an experimental flag. Eventually, these users won't be able to use these characters.

if (paramsMatch) {
return getParams(route.params)(paramsMatch);
}
Expand Down
2 changes: 2 additions & 0 deletions packages/astro/test/fixtures/ssr-params/src/pages/[category].astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
const { category } = Astro.params
const pairing = Astro.url.searchParams.get('pairing')! || '';
---
<html>
<head>
Expand All @@ -8,5 +9,6 @@ const { category } = Astro.params
<body>
<h1>Testing</h1>
<h2 class="category">{ category }</h2>
<h2 class="pairing">{ pairing }</h2>
</body>
</html>
64 changes: 64 additions & 0 deletions packages/astro/test/ssr-params.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,70 @@ describe('Astro.params in SSR', () => {
});
});

describe('Encoded URI components in param', () => {
it('Encoded slashes are passed to param', async () => {
const app = await fixture.loadTestAdapterApp();
const request = new Request('http://example.com/users/houston/1%2F2food');
const response = await app.render(request);
expect(response.status).to.equal(200);
const html = await response.text();
const $ = cheerio.load(html);
expect($('.category').text()).to.equal('1%2F2food');
});

it('Encoded ands are passed into the URL param', async () => {
const app = await fixture.loadTestAdapterApp();
const request = new Request('http://example.com/users/houston/food%20%26%20drink');
const response = await app.render(request);
expect(response.status).to.equal(200);
const html = await response.text();
const $ = cheerio.load(html);
expect($('.category').text()).to.equal('food %26 drink');
});

it('Encoded hashes are included in param', async () => {
const app = await fixture.loadTestAdapterApp();
const request = new Request('http://example.com/users/houston/food%23drink');
const response = await app.render(request);
expect(response.status).to.equal(200);
const html = await response.text();
const $ = cheerio.load(html);
expect($('.category').text()).to.equal('food%23drink');
});

it('Encoded questions are passed in params', async () => {
const app = await fixture.loadTestAdapterApp();
const request = new Request('http://example.com/users/houston/food%3Fpairing%3Ddrink');
const response = await app.render(request);
expect(response.status).to.equal(200);
const html = await response.text();
const $ = cheerio.load(html);
expect($('.category').text()).to.equal('food%3Fpairing%3Ddrink');
});

it('Encoded questions arent read as a url params', async () => {
const app = await fixture.loadTestAdapterApp();
const request = new Request('http://example.com/users/houston/food%3Fpairing%3Ddrink');
const response = await app.render(request);
expect(response.status).to.equal(200);
const html = await response.text();
const $ = cheerio.load(html);
expect($('.pairing').text()).to.equal('');
});

it('Encoded commas are passed in params ', async () => {
const app = await fixture.loadTestAdapterApp();
const request = new Request('http://example.com/users/houston/food%3Fpairing%3Ddrink%2Csleep');
const response = await app.render(request);
expect(response.status).to.equal(200);
const html = await response.text();
const $ = cheerio.load(html);
expect($('.category').text()).to.equal('food%3Fpairing%3Ddrink%2Csleep');
expect($('.pairing').text()).to.equal('');
});

});

it('No double URL decoding', async () => {
const app = await fixture.loadTestAdapterApp();
const request = new Request('http://example.com/users/houston/%25');
Expand Down
Loading