Allow wildcarded domains for image optimization #27345

FDiskas · 2021-07-20T16:12:58Z

Add ability to use wildcard in configuration of allowed list of domains.

Bug

Related PR:

fixes #18412 #23902 #18632 #27925

Related issues:
Integration tests added
Errors have helpful link attached, see contributing.md

Feature

Requests:

Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
Related issues linked using fixes #number
Integration tests added
Documentation added
Telemetry added. In case of a feature if it's used or not.
Errors have helpful link attached, see contributing.md

Documentation / Examples

Make sure the linting passes

…optimization

styfle · 2021-07-22T17:59:00Z

packages/next/server/image-optimizer.ts

@@ -3,6 +3,7 @@ import { createHash } from 'crypto'
 import { createReadStream, promises } from 'fs'
 import { getOrientation, Orientation } from 'get-orientation'
 import { IncomingMessage, ServerResponse } from 'http'
+import micromatch from 'micromatch'


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.

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?

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.

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.

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

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

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.

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

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

…optimization

- Add `gitea.${KITSPACE_DOMAIN}, and `processor.${KITSAPCE_DOMAIN} for nextjs image optimization allowed domains. - There is no wildcards support yet, see vercel/next.js#27345 - Remove ISR environment variables as they are no longer used.

vercel/next.js#27345

413n · 2021-10-21T08:06:27Z

Any update?

FDiskas · 2021-10-21T14:21:54Z

If it's still relevant I can take a look. There was similar PR without introduced dependency.
#18730

…/allow-wildcard-domainas-for-image-optimization

FDiskas · 2021-11-04T11:21:58Z

I see that somebody already added micromatch as a dev dependency. So that means we are good to go?
@styfle any thoughts?

…optimization

joelamltc · 2021-12-23T11:23:53Z

Any updates on this PR? This feature is really important that if we are loading external CDN images.

…optimization

FDiskas · 2021-12-23T12:51:55Z

I don't know what should I do to make it happen.

- Add `gitea.${KITSPACE_DOMAIN}, and `processor.${KITSAPCE_DOMAIN} for nextjs image optimization allowed domains. - There is no wildcards support yet, see vercel/next.js#27345 - Remove ISR environment variables as they are no longer used.

RebootGG · 2022-02-01T15:33:01Z

Could we please have an update from the Vercel team ?

The app we are developing displays images from dynamic external hosts. Unless we have a solution, I might be forced to use a regular <img> tag.

devin-aegis-studio · 2022-02-10T23:21:01Z

Bump... what's going on with this?

FDiskas · 2022-02-11T07:24:41Z

As far as I understand this will not be merged untill it will introduce a new dependency. I should update it and make it work with custom glob match.

borispoehland · 2022-02-17T18:13:39Z

Just here to say how urgent this is needed. Thanks ❤️

bmstefanski · 2022-03-04T20:20:20Z

Just here to say how urgent this is needed. Thanks ❤️

I recently posted a workaround here, #18429 (comment) . It has some cons, especially in big scale projects, but for most apps, it should do the job

cc'ing @borispoehland, @joelamltc, @samstr, @jericopulvera, @fizzterious, @afnar

Rishab1207 · 2022-04-05T16:33:17Z

any further updates on this?

styfle · 2022-04-05T16:42:11Z

Yes, take a look at the proposal here #27925

FDiskas · 2022-04-14T11:16:17Z

I have a concept that could actually work

let match = 'https://**.google.*';

match = match.replace(/[$()+.?[\\\]^{|}]/g, '\\$&');
match = match.replace(/\*\*/g, '([^/]+/<asterisk>)+');
match = match.replace(/\*/g, '([^./]<asterisk>)');
match = match.replace(/<asterisk>/g, '*');

console.log('https://www.google.com'.match(match)); // true
console.log('https://buzz.www.google.com'.match(match)); // true
console.log('https://foo.buzz.www.google.com'.match(match)); // true
console.log('https://google.com'.match(match)); // false

…#36245) ## Description This PR implements a new configuration object in `next.config.js` called `experimental.images.remotePatterns`. This will eventually deprecate `images.domains` because it covers the same use cases and more by allowing wildcard pattern matching on `hostname` and `pathname` and also allows restricting `protocol` and `port`. ## Feature - [x] Implements an existing feature request. - [x] Related issues linked - [x] Unit tests added - [x] Integration tests added - [x] Documentation added - [x] Telemetry added. In case of a feature if it's used or not. - [x] Errors have helpful link attached, see `contributing.md` ## Related - Fixes #27925 - Closes #18429 - Closes #18632 - Closes #18730 - Closes #27345

styfle · 2022-05-06T17:33:38Z

This feature is available on the canary channel npm i next@canary using the experimental remotePatterns config.

Allow wildcarded domains for image optimization

433b51b

FDiskas requested review from huozhi, ijjk, leerob, lfades, padmaia, shuding, styfle and timneutkens as code owners July 20, 2021 16:12

ijjk added type: documentation type: next labels Jul 20, 2021

FDiskas added 7 commits July 20, 2021 19:25

Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…

6782cec

…optimization

Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…

a1c960a

…optimization

Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…

055e08b

…optimization

Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…

726e5ca

…optimization

Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…

03b329c

…optimization

Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…

4aed40a

…optimization

Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…

63c572b

…optimization

styfle reviewed Jul 22, 2021

View reviewed changes

FDiskas added 2 commits July 22, 2021 21:22

Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…

8417dbd

…optimization

Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…

8ea2b1d

…optimization

styfle mentioned this pull request Aug 10, 2021

Support wildcard patterns for upstream remote images #27925

Closed

oksygenn mentioned this pull request Aug 11, 2021

[COD-53] codingduckscyf/miricyl#59

Merged

ianconsolata added a commit to mysilio-co/garden that referenced this pull request Oct 20, 2021

Wildcard / subdomains are not yet supported.

dcc64eb

vercel/next.js#27345

Merge branch 'canary' of git://github.com/vercel/next.js into feature…

c1c4678

…/allow-wildcard-domainas-for-image-optimization

FDiskas requested a review from molebox as a code owner November 4, 2021 10:54

Merge branch 'canary' of git://github.com/vercel/next.js into feature…

a373763

…/allow-wildcard-domainas-for-image-optimization

FDiskas requested a review from styfle November 4, 2021 11:22

FDiskas added 2 commits November 4, 2021 23:08

Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…

625e2cf

…optimization

Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…

11d26f7

…optimization

This comment has been minimized.

Sign in to view

Merge branch 'canary' into feature/allow-wildcard-domainas-for-image-…

50940c6

…optimization

styfle mentioned this pull request Apr 18, 2022

Add experimental wildcard remotePatterns config for upstream images #36245

Merged

7 tasks

kodiakhq bot closed this in #36245 May 5, 2022

github-actions bot locked as resolved and limited conversation to collaborators Jun 6, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow wildcarded domains for image optimization #27345

Allow wildcarded domains for image optimization #27345

FDiskas commented Jul 20, 2021 •

edited by styfle

Loading

styfle Jul 22, 2021

FDiskas Jul 22, 2021 •

edited

Loading

FDiskas Jul 22, 2021

styfle Jul 22, 2021

FDiskas Jul 23, 2021

styfle Jul 23, 2021

styfle Jul 23, 2021

gertig Dec 7, 2021

styfle Feb 2, 2022

413n commented Oct 21, 2021

FDiskas commented Oct 21, 2021 •

edited

Loading

FDiskas commented Nov 4, 2021

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

joelamltc commented Dec 23, 2021

FDiskas commented Dec 23, 2021

RebootGG commented Feb 1, 2022

devin-aegis-studio commented Feb 10, 2022

FDiskas commented Feb 11, 2022

borispoehland commented Feb 17, 2022

bmstefanski commented Mar 4, 2022

Rishab1207 commented Apr 5, 2022

styfle commented Apr 5, 2022

FDiskas commented Apr 14, 2022 •

edited

Loading

styfle commented May 6, 2022

Allow wildcarded domains for image optimization #27345

Allow wildcarded domains for image optimization #27345

Conversation

FDiskas commented Jul 20, 2021 • edited by styfle Loading

Bug

Feature

Documentation / Examples

Choose a reason for hiding this comment

FDiskas Jul 22, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

413n commented Oct 21, 2021

FDiskas commented Oct 21, 2021 • edited Loading

FDiskas commented Nov 4, 2021

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

joelamltc commented Dec 23, 2021

FDiskas commented Dec 23, 2021

RebootGG commented Feb 1, 2022

devin-aegis-studio commented Feb 10, 2022

FDiskas commented Feb 11, 2022

borispoehland commented Feb 17, 2022

bmstefanski commented Mar 4, 2022

Rishab1207 commented Apr 5, 2022

styfle commented Apr 5, 2022

FDiskas commented Apr 14, 2022 • edited Loading

styfle commented May 6, 2022

FDiskas commented Jul 20, 2021 •

edited by styfle

Loading

FDiskas Jul 22, 2021 •

edited

Loading

FDiskas commented Oct 21, 2021 •

edited

Loading

FDiskas commented Apr 14, 2022 •

edited

Loading