Cross-Origin-Opener-Policy Header

Table of Content

• Syntax
• Directives
• Examples
• Browser Compatibility
• How to modify Cross-Origin-Opener-Policy header

The Cross-Origin-Opener-Policy (COOP) Header is a response header that allows you to mitigate certain types of attacks by isolating your site or app in a separate browsing context. It protects your application from cross-origin documents which can potentially interact with your application and possibly leak sensitive data.

Syntax

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Opener-Policy: same-origin-allow-popups
Cross-Origin-Opener-Policy: unsafe-noneCopy

Directives

The COOP header has three directives. same-origin that blocks all interactions between different origins, same-origin-allow-popups which allows popups that are from the same origin, and unsafe-none that removes all restrictions and is the default value.

Examples

To apply COOP header in a Node.js app using Express:

app.use(function (req, res, next) {
    res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
    next();
});Copy

Browser Compatibility

How to modify Cross-Origin-Opener-Policy header

ModHeader is a Chrome extension that allows you to modify request and response headers. It comes in handy when dealing with COOP headers. Here's how to use it:

1. Install ModHeader from Chrome Web Store.
2. Click on the extension and you will see Request Headers and Response Headers sections.
3. In the Response Headers section, click on Add button.
4. Enter Cross-Origin-Opener-Policy in the Header field and same-origin in the Value field.
5. Click Add button to save it.

Now every page you browse will have the COOP header set to same-origin, due to ModHeader intercepting the responses and modifying them. However, do note that this setting only applies locally to your browser and does not affect how other users interact with the website.