Cross-Origin-Resource-Policy blocks all images

I hope it’s ok to ask here. I have looked on stackoverflow, r/webdev, reactiflux, etc. to no avail.

Console error: “Specify a Cross-Origin Resource Policy to prevent a resource from being blocked”

On the front end, I have a regular old image element: <img src='https://uilogos.co/img/logomark/nira.png' />

On the back end, I have helmet configured:

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        'img-src': [
          "'self'",
          'data:',
          'https://uilogos.co/img/logomark/nira.png',
          'https://images.unsplash.com',
        ],
      },
    },
    crossOriginResourcePolicy: { policy: 'same-site' },
  })
)

I added the crossOriginResourcePolicy: { policy: 'same-site' }, option after first getting the error.

I also added cors app.use(cors()) after reading on SO that the CORP policy is intended in addition to CORS, not instead of. The only other suggestions I have found on SO are along the lines of, just don’t use that policy or set it to ‘cross-origin’ but there’s a warning in console against doing that. “⚠️If you set this header, any website can embed this resource.”

Published site

Back end repo

Do I just need to download every image I need, so to avoid any calls to other origins?

[EvanHahn]

Sorry I haven’t responded here. This is still on my to-do list, but I’ve been busy.

I hope to get to it soon!

[EvanHahn]

You’re embedding an image from another origin, triggering the document’s “cross-origin embedder policy”. This policy, controlled by the Cross-Origin-Embedder-Policy header, has three modes:

1. unsafe-none, the default value. Your page can load cross-origin resources without permission from the remote origin.

   For example, your page on example.com would be able to load <img src="https://uilogos.co/img/logomark/nira.png"> with no issues.

2. require-corp, Helmet’s default value. Your page can load cross-origin resources, but the remote origin has to give explicit permission. It can do this with the Cross-Origin-Resource-Policy header or by using CORS.

   For example, your page on example.com can load <img src="https://uilogos.co/img/logomark/nira.png"> only if uilogos.co allows it. They’d need to do some work to support this.

3. credentialless. Your page can load cross-origin resources, but they can’t include credentials like cookies. This isn’t supported by all browsers.

I would recommend trying the credentialless policy to see if that works for you.

app.use(
  helmet({
    // ...
    crossOriginEmbedderPolicy: { policy: 'credentialless' }
  })
)

One last thing: your Content-Security-Policy looks right to me. It’s another way of restricting what your page can do, but isn’t exactly related.

I think this answers your question, so I’m going to close this issue. Let me know if that’s wrong and I’ll reopen.