Fail to fetch image in AWS S3 - wrong request header

[BernardA]

What version of Next.js are you using?

10.0.6

What version of Node.js are you using?

14.15.4

What browser are you using?

Chrome

What operating system are you using?

mac Os

How are you deploying your application?

in development

Describe the Bug

Getting Access denied when trying to fetch images from S3, though S3 access policy seems correct.
Request is sent with headers below which do not seem correct given that it certainly is not same origin and it should in fact be CORS.
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: no-cors

Expected Behavior

Should fetch images correctly. It actually does so if I remove any conditions from S3 access policy and leave it completely public, which could be expected.

To Reproduce

see below

  <Image
        src={`${process.env.NEXT_PUBLIC_AWS_S3_ITEM_IMAGE}/${item.image.filename}`}
        alt={item.name}
        width="140"
        height="140"
    />

When loading the page with component above the following request is triggered:

As you can see the headers mentioned above are included, though they do not seem pertinent.

For information, the S3 bucket policy is as below:

 {
"Version": "2012-10-17",
"Id": "http referer allow websites",
"Statement": [
    {
        "Sid": "Allow get requests originating from localhost:3000 and quiamo.vote.",
        "Effect": "Allow",
        "Principal": "*",
        "Action": [
            "s3:GetObject",
            "s3:GetObjectVersion"
        ],
        "Resource": "arn:aws:s3:::quiamo-item-images/*",
        "Condition": {
            "StringLike": {
                "aws:Referer": [
                    "http://localhost:3000*",
                    "http://127.0.0.1:3000*",
                    "https://quiamo.vote*",
                    "127.0.0.1:3000*"
                ]
            }
        }
    }
]
}

[mercteil]

next config domains whitelisted?

https://nextjs.org/docs/basic-features/image-optimization#domains

  images: {
    domains: [...],
  },

[BernardA]

Yup! As said it fetches the images if I leave the S3 bucket as public with no conditions:

Here is my next.config on images

  images: {
    domains: [
        'mywebsite.com',
        'localhost',
        'mybucket1.s3-sa-east-1.amazonaws.com',
        'mybucket2.s3-sa-east-1.amazonaws.com',
        'mybucket3.s3-sa-east-1.amazonaws.com',
    ],
},

[styfle]

Are you expecting the Image Optimization API to forward the referer header from the browser to the upstream image server?

Currently it doesn't set any headers, it just requests the absolute url like so:

next.js/packages/next/next-server/server/image-optimizer.ts

Line 183 in 9fcfce3

const upstreamRes = await fetch(href)

The problem with relying on request headers is that the image response is cached. Consider this bug:

1. User A visits your page and image is served because the correct referer header is used
2. The image is currently cached at the Edge
3. User B visits a different domain, perhaps google images where its hotlinked, so the referer header does not match yet the image is unexpectedly served from the cache

For this reason, all images should be publicly accessible so the API can optimize and cache appropriately.

[misakamayako]

is this problem solved or there is another alternative solution?