How to Configure Strict Cross-Origin Opener Policy (COOP) Restrict-Properties Mode in Google Chrome

Cross-Origin Opener Policy (COOP) protects web applications against cross-origin information leaks and side-channel vulnerabilities such as Spectre. Historically, enabling same-origin isolation severed all script interactions with cross-origin popups, breaking legitimate third-party single sign-on (SSO) and payment flows. Google Chrome introduces the restrict-properties mode for COOP, providing an intermediate isolation level that preserves a restricted WindowProxy interface for cross-origin windows while isolating full memory spaces. This guide details how to configure and audit restrict-properties in Google Chrome.

Understanding COOP Restrict-Properties Isolation

When an application deploys Cross-Origin-Opener-Policy: restrict-properties, Chrome places the page into a restricted browsing context group. Unlike standard same-origin, which completely disconnects the opener reference, restrict-properties retains a constrained WindowProxy. Cross-origin documents can only access window.postMessage(), window.closed, and window.close(), preventing arbitrary DOM inspection or memory probing while allowing framed or popped-up payment gateways and federated identity providers to communicate bidirectionally.

Configuring Server Headers for Restrict-Properties

To deploy this policy, deliver the HTTP response header across all primary document requests:

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: require-corp

For Apache web servers, configure the following block in your .htaccess or virtual host configuration:

<IfModule mod_headers.c>
    Header set Cross-Origin-Opener-Policy "restrict-properties"
    Header set Cross-Origin-Embedder-Policy "require-corp"
</IfModule>

For NGINX environments, include the header directives within your server block:

server {
    listen 443 ssl http2;
    server_name portal.example.co.uk;

    add_header Cross-Origin-Opener-Policy "restrict-properties" always;
    add_header Cross-Origin-Embedder-Policy "require-corp" always;
}

Auditing Context Boundaries in Chrome DevTools

1. Launch Google Chrome and navigate to your web application.
2. Press Ctrl + Shift + I (or Cmd + Option + I on macOS) to open DevTools.
3. Navigate to the Application panel and locate Frames in the left sidebar.
4. Select the top document frame and review the Security & Isolation section.
5. Verify that Cross-Origin Opener Policy displays restrict-properties and that cross-origin popup references expose only minimal communication channels.

Testing Script Interactions Across Context Boundaries

Execute this diagnostic script in the Chrome Console to confirm that privileged properties remain blocked while postMessage succeeds:

// 1. Open cross-origin popup
const popup = window.open('https://login.partner-service.co.uk/auth', '_blank', 'width=500,height=600');

// 2. Attempt property access and catch expected security boundary
try {
  console.log("Popup document URL:", popup.location.href);
} catch (e) {
  console.warn("Expected boundary: cross-origin location blocked by restrict-properties.");
}

// 3. Dispatch safe message across restricted WindowProxy
window.addEventListener('message', (event) => {
  if (event.origin === 'https://login.partner-service.co.uk') {
    console.log("Authorised handshake received:", event.data);
  }
});
popup.postMessage({ action: 'handshake' }, 'https://login.partner-service.co.uk');

Handling Reporting Endpoints and Violations

Pair the policy with the Reporting API to monitor third-party scripts that fail to adapt to restricted boundaries:

Cross-Origin-Opener-Policy-Report-Only: restrict-properties; report-to="coop-endpoint"
Reporting-Endpoints: coop-endpoint="https://telemetry.example.co.uk/coop-reports"

Inspecting reports in the Chrome DevTools Application > Reporting API tab ensures seamless migration without breaking client authentication workflows.