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: handle uri encoded _path query #1794

Merged
merged 2 commits into from
Jan 20, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
33 changes: 17 additions & 16 deletions src/runtime/utils/json.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,23 @@ export function jsonStringify (value: any) {
* This function is equivalent to `JSON.parse`, but it also handles RegExp objects.
*/
export function jsonParse (value: string) {
return JSON.parse(value, regExpReviver)
return JSON.parse(value, (key, value) => {
Copy link
Member

Choose a reason for hiding this comment

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

Why not use decodeURIComponent(body) in

return jsonParse(body)

We should not add this only for _path. Imagine that users are querying another utf-8 field. We can simply decode whole query simply by adding it in parseJSONQueryParams function

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm not sure decode a json object with uri decoder will be a good idea...
also decodeURIComponent is for decoding a part of url path (ex./to/path's to) not for the entire url string.

querying another utf-8 field

Currently the params is encoded to base64 and decode in the server side so I think we don't need to worry about uri encoding in the fly.

I only decode _path is because when you use useRoute().path it only gets encoded path. so people can directly use it to query the content, or we should decoded it first at the frontend, and remove server side decoding.

const withOperator = (typeof value === 'string' && value.match(/^--([A-Z]+) (.+)$/)) || []

// Transforms RegExp string representation back to RegExp objects.
if (withOperator[1] === 'REGEX') {
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#advanced_searching_with_flags
const regex = withOperator[2].match(/\/(.*)\/([dgimsuy]*)$/)
return regex ? new RegExp(regex[1], regex[2] || '') : value
}

// Decode URI encoded path
if (key === '_path') {
return decodeURI(value)
}

return value
})
}

/**
Expand All @@ -23,18 +39,3 @@ function regExpReplacer (_key: string, value: any) {
}
return value
}

/**
* A function that transforms RegExp string representation back to RegExp objects.
*/
function regExpReviver (_key: string, value: any) {
const withOperator = (typeof value === 'string' && value.match(/^--([A-Z]+) (.+)$/)) || []

if (withOperator[1] === 'REGEX') {
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#advanced_searching_with_flags
const regex = withOperator[2].match(/\/(.*)\/([dgimsuy]*)$/)
return regex ? new RegExp(regex[1], regex[2] || '') : value
}

return value
}
5 changes: 5 additions & 0 deletions test/basic.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,11 @@ describe('Basic usage', async () => {
expect(html).contains('Persian')
})

test('Japanese path', async () => {
const html = await $fetch('/こんにけは')
expect(html).contains('🎨 こんにけは')
})

test('Partials specials chars', async () => {
const html = await $fetch('/_partial/content-(v2)')
expect(html).contains('Content (v2)')
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
_path: /こんにけは
---

# 🎨 こんにけは