fix(next/image): improve query string validation for integers (#67293)
The Image Optimization API currently uses `parseInt()` for `w` and `q` query string parameters. This doesn't handle floats as you might expect and instead coerces, for example `parseInt('99.9') === 99`. This PR changes the runtime to match the build time validation and only accept integers for `w` and `q`.
This commit is contained in:
parent
2fceb5b1aa
commit
78dc2db916
2 changed files with 36 additions and 9 deletions
|
@ -242,19 +242,28 @@ export class ImageOptimizerCache {
|
|||
return { errorMessage: '"w" parameter (width) is required' }
|
||||
} else if (Array.isArray(w)) {
|
||||
return { errorMessage: '"w" parameter (width) cannot be an array' }
|
||||
} else if (!/^[0-9]+$/.test(w)) {
|
||||
return {
|
||||
errorMessage: '"w" parameter (width) must be an integer greater than 0',
|
||||
}
|
||||
}
|
||||
|
||||
if (!q) {
|
||||
return { errorMessage: '"q" parameter (quality) is required' }
|
||||
} else if (Array.isArray(q)) {
|
||||
return { errorMessage: '"q" parameter (quality) cannot be an array' }
|
||||
} else if (!/^[0-9]+$/.test(q)) {
|
||||
return {
|
||||
errorMessage:
|
||||
'"q" parameter (quality) must be an integer between 1 and 100',
|
||||
}
|
||||
}
|
||||
|
||||
const width = parseInt(w, 10)
|
||||
|
||||
if (width <= 0 || isNaN(width)) {
|
||||
return {
|
||||
errorMessage: '"w" parameter (width) must be a number greater than 0',
|
||||
errorMessage: '"w" parameter (width) must be an integer greater than 0',
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -273,12 +282,12 @@ export class ImageOptimizerCache {
|
|||
}
|
||||
}
|
||||
|
||||
const quality = parseInt(q)
|
||||
const quality = parseInt(q, 10)
|
||||
|
||||
if (isNaN(quality) || quality < 1 || quality > 100) {
|
||||
return {
|
||||
errorMessage:
|
||||
'"q" parameter (quality) must be a number between 1 and 100',
|
||||
'"q" parameter (quality) must be an integer between 1 and 100',
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -506,7 +506,7 @@ export function runTests(ctx: RunTestsCtx) {
|
|||
const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
|
||||
expect(res.status).toBe(400)
|
||||
expect(await res.text()).toBe(
|
||||
`"q" parameter (quality) must be a number between 1 and 100`
|
||||
`"q" parameter (quality) must be an integer between 1 and 100`
|
||||
)
|
||||
})
|
||||
|
||||
|
@ -515,7 +515,7 @@ export function runTests(ctx: RunTestsCtx) {
|
|||
const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
|
||||
expect(res.status).toBe(400)
|
||||
expect(await res.text()).toBe(
|
||||
`"q" parameter (quality) must be a number between 1 and 100`
|
||||
`"q" parameter (quality) must be an integer between 1 and 100`
|
||||
)
|
||||
})
|
||||
|
||||
|
@ -524,7 +524,7 @@ export function runTests(ctx: RunTestsCtx) {
|
|||
const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
|
||||
expect(res.status).toBe(400)
|
||||
expect(await res.text()).toBe(
|
||||
`"w" parameter (width) must be a number greater than 0`
|
||||
`"w" parameter (width) must be an integer greater than 0`
|
||||
)
|
||||
})
|
||||
|
||||
|
@ -533,7 +533,7 @@ export function runTests(ctx: RunTestsCtx) {
|
|||
const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
|
||||
expect(res.status).toBe(400)
|
||||
expect(await res.text()).toBe(
|
||||
`"w" parameter (width) must be a number greater than 0`
|
||||
`"w" parameter (width) must be an integer greater than 0`
|
||||
)
|
||||
})
|
||||
|
||||
|
@ -542,7 +542,16 @@ export function runTests(ctx: RunTestsCtx) {
|
|||
const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
|
||||
expect(res.status).toBe(400)
|
||||
expect(await res.text()).toBe(
|
||||
`"w" parameter (width) must be a number greater than 0`
|
||||
`"w" parameter (width) must be an integer greater than 0`
|
||||
)
|
||||
})
|
||||
|
||||
it('should fail when w is not an integer', async () => {
|
||||
const query = { url: '/test.png', w: 99.9, q: 100 }
|
||||
const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
|
||||
expect(res.status).toBe(400)
|
||||
expect(await res.text()).toBe(
|
||||
`"w" parameter (width) must be an integer greater than 0`
|
||||
)
|
||||
})
|
||||
|
||||
|
@ -551,7 +560,16 @@ export function runTests(ctx: RunTestsCtx) {
|
|||
const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
|
||||
expect(res.status).toBe(400)
|
||||
expect(await res.text()).toBe(
|
||||
`"q" parameter (quality) must be a number between 1 and 100`
|
||||
`"q" parameter (quality) must be an integer between 1 and 100`
|
||||
)
|
||||
})
|
||||
|
||||
it('should fail when q is not an integer', async () => {
|
||||
const query = { url: '/test.png', w: ctx.w, q: 99.9 }
|
||||
const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
|
||||
expect(res.status).toBe(400)
|
||||
expect(await res.text()).toBe(
|
||||
`"q" parameter (quality) must be an integer between 1 and 100`
|
||||
)
|
||||
})
|
||||
|
||||
|
|
Loading…
Reference in a new issue