Django , Content Security Policy directive

Question

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'>

Answer 1

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;

1. pip install django-csp
2. adjust your project’s settings module to add the “django-csp” middleware to your middleware classes
3. 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

Answer 2

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/

Answer 3

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!