I'm setting up Content-Security-Policy headers in Nginx and I am stuck at getting the locally hosted Typekit fonts to work.
I'm using the following script for hosting Typekit fonts locally and the result has been very good with good load times and no FOUT: https://github.com/morris/typekit-cache
But now the problem is setting up CSP to pass these fonts. I tried localStorage but it didn't work.
These are the errors I'm getting:
[Report Only] Refused to load the font
'data:font/opentype;base64,d09GMgABAAAAAFb0ABQAAAAAskgAAFaDAAIAAAAAAAAAAAAAA…bJbjfY7U6T320POPp5HLprLxRlPwIJqShhBB1pRCUKkQmIKRpGoiON1kre7lGR0Z4h5ENMAQAA'
because it violates the following Content Security Policy directive:
"font-src 'self'
[Report Only] Refused to load the font
'data:application/font-woff;base64,d09GRgABAAAAABwUAA4AAAAAKHQAAQAAAAAAAAAAA…NfJJTVolXlnco7lXdLiWW32CnmmMrFlnJ5aXLN8srxynGxmBgfv9d+AQ8KdggAAAABVwJMPAAA'
because it violates the following Content Security Policy directive:
"font-src 'self'
(I removed the domains listed for the font-src policies).
Thank you
You can see its creating the font-src as data when it loads them in. That is base64 encoded versions of the font rather than links to the fonts themselves.
So just change font-src 'self'; to font-src 'self' data: ; and it should work fine.
Related
#console browser issue for Content security Policy
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-9X08/o2ns8hEbTzT0V1Xyn6yYc8qftFOKmH3KNb8dWo='), or a nonce ('nonce-...') is required to enable inline execution.[enter image description here][1]
#Image of the error
[1]: https://i.stack.imgur.com/7R9sp.png
Code written for CSP
frame-ancestors 'self' https:
script-src 'self';
object-src 'none';
base-uri 'none';
style-src 'self' fonts.googleapis.com 'unsafe-inline';
media-src *;
img-src 'self';
It seems the error indicated there's issue with using inline-script.
which looks like
<script>
your codes
</script>
If you're going to use inline script, add 'unsafe-line' to script-src directive.
Current setting only allows scripts that's source of your domain.
ex)
<script src="/yourDomain/public/yourScript.js">
Your script-src directive of 'self' only allows scripts to be loaded as script files from the same domain. Your page also has inline scripts that need to have permission in the CSP to run. You have a few choices:
Move the script code to a separate .js file hosted on the same domain. If you use a different host you'll need to allow that host in your script-src directive.
Add 'unsafe-inline'. This will allow ALL inline scripts, which will pretty much remove the XSS protection that CSP is able to give.
Add the suggested hash value 'sha256-9X08/o2ns8hEbTzT0V1Xyn6yYc8qftFOKmH3KNb8dWo=' to script-src allowing this one script. This is a good solution if there are only one or a few inline scripts to allow.
Add a nonce. Nonces should change on every pageload and are a good solution for dynamic scripts if you are able to inject nonces correctly.
I recently added Google AdSense to my website and the ads works fine, expect sometimes they don't load and I get the following errors in the console
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src https://cdn.ampproject.org/". Either the 'unsafe-inline' keyword, a hash ('sha256-xxx'), or a nonce ('nonce-...') is required to enable inline execution.
From what I've read I need to added the CSP in my HTML headers, but doesn't seem to fix the problem.
Any tips?
TRY1
This discussion could help to get access to the site with the following snippet:
script-src 'self' http://xxxx 'unsafe-inline' 'unsafe-eval';
TRY2
This documentation will show you how to define the policy with:
Content-Security-Policy: script-src 'self' https://apis.google.com
Hope that will help and you question is answered. Give it a shot, cheers! :)
I'm loading a dummy JS script from origin like:
<script src="http://www.this-host.test/loadMe.js"></script>
with CSP header set to:
script-src 'self' 'strict-dynamic' 'nonce-{randomString}';
Since the script source is comming from it's origin host and is allowed by CSP header than loadMe.js should load and execute.
Instead I get:
Refused to load the script 'http://www.this-host.test/loadMe.js' because it
violates the following Content Security Policy directive: "script-src 'self' 'strict-dynamic' 'nonce-{randomString}';.
'strict-dynamic' is present, so host-based whitelisting is disabled.
tested on Macintosh; Mac OS X 10_15_2, browsers Chrome/79.0.3945.117, Firefox/71.0.
I don't get this message on Safari though.
Perhaps good to note that I'm testing it locally.
Anyway I don't want to use nonce-{randomString} when CSP header allows resources to be loaded from origin host.
Any thoughts on that?
According to csplite.com server with CSP header script-src 'self' 'strict-dynamic' 'nonce-{randomString}' set...
'strict-dynamic' only works in conjunction with 'hash-value' or 'nonce-value', and if they are absent, all scripts on the page will be disabled, because 'strict-dynamic' overrides the 'unsafe-inline' action and disables whitelisting of host-based sources, including the 'self' token
... which tells me that If my loadMe.js file is loading another file (or it doesn't have to) nonce="{randomString}" attribute in HTML tag must be set no matter if the file is loaded from same host or whitelisted host.
For some reason both Mozilla Observatory and CSP validator are not detecting the CSP header in my .htaccess file yet the header is visible when viewed through Chrome.
Here's my current CSP header in my .htaccess file;
Content-Security-Policy: script-src 'nonce-$RANDOM' 'strict-dynamic' 'unsafe-inline' object-src 'none'; base-uri 'none'; report-uri https://altfit.report-uri.com/r/d/csp/enforce;
Also I noticed that the nonce is not working, inline scripts still load without nonce in place but if I make modifications to the CSP it can restrict script execution and the display of inline elements.
Info:
Server is Light Speed.
PHP version is 7.1
Fixed the issue by modifying the line in .htaccess to the following;
Header set Content-Security-Policy: "default-src https: 'unsafe-inline'; report-uri https://altfitcom.report-uri.com/r/d/csp/enforce;"
Only issue now is the addition of unsafe-inline but from what I have read strict-dynamic and nonce do not work as a cross platform solution and I have to have inline js for some onclick events.
I have defined my security policy as:
default-src 'self'; script-src 'self'; frame-src 'self'; style-src 'self' 'unsafe-inline';
(I still have CSS at the head of several pages).
I have no trouble with Firefox or Chrome (IE doesn't support CSP yet) but, when I try testing in Safari, I get a string of errors like:
Refused to load style from 'http://localhost/styles/alliance.css' because of Content-Security-Policy.
.
.
.
Refused to load image from 'http://localhost/images/Landing1.jpg' because of Content-Security-Policy.
.
.
.
Refused to load script from 'http://localhost/JQuery/jquery-1.7.2.min.js' because of Content-Security-Policy.
The images should be covered by default-src and the other two are listed as "Self" so I don't know why Safari is not accepting my images and scripts. I do not have a Mac so I am using Safari on Windows (5.1.7).
Any ideas? Thank you!
Safari 5 is a bit behind in its implementation of CSP. Safari 6 is much better, but I don't think its been released for Windows. I think you're simply seeing implementation bugs. If WebKit nightlies are available for Windows, that might be a good alternative for testing.
Honestly, though, I wouldn't recommend serving the X-WebKit-CSP header to Safari 5. Safari 6, yes, but 5 is a bit too broken to really use.
Note also that you can simplify your policy. Both script-src and frame-src will fall back to default-src. default-src 'self'; style-src 'self' 'unsafe-inline' should have the same effect.