Yes, another question about the CSP not loading a base64 image BUT I have researched a lot and can't find the solution. I have tried every configuration I've founded and still doesn't works.
So, what I'm trying is to load an Base64 image via Javascript.
var dataString = jQuery('#signature').jSignature('getData');
JQuery('#sig').append("<img class='imported' src='" + dataString + "'></img>");
As you can see it's not a big deal appending the base64 image (in localhost it works).
Then, searching about the CSP I found that the correct configuration to avoid the CSP with the Base64 Images is (and this is how I have the configuration):
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data:; font-src 'self' data:";
I have no problem with the font base64 but with the images it always throws this error:
Refused to load the image 'data:image/png;base64,...' 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.
Any ideas will be really appreciated, I really have no idea what is happening.
Have you tried as #Phonolog said. I have tried creating a plugin to support image url in importData rather than data-url-formatted.
Please check this post and see if it helps.
Create a jSignature plugin which sets the img src to the signature url.
inject the plugin
on importData remember to pass the plugin identifier
This way you can remove the data: from the csp header and self should be enough (img-src 'self')
Related
I want to enforce CSP as a security measure in my web application.
From the server end , I have set the policy to "allow" self for all of its resources.
However there is one particular front end node_module file , which is throwing error as attached below.
The CSP header set is :
script-src 'self' 'node_modules/aurelia-webpack-plugin/runtime/empty-entry.js'; script-src-elem 'self'; style-src 'self'; img-src 'self'
Please help , I have been trying to find a solution for more than a week now!
Solutions tried:
Try the front end to make it ignore this file since it is an empty file. But I am not able to get it to ignore.
Trying from server end to bypass this particular file by changing the rules
TIA.
Update:
Error message
UnCaught EvalError: 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 'self'"
at ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
The file seems to be allowed to load as it is loaded from the same source and you have allowed script-src 'self'.
The problem seems to be that the code in the file does eval(), new Function(), setInterval() or setTimeout(), which requires 'unsafe-eval' to be allowed. This is strange given that the file should be empty. Your console errer may provide you with a direct link to the offending code.
You could add 'unsafe-eval' to script-src. This would make your CSP less strict, but it is of course a lot better to set "script-src 'self' 'unsafe-eval';" than to not restrict scripts with a CSP at all.
I am developing a site and I have a problem with the Content Security Policy. It is triggered when I try to retrieve images from my DB for example or when I want to retrieve my font from google...
Here is the github link of the project: https://github.com/BaptisteHardelin/Cocktail-bar
Thank you for your help.
You have defined a policy in a meta tag here: https://github.com/BaptisteHardelin/Cocktail-bar/blob/d7f11ec45f4c479f77ef5d9ac1d77bdf8aa5cee2/views/partials/header.ejs
However, your policy sets img-src and the browser console says you don't. The most likely explanation is that something sets another policy in a response header with "default-src 'none'". You will need to disable the other policy or move your own policy there. Then your image will likely show and you need to add that google domain for the font (fonts.gstatic.com?) to font-src.
Hi I found my policy and it'is <meta http-equiv="Content-Security-Policy" content="default-src * gap:; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src *; img-src * data: blob: android-webview-video-poster:; style-src * 'unsafe-inline';"> thanks for your help
I am working on Drupal 9.3.8 site and using CSP module to setup the CSP header.
There are few core dependencies or contrib modules which require unsafe-inline in CSP header but scanner recommends not the have unsafe-inline, so looking for the fix to remove the use of unsafe-inline.
Dependencies that require unsafe-inline:
Drupal core ckeditor, modernizer and AJAX calls - which can be handled by CSP module used above which adds unsafe-inline only when ckeditor renders, but not when only modernizer is required.
Google Analytics module - which adds the script inline instead of putting it in a file and include it on each page. We have the patch compatible with D7 but not for D8/9.
AntiClickJack snippet which is as below:
<style id="antiClickjack">body{display: none !important;}</style>
Solutions:
Installed and setup CSP module as mentioned above to handle Drupal core libs/dependencies requirement.
To handle only rendering of modernizer.js and unsafe-inline, will need customization to the CSP module.
For antiClickJack and google analytics script and style tags, cannot add hash or nonce as unsafe-inline will be ignored which will break the handling of Drupal core requirements
CSP header that I have is as below:
Content-Security-Policy: default-src 'self'; connect-src 'self' www.google-analytics.com; frame-src 'none'; img-src 'self' data: https://www.google-analytics.com; object-src 'none'; script-src 'self' www.googletagmanager.com www.google-analytics.com ajax.googleapis.com 'unsafe-inline'; script-src-elem 'self' www.googletagmanager.com www.google-analytics.com ajax.googleapis.com; style-src 'self' 'unsafe-inline'; frame-ancestors 'none';
Questions:
How to handle antiClickJack snippet to avoid the use of unsafe-inline?
Do we have a customized approach to add the google analytics script to a file instead of adding it inline?
Add the following hash to your style-src: 'sha256-NHgJfLahpnqTyd+gTNfZfM2wjTUfB3Wk1CvqZfZpeHY=' Most browsers will suggest a hash for you, or you can use https://report-uri.com/home/hash. Note that the hash works as long as the content is unchanged, so only use it for static code.
Google Analytics and Google Tag Manager are not easy to implement without 'unsafe-inline'. You might be able to move to a file, but I don't know if that has an impact on the order of events. You will also need to look into CSP nonces for the code they insert. You will need to configure them to use your nonce and make sure that a new nonce is created for every page load. My experience is that setting a custom value for the nonce and change it for every page load is not trivial or possible within some frameworks, but worth giving a try.
I have something like this in a meta tag in my pug. I have a ton 2 3 CDN in my File.
meta(http-equiv='Content-Security-Policy' content="default-src * 'unsafe-inline' 'unsafe-eval'; script-src-elem * 'unsafe-inline';" )
I get an error something like this although I have defined the script-src-elem.
Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
I would really appreciate your help. Thank you in Advance
Let me guess. You use PUG linked with Express. In the Express you use Helmet security middleware.
The point is that Helmet 4 publishes CSPs by default via an HTTP header, and
script-src 'self' is a fragment of this Helmet's default CSP.
Since you have one CSP published, you can't relax it using a meta tag. In case of 2 CSPS published all sources should pass unscratched through both CSPs. Therefore your script-src-elem * 'unsafe-inline' from meta tag does not trigger violation, but script src 'self' from the CSP HTTP header - does rise it.
You have to remove meta tag and configute Helmet via helmet.contentSecurityPolicy(options). Or disable CSP in Helmet and use a meta tag:
app.use(
helmet({
contentSecurityPolicy: false,
})
);
Seems like your browser does no support this directive.
The Message you get is explained on MDN script-src-elem
If script-src-elem is absent, User Agent falls back to the script-src
directive, and if that is absent as well, to default-src.
And by the way:
specifies valid sources for JavaScript elements, but not inline script event handlers like onclick
My CSP policy is being ignored by the latest version of Chrome. I decided today to recreate the policy to try debug why, but as you can see from the error below, Chrome is advising me to add a hash that is already in the CSP (see sha256-idz8mDU5fJ8lJuEwY6hbkXVde/nqBBjQE/u5rxw1HUk=):
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://pro.fontawesome.com/ 'sha256-LpfmXS+4ZtL2uPRZgkoR29Ghbxcfime/CsD/4w5VujE=' 'sha256-F+21FF3QOEHS5CNuMQEs3Q+LB0uULZF9DODEYnH/mMQ=' 'sha256-5uIP+HBVRu0WW8ep6d6+YVfhgkl0AcIabZrBS5JJAzs=' 'sha256-nK6A3vwzvwoN92MnHZrWtylYkYmW1jCQgTqWKQJNBMI=' 'sha256-idz8mDU5fJ8lJuEwY6hbkXVde/nqBBjQE/u5rxw1HUk='". Either the 'unsafe-inline' keyword, a hash ('sha256-idz8mDU5fJ8lJuEwY6hbkXVde/nqBBjQE/u5rxw1HUk='), or a nonce ('nonce-...') is required to enable inline execution.
This is working correctly in Firefox and Safari, so I'm thinking that there is something in my policy that is causing Chrome to stop reading values?
The content of my .htaccess file is:
Header set Content-Security-Policy "default-src 'none'; connect-src 'self'; font-src 'self' https://pro.fontawesome.com/; frame-src 'self'; img-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' https://pro.fontawesome.com/ 'sha256-LpfmXS+4ZtL2uPRZgkoR29Ghbxcfime/CsD/4w5VujE=' 'sha256-F+21FF3QOEHS5CNuMQEs3Q+LB0uULZF9DODEYnH/mMQ=' 'sha256-5uIP+HBVRu0WW8ep6d6+YVfhgkl0AcIabZrBS5JJAzs=' 'sha256-nK6A3vwzvwoN92MnHZrWtylYkYmW1jCQgTqWKQJNBMI=' 'sha256-idz8mDU5fJ8lJuEwY6hbkXVde/nqBBjQE/u5rxw1HUk=';"
Any advise is greatly appreciated.
I think this resource answers your question:
https://bugs.chromium.org/p/chromium/issues/detail?id=546106
The styles being blocked in the examples are styles in a style
attribute, Chrome only applies styles in style attributes when
'unsafe-inline' is set in 'style-src'. Safari behaves similarly but
Firefox does apply the styles if they match a hash in 'style-src'.
The CSP specification defines the hash and nonce exceptions only for
the and elements, not for the style and script
attributes so Chrome's behaviour seems to follow the spec. But the
error message generated in the console is incorrect (and confusing).
By the looks of it Chrome is following the CSP specification. I was facing the same issue with inline styles and seeing the same response as you, matching sha256 hashes! My solution has been to remove my inline styles and add them into my CSS to avoid inline styles completely.
While the console logged:
Refused to apply inline style because it violates the following
Content Security Policy directive: "style-src 'self'
'sha256-tLBf5MoZ1LfLjLmXgREJmfznfoX6mUwoWQJnC30N6JI='. Either the
'unsafe-inline' keyword, a hash
('sha256-tLBf5MoZ1LfLjLmXgREJmfznfoX6mUwoWQJnC30N6JI='), or a nonce
('nonce-...') is required to enable inline execution.
The solution would be to add 'unsafe-hashes', like so: style-src 'self' 'unsafe-hashes' 'sha256-tLBf5MoZ1LfLjLmXgREJmfznfoX6mUwoWQJnC30N6JI='.
See the 'unsafe-hashes' directive: https://w3c.github.io/webappsec-csp/#unsafe-hashes-usage