How to prevent an iframe with srcdoc and defined csp from inheriting the parent page's CSP policies

[JuanRojasC]

I am using an iframe to load dynamic content through the srcdoc attribute. This iframe is configured with its own CSP policy using the csp attribute, as shown in the following code:

<iframe
    csp="default-src * data: 'unsafe-inline'; script-src * 'unsafe-inline'"
    sandbox="allow-scripts"
    srcdoc="...content..."
></iframe>

The iframe content includes dynamically provided scripts, styles, and other resources. While the iframe is correctly loading the CSP configuration specified in the csp attribute, it also inherits and applies the CSP policies from the parent page. The parent page's CSP is much stricter, and because of this, it overrides the iframe's custom CSP configuration. As a result, the iframe's content is restricted, which prevents it from functioning as intended.

How can I ensure that the iframe respects only the CSP defined in its csp attribute, without inheriting or applying the parent page's CSP?

[arturjanc]

This unfortunately isn't possible - if a srcdoc iframe allowed relaxing the page's CSP then any HTML injection could add srcdoc iframes with arbitrary data/scripts and bypass the protections offered by the parent document's policy.

As a workaround, you could load a shim empty iframe from the network, postMessage to it and document.write() the data into the frame. This will let you set an arbitrary CSP (or no policy at all) in the HTTP response returning the iframe.