CSP to allow YouTube iframe

[azdanov]

How can I modify CSP configuration to allow YouTube iframes?

When using the https://github.com/gfscott/eleventy-plugin-youtube-embed plugin I'm getting an error in console:
Refused to frame 'https://www.youtube-nocookie.com/' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.

And the plugin generates this markup:

<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="100%" src="https://www.youtube-nocookie.com/embed/enTb2E4vEos" style="position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;" title="Embedded YouTube video" width="100%"></iframe>

If I try to use the share functionality from inside YouTube with it's generated markup I have the same error:
Refused to frame 'https://www.youtube.com/' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.

<iframe width="560" height="315" src="https://www.youtube.com/embed/enTb2E4vEos" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[cramforce]

Add your rule here https://github.com/google/eleventy-high-performance-blog/blob/main/_data/csp.js#L48

Something like ['iframe-src', 'https://www.youtube.com/embed/']

Should do it.

[azdanov]

['frame-src', 'https://www.youtube.com/embed/'] did the trick, thank you.

[indcoder]

Hi, I have an embedded video in my blog posts ....they were a few changes I had to do so that Lighthouse performance audit is also not adversely effected.

HackerspaceMumbai#3