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

Jump to bottom

Allow wildcarded domains for image optimization #27345

Closed
wants to merge 15 commits into from
Closed

Allow wildcarded domains for image optimization #27345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
433b51b
Allow wildcarded domains for image optimization
FDiskas Jul 20, 2021
6782cec
Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…
FDiskas Jul 20, 2021
a1c960a
Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…
FDiskas Jul 20, 2021
055e08b
Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…
FDiskas Jul 20, 2021
726e5ca
Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…
FDiskas Jul 20, 2021
03b329c
Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…
FDiskas Jul 20, 2021
4aed40a
Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…
FDiskas Jul 21, 2021
63c572b
Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…
FDiskas Jul 22, 2021
8417dbd
Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…
FDiskas Jul 22, 2021
8ea2b1d
Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…
FDiskas Aug 6, 2021
c1c4678
Merge branch 'canary' of git://github.com/vercel/next.js into feature…
FDiskas Oct 21, 2021
a373763
Merge branch 'canary' of git://github.com/vercel/next.js into feature…
FDiskas Nov 4, 2021
625e2cf
Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…
FDiskas Nov 4, 2021
11d26f7
Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…
FDiskas Nov 8, 2021
50940c6
Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…
FDiskas Dec 23, 2021
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 docs/basic-features/image-optimization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ To protect your application from malicious users, you must define a list of remo
```js
module.exports = {
images: {
domains: ['example.com', 'example2.com'],
domains: ['example.com', 'example2.com', '*.example.com'],
},
}
```
Expand Down
1 change: 1 addition & 0 deletions packages/next/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@
"@next/react-refresh-utils": "12.0.8-canary.13",
"caniuse-lite": "^1.0.30001283",
"jest-worker": "27.0.0-next.5",
"micromatch": "4.0.4",
"node-fetch": "2.6.1",
"postcss": "8.2.15",
"react-is": "17.0.2",
Expand Down
3 changes: 2 additions & 1 deletion packages/next/server/image-optimizer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { createReadStream, promises } from 'fs'
import { getOrientation, Orientation } from 'next/dist/compiled/get-orientation'
import imageSizeOf from 'next/dist/compiled/image-size'
import { IncomingMessage, ServerResponse } from 'http'
import micromatch from 'micromatch'
Copy link
Member

Choose a reason for hiding this comment

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

We also need to validate on the client in packages/next/client/image.tsx

I think #18730 is a better implementation because it doesn't rely on a 3rd party package that would need to be bundled in the client.

Copy link
Author

@FDiskas FDiskas Jul 22, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

I think that special modules does his job better then that pr. The module has a lot of tests and it works. Pr has unknown status. What if I add *.staging.*.com or **.google.com to the config list? Will it work?

Copy link
Author

Choose a reason for hiding this comment

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

In any case we need that feature a lot. That image resizing is super awesome. And there is so many cdn's with random sub domains.

Copy link
Member

Choose a reason for hiding this comment

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

What if I add .staging..com or **.google.com to the config list?

These are great questions which is why its better to have our own implementation, so we can test and document the usage.

Copy link
Author

Choose a reason for hiding this comment

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

Should I continue on this PR - add some more tests and so on?

Copy link
Member

Choose a reason for hiding this comment

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

If so, we would need to drop micromatch.

I'm skeptical if we even need to differentiate ** vs * but willing to hear out any use cases

Copy link
Member

Choose a reason for hiding this comment

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

On second thought, maybe we do need ** because wildcard certs have a single * so we should match that behavior and then ** could mean any number of subdomains.

We could even introduce this in separate phases so that only ** is supported at first which can be implemented with a simple url.hostname.endsWith(suffix). Then we can add support for single * in a separate PR.

Copy link

Choose a reason for hiding this comment

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

@FDiskas @styfle is the decision around support for ** vs * the blocker on merging this PR?

Copy link
Member

Choose a reason for hiding this comment

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

The blocker is micromatch. It shouldn't use an external dependency since we need to document behavior around ** vs *. See #27925

// @ts-ignore no types for is-animated
import isAnimated from 'next/dist/compiled/is-animated'
import contentDisposition from 'next/dist/compiled/content-disposition'
Expand Down Expand Up @@ -109,7 +110,7 @@ export async function imageOptimizer(
return { finished: true }
}

if (!domains.includes(hrefParsed.hostname)) {
if (!micromatch.isMatch(hrefParsed.hostname, domains)) {
res.statusCode = 400
res.end('"url" parameter is not allowed')
return { finished: true }
Expand Down
1 change: 1 addition & 0 deletions test/integration/image-optimizer/test/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1036,6 +1036,7 @@ describe('Image Optimizer', () => {
'example.com',
'assets.vercel.com',
'image-optimization-test.vercel.app',
'*.vercel.app',
]

describe('Server support for minimumCacheTTL in next.config.js', () => {
Expand Down