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
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.
my custom font is not working, unless I install it manually in my computer.
//my css file//
#font-face {
font-family:'PROGRESS PERSONAL USE';
src: url('Progress.woff2')format('woff2'),
url('Progress.woff')format('woff'),
url('Progress.ttf') format('ttf');
}
Font family name is correct because, I opened the file font to check the correct spelling and also it shows correctly in the browser if I install the font and use it as:
h1{
font-family: "PROGRESS PERSONAL USE"
}
I thought that the problem was the path of the font files, so I placed them in the same folder and level as the CSS file. I also tried adding a / to the path like url('/Progress.woff2')format('woff2')... in front. Cleared caché, changed browser, and tried in mobile But not working.
Also in my browser inspector/Network shows that the fonts are found when refreshing the browser:
Request URL: http://localhost:8000/Progress.woff2
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:8000
Referrer Policy: strict-origin-when-cross-origin
Would be happy to get help with this!
The self-hosted fonts in Gatsby should be located in the static folder.
So I placed the files in the path:
--> static/fonts/Progress.woff2
-->static/fonts/Progress.woff
-->static/fonts/Progress.ttf
and then in my globalStyles.css which is in my src/ (not in the static folder) I place it like this:
#font-face {
font-family:"PROGRESS PERSONAL USE";
src: url('/fonts/Progress.woff2')format('woff2'),
url('/fonts/Progress.woff')format('woff'),
url('/fonts/Progress.ttf') format('ttf');
}
If you don't have a global css file you can define one for the fonts, and import it in your gatsby-browser.js.
Also there is the option of using the web fonts gatsby pluggin which is explained here
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 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!