How to allow iframe embedding only for whitelisted websites?

When embedding an iframe on your website, it is essential to ensure that only whitelisted websites (i.e., the allowlist) can embed your page. This helps prevent clickjacking attacks and other security vulnerabilities.

This can be achieved by setting the frame-ancestors directive of the Content Security Policy (CSP). This HTTP response header informs the browser which external resources can be loaded.

For example:

http
Content-Security-Policy: frame-ancestors 'self' https://example1.com https://example2.com;

The above CSP directive tells the browser to allow only the current domain ('self'), as well as https://example1.com and https://example2.com, to embed your page as an iframe.

As a result, if other websites not on the whitelist attempt to embed your content via an iframe, the browser will not load these iframes.

Below are specific examples of how to set up such a policy on a web server:

For Apache servers:

apache
<IfModule mod_headers.c>
    Header always set Content-Security-Policy "frame-ancestors 'self' https://example1.com https://example2.com;"
</IfModule>

For Nginx servers:

nginx
add_header Content-Security-Policy "frame-ancestors 'self' https://example1.com https://example2.com;";

Please exercise caution when modifying server configurations and ensure thorough testing in development or testing environments before deploying to production. Additionally, when implementing CSP policies, ensure they do not break other functionalities on the page. Therefore, implementing incrementally and conducting detailed testing is crucial.

Furthermore, the implementation and support of Content Security Policy may change with browser updates, so regularly check for the latest best practices and browser compatibility.