Next.js: Allow image optimization on wildcard hostnames

[lachlanjc]

On https://workshops.hackclub.com, to prevent ballooning the already-multiple-GBs source repo, we have folks upload images/media to the Vercel CDN as individual deployments (using some internal tooling) so the dev experience is faster. However, this means each image is at a different hostname. I’d love to switch our homepage there to use Next.js Image Optimization, but since each image is on a different/unknown domain, we can’t. Two solutions jump out to me:

1. Disable the domains restriction entirely (opening your site up to being used as an external service)
2. Allow wildcards or regex in the domains (for us, cloud-*.vercel.app would work fine)—a little more technically/usage complex but is definitely safer

[timneutkens]

We can’t let people disable it as it would allow you to get 3 types of attack vectors:
• cpu resources being taken for other sites
• Cache overload (the cache growing infinitely when self-hosting)
• Social engineering (people could share images on your domain that could ask people to do a certain thing)

We can consider wildcard support though 👍

[maximousblk]

Consider this case:

I have an application that fetches and renders markdown content at runtime from external sources (say, GitHub READMEs). In such case, I want to optimise the images referenced in the markdown.

So I'd like to propose the following:

either:

fallback to the basic HTML <img /> tag for domains that aren't allowed by setting fallback: true in the config. This way we can allow common hosting platforms which will be optimised and the renderer will still use the <Image /> component but not optimise the sources that aren't allowed.

module.exports = {
  images: {
    domains: ['domain1.com', 'domain2.com'],
    fallback: true,
  },
}

OR: allow users to explicitly opt-in to allowing all domains by setting something like dangerouslyAllowAllDomains: true in the config. (similar to allowDangerousHtml)

module.exports = {
  images: {
    domains: [],
    dangerouslyAllowAllDomains: true,
  },
}

but this doesn't seem to be the the plan.

[lachlanjc]

Both sound great. It’d be really great to have frontend/CSS consistency regardless of the image host, so the fallback option would work really well for that

[mohux]

yep, facing same problem since we are using S3 which has variant of domains , wildcards would be awesome idea