My content security policy is the following:
Content-Security-Policy: default-src 'self' https://fonts.googleapis.com https://ajax.googleapis.com; script-src 'self' https://fonts.googleapis.com https://ajax.googleapis.com; style-src 'self' https://fonts.googleapis.com; img-src 'self' ; font-src 'self' https://fonts.googleapis.com; connect-src 'self' https://ajax.googleapis.com; media-src 'self' ; object-src 'self' ; child-src 'self' ; frame-ancestors 'self' ; form-action 'none' ; sandbox allow-same-origin allow-scripts allow-pointer-lock;
You can partially implement it with meta http-equiv, but it does not allow you frame ancestors and sandboxing, from what I understand. You need to send a http header. However, my web host does not allow php commands coming from HTML files and I would like to avoid it anyway.
Long story short, what are my options to implement this policy while using Jekyll as a generator?
To test locally, you can specify custom headers with Jekyll. In your _config.yml add :
# Custom headers
webrick:
headers:
Content-Security-Policy: default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';
My-Other-Header: My-Other-Value
source: https://jekyllrb.com/docs/configuration/#custom-webrick-headers
It sounds like you've quasi-answered your own question, but you may not like the answer. Jekyll is simply a static HTML generation tool. It doesn't have the ability to do anything besides generate HTML which includes inline HTML headers.
If you don't have access to the web server (nginx, apache, passenger standalone, etc.) and as such can't write your headers from your server configuration file, then you'll have to find a way to generate the appropriate headers in your Jekyll template.
You should be able to set custom headers by setting the http-equiv properly in your Jekyll layout file (probably _layouts/default.html). Adding the following to this file should help your http-equiv CSP meta tag be included in all HTML pages generated by Jekyll with the default layout:
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self' https://fonts.googleapis.com https://ajax.googleapis.com; script-src 'self' https://fonts.googleapis.com https://ajax.googleapis.com; style-src 'self' https://fonts.googleapis.com; img-src 'self' ; font-src 'self' https://fonts.googleapis.com; connect-src 'self' https://ajax.googleapis.com; media-src 'self' ; object-src 'self' ; child-src 'self' ; frame-ancestors 'self' ; form-action 'none' ; sandbox allow-same-origin allow-scripts allow-pointer-lock;" />
PS - I realize this doesn't address the frame-ancestors piece you mentioned. Unfortunately I don't know the answer to that besides working with your web host provider to see if you can get them to insert your CSP header into your site configuration somehow.
Related
I'm adding Content-Security-Policy (CSP) on my website. But I'm getting an error, I would like to know if there's something wrong with my content.
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/; style-src 'unsafe-inline' 'self' https://fonts.googleapis.com https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/; font-src 'self' 'unsafe-inline' https://fonts.gstatic.com; frame-src https://www.google.com/recaptcha/;">
I'm getting this error:
Refused to load the script 'https://www.googletagmanager.com/gtm.js?id=GTM-NQBVT9' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
I got this error:
Refused to load the image 'blob:file:///cf368042-bf23-42b6-b07c-54189d3b0e01' because it violates the following Content Security Policy directive: "default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
While trying to load a mapboxGL map.
This is my CSP tag:
<meta http-equiv="Content-Security-Policy"
content="
worker-src blob:;
child-src blob: gap:;
default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
This is the fix for both image and base64.
Need to add img-src 'self' blob: data:; As follow:
<meta http-equiv="Content-Security-Policy"
content="
worker-src blob:;
child-src blob: gap:;
img-src 'self' blob: data:;
default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
You need to add img-src blob: in your CSP value.
Since img-src is absent, it is using default-src.
You can set img-src * also.
Please take a look at https://content-security-policy.com/ to check how to add CSP for image.
Normally,set img-src policy will fix the problem, but if you still get the same error.
Note that if you use the "helmet" middleware at the same time, your problem may come from it, and you need to configure it separately.
Add in content security policy
img-src 'self' 'unsafe-inline' blob: data: 'unsafe-eval';
i have the following Html
<object data="https://mybucket.s3-us-west-2.amazonaws.com/myfile.pdf" class="t-document-view" type="application/pdf"></object>
and the following CSP
"default-src 'none'; script-src 'self' 'nonce-{0}' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; object-src https://*.s3-us-west-2.amazonaws.com; connect-src 'self'; child-src 'self'; report-uri /csp/report;"
On all the machine with chrome browser we can view PDF without issue. However, one of our machine we are getting error
Refused to frame 'https://mybucket.s3-us-west-2.amazonaws.com/'
because it violates the following Content Security Policy directive:
"child-src 'self'". Note that 'frame-src' was not explicitly set, so
'child-src' is used as a fallback.
To get rid of the error i have temporarily added frame-src https://*.s3-us-west-2.amazonaws.com; and its working
I have already set object-src so not sure why its trying to implement frame-src policy when we are not using frame?
Google Chrome is up to date
Version 76.0.3809.132 (Official Build) (64-bit)
I have an app, in which the user would be able to copy an image URL, paste it unto an input and the image will be loaded on a box.
But my app, keeps triggering this message:
Refused to load the image 'LOREM_IPSUM_URL' because it violates the following Content Security Policy directive: "img-src 'self' data:".
That's my meta tag:
<meta http-equiv="Content-Security-Policy" content="default-src *;
img-src 'self' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
style-src 'self' 'unsafe-inline' *">
I'm using html2Canvas within the app, and when I remove this: "img-src 'self' data:"
It fires this error:
html2canvas.js:3025 Refused to load the image 'data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg'></svg>' because it violates
the following Content Security Policy directive: "default-src *".
Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
Along with a bunch of other errors.
Try replacing this part:
img-src * 'self' data: https:;
So the complete tag:
<meta http-equiv="Content-Security-Policy" content="default-src *;
img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
style-src 'self' 'unsafe-inline' *">
Content Security Policy Reference
img-src * 'self' data: https:; is not a good solution as it can make your app vulnerable against XSS attacks. The best solution here should be: img-src 'self' data:image/svg+xml. If it doesn't work try: img-src 'self' data:Consider changing it if you still have your directive as img-src * 'self' data: https:;
For helmet users.
Better practice instead of setting contentSecurityPolicy to false which should be the most last option. I used this in my app and it solves the issue very well. My app is hosted here. Checkout my source code here.
app.use(
helmet.contentSecurityPolicy({
useDefaults: true,
directives: {
"img-src": ["'self'", "https: data:"]
}
})
)
In addition to what has been contributed above by #manzapanza, you need to make sure if the CSP hasn't been configured in your application's web config file because if the setting exists it will override your meta tag setting in your index file like in the example below:
Index meta tag:
<meta http-equiv="Content-Security-Policy" content="default-src *;img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
Being overridden by a CSP setting in your web config file.
Web config setting:
<add name="Content-Security-Policy" value="default-src https: http: 'unsafe-inline'; img-src * 'self' data: https:;" />
In a case like this, consider having one set mostly in the system's web config file.
I was facing this same issue with my jspdf and html2canvas. I had used nginx too, and had configured "Content-Security-Policy" in my "conf/nginx-template.conf" file. Below changes fixed it for me:
add_header Content-Security-Policy <...>; img-src 'self' data: https:; frame-src 'self' data:;
If img-src 'self' data: is not working for you because you manipulate image with JavaScript, try also adding blob objects with img-src * 'self' data: blob: ;
This simply solves the problem:
img-src 'self' data:
But ensure multiple directives are separated using a semicolon (;)
I have the CSP (Content-security-policy) plugin-types policy set to white-list pdf type as below. When trying to open a PDF file in iframe with src attribute, It is working well with browsers IE 11, and Firefox 47+ but failing in Chrome 50+. What else is required to make it working in chrome?
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; object-src 'self'; style-src 'self'; frame-src 'self' plugin-types application/pdf;
Error in chrome console
Resource interpreted as Document but transferred with MIME type application/pdf
Refused to load 'http://127.0.0.1/module123/open.do?id=10000' (MIME type '') because it violates the following Content Security Policy Directive: 'plugin-types application/pdf'. When enforcing the 'plugin-types' directive, the plugin's media type must be explicitly declared with a 'type' attribute on the containing element (e.g. '<object type="[TYPE GOES HERE]" ...>').
I had a similar problem.
To resolve the problem, I needed to add blob: to the object-src directive.
Also, I did not need to specify plugin-type.
So it would be:
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; object-src 'self' blob:; style-src 'self'; frame-src 'self';