I am trying to import font-awesome to my app using the following:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
This returns the following error in the JS console:
Refused to load the stylesheet
'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'
because it violates the following Content Security Policy directive:
"style-src 'self' 'unsafe-inline'".
The Django app is a djangae (Django + GoogleAppEngine) example app which I am using as a starting point for what I want to make. https://github.com/davide-ceretti/googleappengine-djangae-blog.
The import happens in base.html. How can I fix this? I assume it's a setting, but I can't track it down.
p.s. I get the same error for another import:
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
Add this to your settings.py:
# Keep our policy as strict as possible
CSP_DEFAULT_SRC = ("'none'",)
CSP_STYLE_SRC = ("'self'", 'fonts.googleapis.com')
CSP_SCRIPT_SRC = ("'self'",)
CSP_FONT_SRC = ("'self'", 'fonts.gstatic.com')
CSP_IMG_SRC = ("'self'",)
And have a look at http://www.w3.org/TR/CSP/
Protecting a django app with a Content Security Policy is pretty straight forward and in your case the header should looks something like this:
Content-Security-Policy: default-src 'none'; script-src 'self' www.google-analytics.com; connect-src 'self'; img-src 'self' www.google-analytics.com; style-src 'self' fonts.googleapis.com; font-src 'self' fonts.gstatic.com;
pip install django-csp
adjust your project’s settings module to add the “django-csp” middleware to your middleware classes
add the above CSP header
Some more resources:
http://django-csp.readthedocs.io/en/latest/
https://www.templarbit.com/blog/2018/06/14/content-security-policy-with-django
That is from the browser in HTML5. Here's a good article on how to fix it in your headers:
http://www.html5rocks.com/en/tutorials/security/content-security-policy/
There's also a Django app for handling this header:
http://django-csp.readthedocs.org/en/latest/configuration.html
Good luck!
Related
Any browser continuous throwing the error bellow (7 Errors)
Refused to load the script 'https://cdn.ampproject.org/v0.js' because it violates the following Content Security Policy directive: "script-src data: 'self' 'unsafe-inline'
... 'https://cdn.ampproject.org/v0/amp-sidebar-0.1.js'...
...'https://cdn.ampproject.org/v0/amp-social-share-0.1.js' ...
... 'https://cdn.ampproject.org/v0/amp-twitter-0.1.js' ...
... 'https://cdn.ampproject.org/v0/amp-iframe-0.1.js' ...
... 'https://cdn.ampproject.org/v0/amp-form-0.1.js' ...
... 'https://cdn.ampproject.org/v0/amp-youtube-0.1.js' ...
Enviroment
Drupal 8 with AMP
Installed module: drupal/csp drupal/amp
Theme: custom AMP
I try
Adding this line <meta http-equiv="Content-Security-Policy" content="default-src https://cdn.ampproject.org/*"> into theme/.../system/html.html.twig
Installing module drupal/csp (previously removed above line)
Update
Trying to use the Content Security Policy from the chrome extension "Content Security Policy (CSP) Generator" here author https://csper.io
I got a issue and can not using
use-places-autocomplete, I have try to fix it but still not resolve it
In env local, I load script google map not get any issue, but env production I got the following error.
Refused to load the script 'https://maps.googleapis.com/maps/api/js?v=weekly&key=xxxxxyyyyyyddđd&libraries=places&language=vi' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' www.googletagmanager.com connect.facebook.net www.googleadservices.com www.google-analytics.com googleads.g.doubleclick.net onesignal.com tpc.googlesyndication.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
This is how I try, but still can not fix it:
<meta httpEquiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval' 'unsafe-inline' developers.google.com maps.googleapis.com https://www.googletagmanager.com https://connect.facebook.net https://www.googleadservices.com https://www.google-analytics.com https://googleads.g.doubleclick.net https://onesignal.com https://tpc.googlesyndication.com;" />
And don't know where the other sources are called from, because I don't use it like: www.googletagmanager.com, connect.facebook.net, www.googleadservices.com, www.google-analytics.com, googleads.g.doubleclick .net,...
Looking forward to all the helpers. Thanks all.
Source:
NextJS: 11.1.2
You are on a right way (I mean an adding maps.googleapis.com into script-src), but looks like you already published CSP via HTTP header, therefore your <meta> tag is not working.
Check if you already have a CSP header, a manual is here.
If you already have a CSP header, you need to make corrections to it, and not publish the second CSP in the meta tag.
It is very likely that your CSP header is published by Helmet middleware, it's in NodeJS dependencies.
I have added the following content security policy in my manifest
"content_security_policy":"script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'",
and have the following code in the header of my HTML file:
<script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-app.js"></script>
And yet I still get this issue when loading firebase/gstatic scripts in my popup html:
Refused to load the script 'https://www.gstatic.com/firebasejs/7.11.0/firebase-app.js' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
I have 3 other scripts that are also to be loaded in the header from gstatic, but they also fail. What am I doing wrong?
I am using webfont loader for fonts on my site, and have the following setup:
HTML
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" integrity="sha384-pvXSwSU09c+q9mPyY++ygUHWIYRoaxgnJ/JC5wcOzMb/NVVu+IDniiB9qWp3ZNWM" crossorigin="anonymous"></script>
JS
WebFont.load({
google: {
families: ['Libre Franklin']
}
});
And then in my .htaccess I am setting sources for stylesheets as part of my Content Security Policy like so:
style-src 'self' https://fonts.googleapis.com;
But when the site loads the font it is using the http:// source for the font, so it is being blocked by the CSP and I am getting this error message in the console:
Refused to load the stylesheet 'http://fonts.googleapis.com/css?family=Libre+Franklin' because it violates the following Content Security Policy directive: "style-src 'self' https://fonts.googleapis.com".
How can I make sure the site is loading the https:// version of the stylesheet?
the library webfonts.js uses location.protocol to adjust the request http or https when your project is in domain under https it will be changed to https
Here is the direct error message I am getting from the Chrome dev tools:
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src
'sha256-1nVQdHiAzq+yQt4PZ8OE7a29XlxBFIzESqqj+rz4Jdc=' 'self'". Either
the 'unsafe-inline' keyword, a hash
('sha256-1nVQdHiAzq+yQt4PZ8OE7a29XlxBFIzESqqj+rz4Jdc='), or a nonce
('nonce-...') is required to enable inline execution.
Now it seems to me that it is saying that the policy with the hash doesn't contain the needed hash. Am I missing something in my syntax? I get the CSP error from Firefox as well (though with fewer details).
Here's the header directly:
Content-Security-Policy:default-src 'self'; style-src 'sha256-1nVQdHiAzq+yQt4PZ8OE7a29XlxBFIzESqqj+rz4Jdc=' 'self';