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

[fredericoo]

I highly support this decision. Instagram blocks me from CORS so I can't display any posts directly from my webpage. Next's image component WOULD solve it, but I can’t possibly enable all their cdn domains that change every now and again.

[lynxtaa]

You can solve it for now by proxying instagram requests in api route

[petergombos]

I had the same issue a few days ago, here is how I solved it:
Create a new API endpoint

/api/imgproxy.js

import { request } from 'axios'

export default async (req, res) => {
  const readable = await request({
    url: req.query.url,
    responseType: 'stream',
  })

  await readable.data.pipe(res)
}

Then use it in your app:

...
<img src={`/api/imgproxy?url=${encodeURIComponent(instagramImageURL)}`}     />
...