I've implemented Content Security Policy (CSP) for my existing application with react and node . In the header I've added csp code like this `
-
'Content-Security-Policy', 'default-src \'self\' https; script-src
\'self\'; connect-src \'self\'; img-src \'self\' data: ; font-src
\'self\' data: \https://fonts.googleapis.com\
\https://fonts.gstatic.com\ ; style-src \'self\'
\'sha256-rigr5uxAUhb5lEsRjTMBA5S2juuVOhHXstW+OjxdE+I=\'
\'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=\'
\'sha256-1tr38LWy83eluPFcuLQYtramGMCOjscxtiOqVJ/gMrc=\'
\'sha256-XmRbDWO4PqwfNgeZPWi3/fHjRx02kfcTM8yid7tdHmw=\'
\'sha256-ZAzabP7foNZKvX4PqkWVi1UH7ceqLrmDfa/nFYEjJFE=\'
\'sha256-JTGGKTw77cKzHSmo5g2N94OEWo3dbzNZQ/yT2IqNKow=\'
\'sha256-Bz44xM5KHxgdFnmpU755ZnbcU+V2yM+Ox5ljX4u+vVs=\'
https://fonts.googleapis.com; base-uri \'self\';form-action
\'self\';'
I thought script-src : self will load the files of current domain of the application but it's not . For example here I don't see application working of script-src :self
only if I add script-src : self http://localhost:6200/core.2d6b592992d851d11f4c.js http://localhost:6200/vendor.2d6b592992d851d11f4c.js http://localhost:6200/bundle.2d6b592992d851d11f4c.js it works
the application is bundled using webpack .
I've got two questions
Do we need to add the bundles in script-src even after giving script-src : self ? if yes the hash will be different for environments like stagging and production how can we handle that ?
can we use style-src : unsafe-inline ? or from that also script can be injected ?
any sort of explanation would be helpful !
If 'self' is localhost, it may not cover localhost:6200. Also if you are on https, http will not be included. Try adding http://localhost:6200 to script-src for development.
See https://scotthelme.co.uk/can-you-get-pwned-with-css/
Related
Even By using meta tags, It is still showing error and Iframe is not working
<meta http-equiv="Content-Security-Policy" content="
default-src *;
style-src 'self' 'unsafe-inline';
script-src * 'self' https://checkout.stripe.com 'unsafe-inline'
connect-src : * 'self' https://checkout.stripe.com 'unsafe-inline'
frame-src : * 'self' https://checkout.stripe.com 'unsafe-inline'
'unsafe-eval'
;" >
Link reference : https://stripe.com/docs/security/guide#content-security-policy
Error : Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”)
Also I used header() to set this up, but that also didn't worked. Any Help will be appreciated
Your CSP has a lot of errors:
You have missed semicolons ; to separate script-src / connect-src / frame-src directives lists.
: is nor required in the connect-src : * ... and in the frame-src : * ...
Remove 'unsafe-inline' and 'unsafe-eval' from the connect-src and frame-src directives, those are not supported there
The * (asterisk) covers any host-sources like https://checkout.stripe.com and wss://checkout.stripe.com
BUT these are not significant, these just leads the CSP you have really is:
default-src *;
style-src 'self' 'unsafe-inline';
script-src * 'self' 'unsafe-inline' 'unsafe-eval'
This CSP restrict nothing except data:-Urls usage. Therefore the error:
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”)
cannot belong your CSP.
Looks like you already have CSP header published somewhere. Hence second CSP via <meta> or HTTP header does not have effect as expected.
Check what CSP header you really have got in browser, the tutorial is here.
Check web-server config in Nginx for add_header Content-Security-Policy ... or .htaccess file (if Apache) for Header set Content-Security-Policy ... presence.
Or maybe you have installed some plugins for managing CSP headers.
You're missing img-src https://*.stripe.com described in the Stripe documentation.
Also the asterisk character alone doesn't work as "any resource" (example of incorrect use in your code: default-src *). You need to use it as part of the <host-source> (e.g. *.example.com). See MDN docs for more details.
I am a little confused with the directives available with Content Security Policy Header. Mainly confused with connect-src , script-src and style-src
I have a javascript, which sends Fetch, Ajax (on the same domain) and dynamically loads a link tag that has a stylesheet.
If I have to get my script whitelisted on a domain, should this be part of all connect-src, script-src and style-src ? I am a little confused here.
To make it clearer, there is a script at https://example.com which loads, sends data from https://example.com and loads stylesheet sitting at https://some-another-domain.com. How should the content security policy reflect this? Should connect-src , script-src and style-src include both the domains?
Could someone help clarify this?
Each directive should contain only sources which it covers (controls).
The connect-src directive covers the URLs from which resources can be loaded using following script API interfaces(see the test):
<a ping='...'>
fetch()
XMLHttpRequest()
sendBeacon()
WebSocket() (hence ws:/wss: scheme can be specified in connect-src/default-src only)
EventSource()
Therefore if you perform XMLHttpRequest('https://example.com/ajax') or use jQuery $ajax('https://example.com/ajax') which internally calls XMLHttpRequest(), you need to allow the https://example.com in the connect-src:
connect-src https://example.com;
Similarly if you use fetch('https://google.com/api/json'), you need to add this host-source to the connect-src:
connect-src https://example.com https://google.com/api/;
and so on for all 6 the APIs above.
The script-src directive controls 5 things:
external scripts loading via <script src='http://example.com/script.js'></script>. You need to allow relevant host-sources in the script-src for that. Alternatively 'nonce-value'/'hash-value' token can be used.
inline script blocks like <script>...</script>. You need to use 'unsafe-inline' or 'nonce-value'/'hash-value' tokens in the script-src to allow such scripts.
eval(), setTimeout(), setInterval(), Function(), setImmediate(), execScript() funct calls are gated on the 'unsafe-eval' source expression. If you use those you need to have 'unsafe-eval' in the script-src (with some exceptions for setTimeout()/setInterval()).
navigation to javascript-URLs like <a href='javascript:...'>.
inline event handlers in tags like <div onblur='...'>, <input onclick='...'>.
* for last 2 things you need to have 'unsafe-inline' in the script-src directive or use unsafe-hashes + 'hash-value' tokens paired (supported with some bugs as for now).
The style-src directive covers several things(see the test):
stylesheet requests via <link href='http://example.com/min/css.css' rel='stylesheet'>. In this case you need to add http://example.com host-source to the style-src directive.
stylesheet requests from the CSS #import url('https://example.com/style_import.css')
stylesheet requests from a Link HTTP response header field Link: https://example.com/file.css; rel=stylesheet.
inline style blocks: <style>...</style>. You need to have 'unsafe-inline' or 'nonce-value'/'hash-value' in the style-src to allow these.
style= attribute in tags: <tag style='color:green; margin:0 auto;'>. You need to have 'unsafe-inline' in the style-src to allow these. Or use paired the 'unsafe-hashes' + 'hash-value' (is not widely supported as for now).
* JS call setAttribute('style', 'display:none;') is considered as <tag style='display:none;'> above.
using of CSSStyleSheet.insertRule(), CSSGroupingRule.insertRule(), CSSStyleDeclaration.cssText and CSSStyleRule.selectorText was intended to be gated to 'unsafe-eval' in the style-src, but it's not implemented yet.
Any usage of the above constructs (even via script calls) requires to allow relevant sources or tokens in the styler-src directive.
I'm currently using jQuery 3.4.1 and jQuery-UI 1.12.1 (for autocomplete) on my website. I'm also using unsafe-inline and unsafe-eval which I don't want to use.
My <meta/> tag:
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-eval' https: cdnjs.cloudflare.com code.highcharts.com stackpath.bootstrapcdn.com cdn.jsdelivr.net code.jquery.com 'unsafe-inline'; connect-src 'self' news.google.com; worker-src 'self'; manifest-src 'self';"
>
Expanded, that content is:
script-src
'self'
'unsafe-eval'
https:
cdnjs.cloudflare.com
code.highcharts.com
stackpath.bootstrapcdn.com
cdn.jsdelivr.net
code.jquery.com
'unsafe-inline';
connect-src
'self'
news.google.com;
worker-src
'self';
manifest-src
'self';
Whenever the AJAX call happens in jQuery-UI autocomplete, it throws an error saying it violates CSP policy.
What do I need to do to properly enable CSP on my website with jQuery? I don't want to use unsafe-eval and unsafe-inline on my website.
Console Error:
Whenever the AJAX call happens in jQuery-UI autocomplete, it throws an
error saying it violates CSP policy.
Show me the text of this CSP error and I'll say you what to do (Chrome console is prefer).
As can be seen from CSS for jQuery-UI 1.12.1 you need to have img-src data: in your policy.
As can be seen from the script 1.12.1/jquery-ui.js - it does not use unsafe eval calls. Maybe you use those in your scripts. Remove 'unsafe-eval' from the script-src and check errors raised in the console.
If there is not messages like Refused to evaluate a string as JavaScript because unsafe-eval is not an allowed or the page's settings blocked the loading of a resource at eval - you do not need to have 'unsafe-eval' in the script-src.
.
The best practice is to forget about insecure HTTP: and use HTTPS:. There were cases when Internet providers (in the RU-segment of the Internet) interfered with the client's traffic and injects ads into jquery lib. So:
The rule connect-src 'self' news.google.com; should be connect-src 'self' https://news.google.com; since news.google.com always retirects to HTTPS:. All $ajax-request to news.google.com should use the https:// scheme too.
the same is with cdn.jsdelivr.net, it always redirects to HTTPS:
Therefore safe rules should be:
script-src 'self' 'unsafe-eval' https://cdnjs.cloudflare.com https://code.highcharts.com https://stackpath.bootstrapcdn.com https://cdn.jsdelivr.net https://code.jquery.com
and all call the scripts should be done with HTTPS: <script src='https://cdn.jsdelivr.net/npm/jquery#3.2.1/dist/jquery.min.js'...
When you specify just scheme-source https: in the script-src - it leads to zero-protection since any sources will be allowed via https:.
This additionally helps to avoid problems of mixed content blocking.
I am making a site that uses webpack.
I am about to launch it and I want to put on addThis share widget. I am adding the addThis code in the index.html right before closing body tag as advised by addThis. Like this:
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript"
src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-
###MY_NUMBERS###"></script>
</body>
this generates the following error in chrome-inspect console:
Refused to load the script
'http://s7.addthis.com/js/300/addthis_widget.js' because it violates
the following Content Security Policy directive: "script-src 'self'".
I have read up a little on it and it does not seem to work to seperate addThis to another js-file and save that locally to load it to DOM.
I tried add this to my manifest.json:
"content_security_policy": "script-src 'self' http://s7.addthis.com/js/300/addthis_widget.js; object-src 'self'"
No success. Is there a way to override CSP settings to allow for addThis-widget?
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'
'unsafe-eval' https://*.addthis.com https://addthis.com;child-src 'self' 'unsafe-
inline' 'unsafe-eval' https://*.addthis.com https://addthis.com; object-src 'self'
'unsafe-inline' 'unsafe-eval' https://*.addthis.com https://addthis.com; script-src
'self' 'unsafe-inline' 'unsafe-eval' https://*.addthis.com https://addthis.com; img-src
'self' 'unsafe-inline' 'unsafe-eval' https://*.addthis.com https://addthis.com;">
Adding this to your header will allow the addthis widget to load. Might not be secure, which will defeat the purpose of Content-Security-Policies...
I always set my CSP through the .htaccess if it's available.
Here are some good tips: https://content-security-policy.com/
You're basically there, but unsure how it works with manifest.json.
Try similar in .htaccess:
Header set Content-Security-Policy "default-src 'none'; script-src 'self' http://*.addthis.com
Some things to be aware of with .htaccess files: https://www.digitalocean.com/community/tutorials/how-to-use-the-htaccess-file
Also, using a CSP, you will need to specifiy all the external sources you use basically.
It's worth looking into CSPs in more detail and being aware of all the various sources of images, fonts, etc etc. you use.
Any problems, let me know and I'll expanded further.
Developing an app on version 5 of cordova (using the phonegap framework). The latest updates request you use a Content-Security-Policy meta tag as per their documentation: https://github.com/apache/cordova-plugin-whitelist
Here's my tag for the app:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' *.example.com">
When I include this everything works fine except console.log messages do not get pushed to terminal when running "phonegap serve" (a tool provided to 'test' your app using an app pre-installed on your device).
However if i remove the tag from my code then console.log messages get pushed to terminal correctly but i can no longer make data requests to my example.com domain.
I've tried many variances using http://content-security-policy.com/ as a guide but i can't get it to work correctly.
Note: This is a new facility in v5 of cordova, as previously this was all working without a problem.
Here an example of my settings in Content-Security-Policy. I don't have * in production, but then I have * replaced with all accepted locations.
Also I needed to add gap://ready for the IOS platform. Not quite sure why this needed, but when I debugged on IOS I saw that it threw an error on gap://ready.
<meta http-equiv="Content-Security-Policy" content="default-src 'self' * gap://ready; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *">
With above line my console.log() message do appear.