Because your site has the Cross-Origin Embedder Policy enabled, each embedded iframe must also specify this policy

[CrypticSignal]

Before opening, please confirm:

• I have checked to see if my question is addressed in the FAQ.
• I have searched for duplicate or closed issues.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• I have removed any sensitive information from my code snippets and submission.

App Id

d2hzcewjwit905

AWS Region

eu-west-2

Amplify Hosting feature

CDK, Custom headers

Frontend framework

Next.js

Next.js version

13.5.6

Next.js router

App Router

Describe the bug

My Next.js 13 app (https://main.d2hzcewjwit905.amplifyapp.com/) which uses ffmpeg.wasm tries to make a request to https://main.d2hzcewjwit905.amplifyapp.com/_next/static/chunks/795.ceab62a43c56068c.js when trying to convert a file. You can see this in the network tab. This gives the following error:

I'm not sure how to resolve this. I have set Cross-Origin-Embedder-Policy to require-corp for all paths in next.config.js (unless source: "/(.*)" doesn't match all paths? I tried source: "/" too and got the same issue).

The source code for my project which includes my next.config.js file can be found here: https://github.com/CrypticSignal/av-converter-amplify

Expected behavior

I was expecting no COEP related issues as I have set the following in next.config.js:

async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Cross-Origin-Embedder-Policy",
            value: "require-corp",
          },
          {
            key: "Cross-Origin-Opener-Policy",
            value: "same-origin",
          },
          {
            key: "Access-Control-Allow-Origin",
            value: "*",
          },
        ],
      },
    ];
  },

Reproduction steps

1. Go to https://main.d2hzcewjwit905.amplifyapp.com
2. Open devtools and go to the network tab
3. Try to convert a file
4. After a few seconds, you should see a request being made to https://main.d2hzcewjwit905.amplifyapp.com/_next/static/chunks/795.ceab62a43c56068c.js and the following error:

Build Settings

version: 1
frontend:
  phases:
    build:
      commands:
        - yarn install
        - yarn build
  artifacts:
    baseDirectory: .next
    files:
      - "**/*"
  cache:
    paths:
      - node_modules/**/*

Additional information

Platform: Web compute

The vercel deployed version works: https://av-converter-amplify.vercel.app

Therefore, Amplify and/or CloudFront is definitely the cause of the issue with the Amplify hosted version: https://main.d2hzcewjwit905.amplifyapp.com

I have also deployed a regular React version which doesn't use Next.js (https://main.d18xlq54508lji.amplifyapp.com) to check whether the issue is Next.js related. I get the same issue so the issue is not related to Next.js but rather caused by Amplify and/or CloudFront.

[CrypticSignal]

Any update on this?

[lucasgjorge]

You should try adding the credentiallesss attribute to your tag, it might work!