Why iframe enforce the parent page’s Content Security Policy instead of its own

I’m working with an iframe and attempting to define its own Content Security Policy (CSP) using the csp attribute and the sandbox attribute. Here’s the HTML structure of my iframe:

<iframe
  sandbox="allow-scripts"
  csp="default-src *; script-src * 'unsafe-inline' 'unsafe-eval'; style-src * 'unsafe-inline';"
  srcdoc="...myContent"
></iframe>

The issue is that scripts and styles within the iframe are still being blocked based on the CSP of the parent page, even though I explicitly define a csp attribute in the iframe itself. For example, the following script fails to load with an error:

Refused to load the script 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js' because it violates the following Content Security Policy directive: "script-src 'nonce-m5JxllYLAaAYeolMNX0mQg==' 'strict-dynamic'".

This restriction ('nonce-m5JxllYLAaAYeolMNX0mQg==' and 'strict-dynamic') is from the CSP of the parent page, not the iframe. My understanding is that the csp attribute on the iframe should allow it to enforce its own CSP rules and ignore the parent page’s CSP.

Questions:

  1. Why is the iframe still enforcing the parent page’s CSP instead of its own?
  2. Is there a way to fully isolate the iframe’s CSP so it loads resources according to the policies defined in the csp attribute?
  3. Is this behavior expected, or is it a bug or limitation in modern browsers?

Additional Context:

  • The iframe includes the sandbox="allow-scripts" attribute to isolate its context.
  • I am dynamically injecting content into the iframe using srcdoc and the csp attribute.