CSP for embedding youtube video

Asked 12/11, 2020 at 17:7 Answered 7/1, 2022 at 22:5

Solved content-security-policy youtube-iframe-api

I've just started seeing this with my embedded youtube videos on Chrome (86.0.4240.193 - recently updated which is probably why I'm just seeing this) - these are 'reports' only, so the videos still show but 100s of errors can't be right! This is what I'm seeing:

[Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'strict-dynamic' 'unsafe-inline' https: 'report-sample' 'nonce-t9IE7nI2leo7qKxsm7d80g=='".

Here's my iFrame --

<iframe id="video-iframe" width="500" height="281" src="https://www.youtube.com/embed/HIDDENVIDEO" frameborder="0" allowfullscreen ></iframe>

I cannot figure out what the CSP should be -- here's one that I found that apparently solved their problem --

<iframe id="video-iframe" width="500" height="281" src="https://www.youtube.com/embed/HIDDENVIDEO" frameborder="0" allowfullscreen csp="script-src 'self' https://www.google-analytics.com/ https://www.youtube.com/ https://s.ytimg.com/; object-src 'self'; child-src https://www.youtube.com/* https://s.ytimg.com/"></iframe>

Not so much -- I just see: Refused to display....

Any help much appreciated.

I just checked the developers.google.com/youtube/iframe_api_reference#Examples page and I'm seeing the same thing -- surely this shouldn't be happening, right?

Blinkers answered 12/11, 2020 at 17:7 Comment(0)

As you can see, this error is triggered not your CPS - your's do not have 'nonce-t9IE7nI2leo7qKxsm7d80g=='" token. This error appears within Google's <iframe> and it's totally Google's internal deal.

The fact is that several previous versions of Chrome had a bug and did not block eval expressions.
In version 86 Chrome, they fixed this bug, and to verify this, they set the Report-Only header and made a fake call to eval to see reports.

CSP for Youtube is very simple and does not require 'unsafe-eval', because all works within isolated iframe:
frame-src youtube.com www.youtube.com; is enough to allow for Youtube in iframe.

By the way, your CSP has an error - the * is not allowed in path-part. And be careful with <iframe csp= - if server does not agree with your CSP, content will be blocked.
But this <iframe csp= played the role because of once more Chrome bug - it ignores Content-Security-Policy-Report-Only if Content-Security-Policy header presence.

Debauchery answered 14/11, 2020 at 10:48 Comment(6)

Thank you for your reply - much appreciated. I went through details at the link, so, I can simply ignore these - and no need to include a CSP, right? – Blinkers 14/11, 2020 at 21:8

Yes, you do not need any steps since it's not your CSP. Google is in charge for these, it will remove Content-Security-Policy-Report-Only header after check up. – Debauchery 15/11, 2020 at 2:12

@Debauchery A shame you linked to the solution instead of putting it in your Answer, as the link has apparently rotted away – Maddy 25/1, 2021 at 21:5

I apologize for the inconvenience caused. I added into answer CSP for youtube for any case. What else do you suggest adding to the answer? – Debauchery 25/1, 2021 at 23:12

I am sorry i tried the following: <meta http-equiv="Content-Security-Policy" content="frame-src youtube.com www.youtube.com;"> and it still does give me the same following error: Refused to frame 'youtube.com' because it violates the following Content Security Policy directive: "frame-src 'none'". – Claypoole 6/2, 2021 at 15:58

Check do you have a CSP header published, tutorial is here. If you have published CSP via HTTP header, the <meta CSP> can't relax it. In case of 2 CSPs at the same time and all sources should pass unscratched though both CSPs. – Debauchery 6/2, 2021 at 17:13

I was able to get my embedded videos working using a meta tag in the <head>

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; img-src https://*; child-src 'none'; frame-src youtube.com https://www.youtube.com;">

add the https:// to www.youtube.com

Junna answered 7/1, 2022 at 22:5 Comment(0)

Recommended topics

Hot tags