Ensuring web security is one of the most important tasks of cybersecurity experts, and there is one essential tool that can be used to protect the integrity of websites and online apps, and such tool is known as Cross-Origin-Embedder-Policy (COEP).
Despite its intricate name, this policy plays a key role in stopping security threats by regulating the incorporation of web resources into a page from external sources. COEP is a security feature that allows only reliable elements to access your website, which shields us against some potential vulnerabilities.
Let’s see what is Cross-Origin-Embedder-Policy (COEP), how does it work, and how it can be used to protect our websites and users.
Contents
What is Cross-Origin-Embedder-Policy?
Cross-Origin-Embedder-Policy (COEP) works as a web security policy header, addressing security issues related to embedding resources from different origins within web pages. This header allows developers to manage the loading of resources on a page, thus mitigating specific threats like mixed content attacks.
Through the usage of Cross-Origin-Embedder-Policy, devs gain the ability to define how resources from external origins are incorporated in a web page. This involves setting directives that mandate resources to load in isolation, preventing the potential leakage of information. To keep it simple, this header acts as a tool to enforce a safe origin policy, shielding websites and users against security vulnerabilities.
Mozilla docs tell us that “The HTTP Cross-Origin-Embedder-Policy (COEP) response header configures embedding cross-origin resources into the document.”
Understanding the Cross-Origin-Embedder-Policy
Cross-Origin-Embedder-Policy (COEP) works as a security header, managing the embedding of documents from different origins to enhance web security.
By including the COEP header with a designated directive, servers guide browsers on how to handle the integration of content. For example, configuring COEP to “require-corp” means that embedded content originates from the same source as the hosting document, which boosts security against potential cross-origin threats. As another example, using “require-trusted-types-for” prompts the browser to enforce Trusted Types for specified resource types, reducing vulnerabilities related to code injection.
Cross-Origin-Embedder-Policy allows web developers and sysadmins to enforce security protocols related to cross-origin embedding, thus making web browsing a safer experience.
Usage statistics provided BuiltWith indicate that barely 1500 of the top 1 million websites use this header.
Mixed content attacks
Mixed content attacks involve a security risk on websites when both secure (HTTPS) and non-secure (HTTP) elements are combined. This mix can be used by attackers to compromise the website’s security.
In this scenario, Cross-Origin Embedder Policy (COEP) comes into play as a security measure. COEP allows website owners to specify which sources are allowed to embed content into their pages. By defining these embedding rules, COEP helps prevent unauthorized sources from introducing potentially harmful content, preventing mixed content attacks.
COEP has a security role, guiding how content is embedded in a way that complements HTTPS security. By using COEP, website owners can ensure that only trusted sources are allowed to embed content securely. This tight control over embedding helps eliminate the risk of mixed content attacks, where insecure elements could otherwise be exploited to compromise the security of the website.
Cross-Origin-Embedder-Policy as a vulnerability
Cross-Origin-Embedder-Policy (COEP) is not a vulnerability; rather, it serves as a security header to enhance web security.
Its purpose is to prevent specific cross-origin data leaks by ruling whether a document can be embedded in another context. Properly employed, COEP contributes to increase web security by limiting unintended cross-origin embedding. However, as with any security tool, its efficacy depends on correct implementation. Misconfigurations or incomplete adoption may expose vulnerabilities.
Cross-Origin-Embedder-Policy and CORS?
Cross-Origin-Embedder-Policy (COEP) and Cross-Origin Resource Sharing (CORS) are related but have distinct roles in web security.
CORS manages how web pages request and access resources from different origins, focusing on browser security. Meanwhile, COEP is focused on preventing the cross-origin embedding of resources, specifically influencing how resources are loaded within a page.
While both contribute to web security, COEP deals with embedding policies, while CORS governs interactions between web pages and resources from diverse origins.
Yes, Cross-Origin-Embedder-Policy (COEP) and Cross-Origin Opener Policy (COOP) are related security headers employed together to boost web security.
While COEP manages the embedding of resources within documents to prevent cross-origin information leaks, COOP rules the relationships between documents and their openers, controlling cross-origin communication. The combination of COEP and COOP has a key role in increasing web security, addressing different fronts of cross-origin interactions.
Configuring both headers correctly is important to mitigate potential security risks associated with cross-origin interactions.
Cross-Origin-Embedder-Policy browser support
Let’s see which modern web browsers provide support for COEP.
- Google Chrome: COEP is supported in Chrome. In fact, it was the first browser, along with Edge, to provide support for COEP starting in May 2020.
- Mozilla Firefox: COEP is supported in Firefox, starting from version 85. Firefox was the third major browser to support it.
- Microsoft Edge: COEP is supported in Edge, but not in Internet Explorer. Edge follows the same implementation as Google Chrome, and has supported COEP since 2020.
- Apple Safari: COEP is supported in Safari since late 2021. Apple came very late to the party, but at least nowadays it’s fully supported.
Cross-Origin-Embedder-Policy examples
As we already explained, the Cross-Origin-Embedder-Policy (COEP) header is a security feature that helps prevent cross-origin embedding of a resource. It allows web developers to control how a document is embedded in another document or loaded into a browsing context. Let’s check a few examples of Cross-Origin-Embedder-Policy usage:
Require-Corp (Cross-Origin-Resource-Policy):
Cross-Origin-Embedder-Policy: require-corp
This header enforces a stricter policy, requiring that all embedded resources must be delivered with the Cross-Origin-Resource-Policy (CORP) header. It ensures that the embedded content is loaded securely.
Unsafe-None:
Cross-Origin-Embedder-Policy: unsafe-none
This one allows embedding of cross-origin content without restrictions. It essentially disables COEP checks, and the embedded resource can be loaded without constraints. Be very careful using this header.
Same-Origin:
Cross-Origin-Embedder-Policy: same-origin
This restricts the document to only load resources from the same origin, preventing cross-origin embedding. It enhances security by isolating content to the same origin.
Strict-Origin:
Cross-Origin-Embedder-Policy: strict-origin
Similar to same-origin, but allows embedding from the same origin and resources with the cross-origin attribute.
In our list of COEP examples, you can see how Cross-Origin-Embedder-Policy can be configured to control the embedding of resources.
How to configure Cross-Origin-Embedder-Policy
Enabling Cross-Origin-Embedder-Policy (COEP) in Apache and Nginx is pretty easy. This task involves configuring HTTP headers to specify the desired embedding policy for web resources. These configurations will enhance our site’s security by controlling how documents are embedded in other documents or loaded into browsing contexts.
Setting up Cross-Origin-Embedder-Policy in Apache
In Apache, you can set COEP headers using the Header directive in your server configuration file (httpd.conf) or .htaccess file. To enable COEP, add the following lines:
<IfModule mod_headers.c> Header set Cross-Origin-Embedder-Policy "require-corp" </IfModule>
This example sets COEP to “require-corp,” which mandates that embedded resources must have the Cross-Origin-Resource-Policy (CORP) header, thus enhancing security. As explained in the examples before, you can also use other headers like same-origin, strict-origin, and so on.
If you added this rule to your .htaccess you won’t need to restart Apache, however, if you added it to Apache’s config file, then remember to restart it:
systemctl restart apache2
Enabling Cross-Origin-Embedder-Policy in Nginx
Enabling Cross-Origin-Embedder-Policy in Nginx is very easy too. You can use the add_header directive in your server block to set COEP headers. Here’s an example:
server {
add_header Cross-Origin-Embedder-Policy "require-corp";
}
This Nginx configuration example enforces the “require-corp” COEP policy.
Don’t forget to test your nginx config and restart it:
nginx -t systemctl restart nginx
How to add Cross-Origin-Embedder-Policy on IIS
Follow these steps to add the Cross-Origin-Embedder-Policy (COEP) header on IIS:
- Open the IIS Manager and select your site.
- In the site’s Features View, double-click on HTTP Response Headers.
- Click Add and set the header:
- Name: Cross-Origin-Embedder-Policy
- Value: require-corp or unsafe-none (depending on your needs).
- Save the changes and restart the IIS site.
Cross-Origin-Embedder-Policy testing
If you want to test if COEP is enabled on your site, please follow our guide:
- Access our web misconfiguration scanner.
- Type your domain in the scan box.
- Now tick the two boxes below, which are named ‘Clear cache’ and ‘Follow redirects’.
- Hit the Scan button.
- Now you have to scroll down to the section named ‘HTTP Security Headers’, and look for your ‘Cross-Origin-Embedder-Policy’ test results: if you got a ‘Passed’ in green it means your header is set properly, however, getting a ‘Failed’ in red means that you will have to update your current settings.
Cross-Origin-Embedder-Policy FAQ
Let’s answer some questions related to COEP and not directly covered yet in this article.
How does Cross-Origin-Embedder-Policy enhance web security?
COEP enhances web security by enabling sysadmins to enforce stricter controls over the embedding of resources from different origins. By specifying the embedding policy, we can prevent certain types of attacks, such as cross-site scripting (XSS), by isolating untrusted content in a separate browsing context, reducing its ability to interact with sensitive resources.
Is Cross-Origin-Embedder-Policy mandatory?
No, COEP is not mandatory. However, it is recommended as a security best practice, especially for sites that handle sensitive data or have a high risk of cross-origin attacks. Implementing COEP can help mitigate security risks associated with cross-origin content embedding.
Summary
Cross-Origin-Embedder-Policy (COEP) plays a key role in shielding websites against potential threats by regulating the embedding of web resources from external sources. At its core, COEP operates as a web security policy header, addressing issues related to embedding resources from diverse origins within web pages. By using COEP, developers can have great control over the loading of resources on a page, thus stopping specific threats such as mixed content attacks.
To make it simple, we can say that COEP allows only trustworthy elements to access websites, protecting them against potential vulnerabilities in embedded content. It works very well with other security headers, such as Cross-Origin Resource Sharing (CORS) and Cross-Origin Opener Policy (COOP), to address various aspects of cross-origin interactions. The combined deployment of COEP and COOP, for example, plays a lead role in increasing web security by regulating both resource embedding and document relationships.