I have created a web with an iframe element but I am having problems with the Content Security Policy, I have created one but I am still having problems. The link to my website is https://daniellop.me/comments
The errors that I'm getting are the following:
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The source list for Content Security Policy directive 'style-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The Content Security Policy directive 'report-uri' is ignored when delivered via an HTML meta element.
[Error] Unrecognized Content-Security-Policy directive 'worker-src'.
[Error] Refused to load https://c.daniellop.me/js/iframeResizer.min.js because it does not appear in the script-src directive of the Content Security Policy.
[Error] Refused to apply a stylesheet because its hash, its nonce, or 'unsafe-inline' does not appear in the style-src directive of the Content Security Policy. (comments.html, line 1)
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The source list for Content Security Policy directive 'style-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] Unrecognized Content-Security-Policy directive 'worker-src'.
[Info] Successfully preconnected to https://api.github.com/
[Error] Refused to load https://c.daniellop.me/en/widget?origin=https%3A%2F%2Fdaniellop.me%2Fcomments.html&session=ed4607482497cb466430f139%2BkgtddmKtaL8RbU%2FqGlagBFJqTeszuxjVT8vCzWLJOH1fuMPdKGfO2XE8xBrfJ%2BzXBXrZIUZ0LSQXt64xi7hZ7MO666GzN6notYDPb64gNQNwAWgiCrimp2f5yU%3D&theme=light&reactionsEnabled=0&emitMetadata=0&repo=daniellop1%2Fcomments&repoId=R_kgDOGmDcFQ&category=Comment&categoryId=DIC_kwDOGmDcFc4CAirK&description=&term=Main+comment+page because it does not appear in the frame-ancestors directive of the Content Security Policy.
Mi current Content-Security-Policy
<meta http-equiv="Content-Security-Policy" content="default-src 'self';
script-src 'report-sample' 'self' https://c.daniellop.me/client.js;
style-src 'report-sample' 'self' https://cdn.daniellop.me;
object-src 'none';
base-uri 'self';
connect-src 'self';
font-src 'self';
frame-src 'self' https://c.daniellop.me;
img-src 'self';
manifest-src 'self';
media-src 'self';
report-uri https://61d813c6adaa4253cc595f23.endpoint.csper.io/?v=2;
worker-src 'none';">The main source of errors is that you are using features of CSP level 3 while your browser is likely only compatible with CSP level 2. 'report-sample' and worker-src are only available in level 3. You should probably stick to level 2 at the moment until level 3 support increases.
You are setting CSP in a meta tag. Some directives can only be set in CSP when delivered as a response header, report-uri is failing due to this.
You have inline style in comments.html in violation of the current policy.
You should typically only include hosts in your list of sources and should replace https://c.daniellop.me/client.js with c.daniellop.me or https://c.daniellop.me.
There is also a frame-ancestors violation. As frame-ancestors is ignored in meta tags there must be another CSP set in a response header. Remember that if site A is framing site B, frame-src of site A will decide if it is acceptable to frame B while frame-ancestors of B will decide if it is acceptable to be framed by A.