Configuring Headers #

This guide provides an overview on how to configure COOP/COEP headers, including hosting platform configuration.

WebContainers require that your page, even in development, is served with these two headers:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

These headers are needed because WebContainer requires SharedArrayBuffer, which, in turn, requires your website to be cross-origin isolated.

Some browsers support a different mode for cross-origin isolation: credentialless. If you wish to serve your content in this way, set your headers instead to:

Cross-Origin-Embedder-Policy: credentialless
Cross-Origin-Opener-Policy: same-origin

and make sure to boot your WebContainer specifying coep: 'credentialless'.

Cloudflare #

All pages #

You can configure headers for all pages in your _headers file:

/*
  Cross-Origin-Embedder-Policy: require-corp
  Cross-Origin-Opener-Policy: same-origin

Specific page #

You can configure headers for a specific page(/tutorial in this case) in your _headers file:

/tutorial
  Cross-Origin-Embedder-Policy: require-corp
  Cross-Origin-Opener-Policy: same-origin

Netlify #

All pages #

You can configure headers for all pages in your netlify.toml file:

[[headers]]
  for = "/*"
  [headers.values]
    Cross-Origin-Embedder-Policy = "require-corp"
    Cross-Origin-Opener-Policy = "same-origin"

Specific page #

You can configure headers for a specific page(/tutorial in this case) in your netlify.toml file:

[[headers]]
  for = "/tutorial"
  [headers.values]
    Cross-Origin-Embedder-Policy = "require-corp"
    Cross-Origin-Opener-Policy = "same-origin"

Read more here about headers on Netlify.

Vercel #

All pages #

You can configure headers for all pages in your vercel.json file:

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

Specific page #

You can configure headers for a specific page(/tutorial in this case) in your vercel.json file:

{
  "headers": [
    {
      "source": "/tutorial",
      "headers": [
        {
          "key": "Cross-Origin-Embedder-Policy",
          "value": "require-corp"
        },
        {
          "key": "Cross-Origin-Opener-Policy",
          "value": "same-origin"
        }
      ]
    }
  ]
}

Read more here about headers on Vercel.