IMG tag sourcing AWS S3 fails - CORB?

问题

I want to host images for a web project on an AWS bucket, then dynamically pull them as the HTML is rendered. This is giving me a lot more trouble than I anticipated.

Here's the offending tag:

<img src="https://s3.us-east-2.amazonaws.com/ibidnyc/Summer Smith/VERBAL/subsections/Summer-Smith-VERBAL-subtopic-POETRY-fig.jpg" alt="">

When I do this, I get a Cross-Origin Read Blocking (CORB) error (in the inspector; I'm running Chrome) - apparently, Chrome prevents linking to img sources on other websites in some cases? Cursory searches brought me here (zyst.io/how-to-fix-aws-s3-chrome-and-safari-cors-on-images) but I don't know how to apply it. Also, the article addresses CORS, not CORB (which I think is newer?).

回答1:

Here's a good StackOverflow post relating to CORB.

Specifically, here's a section I think may help:

In most cases, the blocked response should not affect the web page's behavior and the CORB error message can be safely ignored. For example, the warning may occur in cases when the body of the blocked response was empty already, or when the response was going to be delivered to a context that can't handle it (e.g., a HTML document such as a 404 error page being delivered to an <img> tag).

https://www.chromium.org/Home/chromium-security/corb-for-developers

Try to clear your cache and make sure that the data returned from that AWS link is truly an image and not another type of data. When I opened that AWS link in my browser, I get an XML error page, not an image:

<Error>
    <Code>PermanentRedirect</Code>
    <Message>
       The bucket you are attempting to access must be addressed using the specified endpoint. Please send all future requests to this endpoint.
    </Message>
    <Endpoint>s3.amazonaws.com</Endpoint>
    <Bucket>ibidnyc</Bucket>
    <RequestId>FF65E772274735DF</RequestId>
    <HostId>
        VW+SBil/6NVWG5lx0F1XmWSDJLTjwaTHbBPoVQQlDNV+71NY4eDQLJraGtM+pBSyjas3ByFKIis=
    </HostId>
</Error>

When researching that XML error, I found that it's likely that this bucket was created in a different region, i.e.not us-east-2. That's the only time I've seen this endpoint error.

US Standard is us-east-1

After changing your URL to us-east-1, I now get an AccessDenied error so I'm assuming the image has been found and you'll be able to access it.

<Error>
    <Code>AccessDenied</Code>
    <Message>Access Denied</Message>
    <RequestId>19E4B33430F54214</RequestId>
    <HostId>
        MF/m6yUhslgB3aB3ddoqnKwRAeABQq17wkaIqX09hwrvaZ+jPm8oIEVAY9HQpG5MShOp1Jf/HIg=
    </HostId>
</Error>

回答2:

Turns out @Brad was right. While I had instantiated the bucket as public, individual images uploaded to said bucket were still private.

Changing the bucket policy to this one did the trick (thanks h3xed.com!):

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Action": "s3:GetObject",
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::[bucket_name_here]/*",
      "Principal": "*"
    }
  ]
}

Bucket policy editing explained here.

Thanks to all contributors!

来源：https://stackoverflow.com/questions/60416197/img-tag-sourcing-aws-s3-fails-corb