Volume 5

Q269: Browser Isolation Headers COOP COEP and CORP

Difficulty: StaffFrequency: MediumAnswer time: 12-16 minutes

What Interviewers Want To Evaluate

Interviewers want to know whether you understand modern browser isolation headers and why they exist.

They want to hear how COOP, COEP, and CORP affect cross-origin isolation, embedding, shared memory APIs, resource loading, and third-party compatibility.

Short Interview Answer

COOP, COEP, and CORP are browser isolation headers that control browsing context isolation and cross-origin resource loading. COOP isolates the top-level document from other browsing contexts, COEP requires embedded resources to explicitly allow being loaded, and CORP lets a resource declare who may load it. Together, the right policies can enable cross-origin isolation for features like SharedArrayBuffer, but they can also break third-party scripts, images, iframes, or assets if rolled out without inventory and testing.

Detailed Interview Answer

Modern browsers defend against side-channel attacks and cross-origin data exposure with stronger isolation controls.

Three important headers:

Cross-Origin-Opener-Policy
Cross-Origin-Embedder-Policy
Cross-Origin-Resource-Policy

Their abbreviations:

COOP
COEP
CORP

They sound similar, but they do different jobs.

COOP

COOP controls opener relationships between browsing contexts.

It can isolate a top-level page from other windows.

Common value:

Cross-Origin-Opener-Policy: same-origin

This can prevent cross-origin windows from sharing a browsing context group.

It helps reduce risks from window.opener and enables stronger isolation when paired with COEP.

COEP

COEP requires cross-origin resources loaded by the page to explicitly allow being embedded.

Common value:

Cross-Origin-Embedder-Policy: require-corp

This means resources must be same-origin, CORS-enabled, or served with compatible CORP headers.

COEP can break assets if third-party resources are not prepared.

CORP

CORP is sent by the resource.

It tells browsers who may load the resource.

Values include:

same-origin
same-site
cross-origin

Example:

Cross-Origin-Resource-Policy: same-origin

This prevents other origins from embedding the resource in some contexts.

Cross-Origin Isolation

Some powerful features require cross-origin isolation.

Examples:

SharedArrayBuffer
high precision timers in certain contexts
advanced performance or compute use cases

To become cross-origin isolated, pages often need:

COOP: same-origin
COEP: require-corp

But this can affect every subresource.

Rollout must be careful.

Third-Party Compatibility

Isolation headers can break:

analytics scripts
image CDNs
embedded videos
payment widgets
support chat
fonts
iframes
PDF viewers

Before enabling strict policies, inventory resources.

Ask vendors whether they support CORS or CORP.

Some features may need route-specific policies.

Security Headers Together

Isolation headers sit alongside:

Content-Security-Policy
Strict-Transport-Security
X-Content-Type-Options
Referrer-Policy
Permissions-Policy
frame-ancestors

They are not replacements.

They solve different browser security problems.

Rollout Strategy

A safe rollout:

inventory subresources
test in staging
enable route by route
monitor blocked resources
coordinate with third-party vendors
provide rollback
document why isolation is needed

Do not enable strict isolation globally without understanding the asset graph.

Interview Example

If asked, "Why did enabling COEP break our page?"

Answer:

"COEP requires embedded cross-origin resources to opt into being loaded through CORS or CORP. A third-party script, image, iframe, or font may not have returned compatible headers, so the browser blocked it. I would inspect blocked resources, identify whether each can be same-origin, CORS-enabled, or served with CORP, and consider route-specific rollout."

Common Mistakes

Common mistakes include:

confusing CORS and CORP
enabling COEP without resource inventory
breaking third-party embeds
assuming all CDNs send compatible headers
not testing PDFs or fonts
using global headers for route-specific needs
not documenting why SharedArrayBuffer is required

Senior-Level Framing

The senior framing:

"Browser isolation headers are powerful because they change what a page may be connected to or embed. I roll them out like security infrastructure: inventory, compatibility testing, staged enforcement, and monitoring."

Practice Prompt

Design isolation headers for:

public handbook page
practice console with heavy compute
PDF viewer
third-party video lesson
admin dashboard

For each, decide whether COOP, COEP, or CORP applies and what may break.

Final Mental Model

COOP, COEP, and CORP are about isolation and resource permission.

They can unlock powerful APIs and reduce risk.

They can also break the web of resources your page depends on.

Use them deliberately.