Cross-origin requests can expose your web application to a variety of vulnerabilities and side-channel attacks if not correctly managed. One way to mitigate these risks is by using the Cross-Origin Embedder Policy (COEP) HTTP security header. Below, we'll explore what COEP is, how it works, potential vulnerabilities if it's not used, and how to implement it in popular server environments.
Cross-Origin Embedder Policy is an HTTP response header designed to control how cross-origin resources are embedded into a document. By enforcing specific rules on resource loading, COEP helps protect against malicious cross-site scripting attempts, data leaks, and Spectre-style side-channel attacks.
When this policy is in place, the browser checks whether cross-origin resources are explicitly allowed to be embedded. If they are not, the browser will block them, preventing dangerous or untrusted content from being injected into your site.
COEP is applied via an HTTP response header:
Cross-Origin-Embedder-Policy: [directive]
Depending on the directive, different constraints apply to how resources are fetched or embedded.
Behavior: This is the default policy, which does not impose any additional embedding restrictions.
Use Case: If COEP is not explicitly set, browsers behave as though unsafe-none is in place, allowing resources to load without further checks.
Behavior: All cross-origin resources must explicitly grant permission to be embedded. This can happen via:
Use Case: Ideal when you need strong isolation and have control over all embedded resources or can ensure they are served with the appropriate CORP/CORS headers.
Behavior: Cross-origin resources fetched in no-cors mode are requested without credentials (no cookies), and any credential-based details in the response are discarded. It still adheres to standard CORS checks for requests that are made in cors mode.
Use Case: Useful when you want cross-origin isolation but can't modify every third-party resource to include CORP or CORS headers. It provides a middle ground by removing credentials from no-cors requests while still allowing them.
Enabling Cross-Origin Embedder Policy helps avoid these pitfalls by ensuring embedded content is authorized, validated, and cannot leak sensitive information.
Each server technology has its own configuration style. Below are straightforward examples of how you might enable Cross-Origin Embedder Policy with different directives.
In Apache, you typically add headers in your site's configuration file or an .htaccess file. Use the Header directive (mod_headers must be enabled):
<IfModule mod_headers.c>
# Enforce require-corp
Header set Cross-Origin-Embedder-Policy "require-corp"
# Alternatively, you can use credentialless
# Header set Cross-Origin-Embedder-Policy "credentialless"
</IfModule>
Placement: Preferably place these directives in the <VirtualHost> block or server-level configuration to cover your entire domain.
Tips: Combine with Cross-Origin-Opener-Policy and appropriate CORP/CORS headers for the best protection.
In Nginx, the header is typically added inside a server or location block within your configuration file (e.g., nginx.conf):
server {
listen 80;
server_name example.com;
location / {
add_header Cross-Origin-Embedder-Policy "require-corp" always;
# Alternatively:
# add_header Cross-Origin-Embedder-Policy "credentialless" always;
# Other configuration...
}
}
Always Directive: Using always ensures the header is sent even on error responses.
Reload: Make sure to reload or restart Nginx to apply changes.
For Windows-based servers running IIS, you can add the Cross-Origin Embedder Policy header in your web.config:
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Cross-Origin-Embedder-Policy" value="require-corp" />
<!-- Or use credentialless:
<add name="Cross-Origin-Embedder-Policy" value="credentialless" /> -->
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
Location: Insert this snippet in the root web.config if you want it applied across the entire application.
Testing: Use IIS Manager or a third-party tool to confirm the header is correctly returned in HTTP responses.
Implementing Cross-Origin Embedder Policy is a crucial step in bolstering the overall security posture of your web application. By enforcing explicit permission for cross-origin resources, you reduce the risk of data leaks and other sophisticated attacks. You'll also gain access to powerful browser features that rely on cross-origin isolation, ultimately improving both the performance and security of your site.
Learn more about Cross-Origin Embedder Policy from these authoritative sources:
Learn about other HTTP security headers to strengthen your website's security: