Remote Patterns in next.config.js Not Respecting Pathname Rules on AWS Amplify

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Next.js

Amplify APIs

Storage

Amplify Version

Amplify Categories

No response

Backend

None

Environment information

``` # Put output below this line System: OS: macOS 14.6.1 CPU: (10) arm64 Apple M2 Pro Memory: 220.33 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 21.1.0 - ~/.nvm/versions/node/v21.1.0/bin/node Yarn: 1.22.21 - ~/.nvm/versions/node/v21.1.0/bin/yarn npm: 10.8.2 - ~/.nvm/versions/node/v21.1.0/bin/npm pnpm: 8.14.2 - ~/.nvm/versions/node/v21.1.0/bin/pnpm Browsers: Chrome: 128.0.6613.84 Edge: 128.0.2739.42 Safari: 17.6 npmPackages: @ampproject/toolbox-optimizer: undefined () @babel/core: undefined () @babel/runtime: 7.22.5 @contentful/rich-text-react-renderer: ^15.21.2 => 15.21.2 @contentful/rich-text-types: ^16.5.2 => 16.5.2 @edge-runtime/cookies: 4.1.1 @edge-runtime/ponyfill: 2.4.2 @edge-runtime/primitives: 4.1.0 @hapi/accept: undefined () @mswjs/interceptors: undefined () @napi-rs/triples: undefined () @next/bundle-analyzer: ^13.5.6 => 13.5.6 @next/font: undefined () @opentelemetry/api: undefined () @svgr/webpack: ^6.5.1 => 6.5.1 @types/node: 18.11.18 => 18.11.18 @types/react: 18.0.27 => 18.0.27 @vercel/nft: undefined () @vercel/og: 0.6.2 acorn: undefined () amphtml-validator: undefined () anser: undefined () arg: undefined () assert: undefined () async-retry: undefined () async-sema: undefined () autoprefixer: ^10.4.19 => 10.4.19 babel-packages: undefined () browserify-zlib: undefined () browserslist: undefined () buffer: undefined () bytes: undefined () ci-info: undefined () cli-select: undefined () client-only: 0.0.1 commander: undefined () comment-json: undefined () compression: undefined () conf: undefined () constants-browserify: undefined () content-disposition: undefined () content-type: undefined () cookie: undefined () cross-env: ^7.0.3 => 7.0.3 cross-spawn: undefined () crypto-browserify: undefined () css.escape: undefined () data-uri-to-buffer: undefined () debug: undefined () devalue: undefined () domain-browser: undefined () edge-runtime: undefined () eslint: 8.32.0 => 8.32.0 eslint-config-next: ^13.5.6 => 13.5.6 eslint-config-prettier: ^8.10.0 => 8.10.0 eslint-plugin-tailwindcss: ^3.17.3 => 3.17.3 events: undefined () find-cache-dir: undefined () find-up: undefined () fresh: undefined () get-orientation: undefined () glob: undefined () graphql-request: ^5.2.0 => 5.2.0 gzip-size: undefined () http-proxy: undefined () http-proxy-agent: undefined () https-browserify: undefined () https-proxy-agent: undefined () icss-utils: undefined () ignore-loader: undefined () image-size: undefined () is-animated: undefined () is-docker: undefined () is-wsl: undefined () jest-worker: undefined () json5: undefined () jsonwebtoken: undefined () loader-runner: undefined () loader-utils: undefined () lodash.curry: undefined () lru-cache: undefined () mini-css-extract-plugin: undefined () nanoid: undefined () native-url: undefined () neo-async: undefined () next: ^14.2.4 => 14.2.4 next-sitemap: ^4.2.3 => 4.2.3 node-fetch: undefined () node-html-parser: undefined () ora: undefined () os-browserify: undefined () p-limit: undefined () path-browserify: undefined () picomatch: undefined () platform: undefined () postcss: ^8.4.38 => 8.4.38 (8.4.31) postcss-flexbugs-fixes: undefined () postcss-modules-extract-imports: undefined () postcss-modules-local-by-default: undefined () postcss-modules-scope: undefined () postcss-modules-values: undefined () postcss-preset-env: undefined () postcss-safe-parser: undefined () postcss-scss: undefined () postcss-value-parser: undefined () prettier: ^2.8.8 => 2.8.8 prettier-plugin-tailwindcss: ^0.2.8 => 0.2.8 process: undefined () punycode: undefined () querystring-es3: undefined () raw-body: undefined () react: ^18.3.1 => 18.3.1 react-builtin: undefined () react-dom: ^18.3.1 => 18.3.1 react-dom-builtin: undefined () react-dom-experimental-builtin: undefined () react-experimental-builtin: undefined () react-is: 18.2.0 react-refresh: 0.12.0 react-server-dom-turbopack-builtin: undefined () react-server-dom-turbopack-experimental-builtin: undefined () react-server-dom-webpack-builtin: undefined () react-server-dom-webpack-experimental-builtin: undefined () regenerator-runtime: 0.13.4 sass-loader: undefined () scheduler-builtin: undefined () scheduler-experimental-builtin: undefined () schema-utils: undefined () semver: undefined () send: undefined () server-only: 0.0.1 setimmediate: undefined () sharp: ^0.33.4 => 0.33.4 shell-quote: undefined () source-map: undefined () source-map08: undefined () stacktrace-parser: undefined () stream-browserify: undefined () stream-http: undefined () string-hash: undefined () string_decoder: undefined () strip-ansi: undefined () superstruct: undefined () swiper: ^8.4.7 => 8.4.7 swiper_angular: 0.0.1 tailwindcss: ^3.4.4 => 3.4.4 tar: undefined () terser: undefined () text-table: undefined () timers-browserify: undefined () tty-browserify: undefined () typescript: 4.9.4 => 4.9.4 ua-parser-js: undefined () unistore: undefined () util: undefined () vm-browserify: undefined () watchpack: undefined () web-vitals: undefined () webpack: undefined () webpack-sources: undefined () ws: undefined () zod: undefined () npmGlobalPackages: @sanity/cli: 3.45.0 corepack: 0.22.0 express-generator: 4.16.1 netlify-cli: 17.10.1 nodemon: 3.0.1 npm: 10.8.2 pnpm: 8.14.2 serverless: 3.38.0 vercel: 35.2.3 yarn: 1.22.21 ```

Describe the bug

I encountered an issue with the image optimization process on AWS Amplify for a Next.js project. When specifying a pathname in the remotePatterns configuration within next.config.js, Amplify is not respecting the specified rules. This is causing unintended behavior where images from any Contentful space are processed, even if they do not match the specified pathname.

Configuration: Here's the relevant part of my next.config.js:

images: {
  remotePatterns: [
    {
      protocol: 'https',
      hostname: '*.ctfassets.net',
      pathname: `/${process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID}/**/*`,
    },
  ],
},

Actual Behaviour: On AWS Amplify, the rule is not being applied as expected. Instead, the optimization process is allowing images from any Contentful space to be processed, which could lead to potential forgery issues. For example, an image URL like https://xyz.com/_next/image?url=https://images.ctfassets.net/OTHER_SPACE_ID/image.png is processed, even though it should be restricted to my specified Contentful space.

Expected behavior

The image optimization should only process images from the specified Contentful space, as defined by process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID. This behavior works correctly when deployed on Vercel.

Reproduction steps

Set up a Next.js project with the remotePatterns configuration as shown above.
Deploy the project on AWS Amplify.
Try accessing an image from a different Contentful space.
Notice that the image is processed, even though it doesn't match the specified pathname.

Additional Context: This issue seems specific to AWS Amplify, as the same configuration works as expected on Vercel, where only the images from the specified Contentful space are processed.

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

The above image is not coming from my contentful space but is hosted somewhere else. But the user can pretent that it is coming from my site which might be valid and tricky to normal users.

Note: The site url is not the exact URL but you can replicate it at your end

aws-amplify / amplify-js