Refused to frame 'https://www.youtube.com/' because it violates the following Content Security Policy directive: "frame-src 'X'

Question

I am trying to embed a YouTube video in my website using iframe and it was working quite fine before i decided to start using an ssl certificate and then these CSP errors started coming out.

I am doing the following HTML code:

<iframe width="1200" height="630" src="https://www.youtube.com/embed/X" 
    allowfullscreen="allowfullscreen"
    mozallowfullscreen="mozallowfullscreen"
    msallowfullscreen="msallowfullscreen"
    oallowfullscreen="oallowfullscreen"
    webkitallowfullscreen="webkitallowfullscreen" >
</iframe>

and i have tried all the following to fix the error but it's still not working:

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

and it always give the error as follows:

Refused to frame 'https://www.youtube.com/' because it violates the following Content Security Policy directive: "frame-src 'X'.

and when i don't add any meta statements in regards to CSP it does the following error:

Refused to frame 'https://www.youtube.com/' because it violates the following Content Security Policy directive: "frame-src 'none'.

I am not sure what exactly i am doing wrong in the above.

Answer 1

You need to set following CSP:

<meta http-equiv="Content-Security-Policy" content="frame-src youtube.com www.youtube.com">

Based on this answer.