Adding CSP headers in Django Project

Website security has been an important factor while developing websites and web applications. Many frameworks come with their own security policies and developers also try to implement the utmost security policies while developing their applications. Still even after this much hard work hackers will find new ways to penetrate into our app, exploit our code to vulnerabilities. In this article, we are going to implement a security header often referred to as CSP headers to a Django application.

Terminology

• CSP: Content-Security-Policy is an HTTP response header that modern browsers use to enhance the security of the web page by allowing you to restrict how resources such as JavaScript, CSS, or pretty much anything that the browser loads.
• HTTP header: HTTP headers let the client and the server pass additional information with an HTTP request or response like MIME type, request status code, cookie, and proxy information, and more
• XSS: Also abbreviated as Cross Side Scripting, XSS attacks enable attackers to inject client-side scripts into web pages viewed by other users in simple words if exploited can change the look and behavior of the webpage
• Django: Django is a python based web application framework used to build a variety of web apps

What is Content Security Policy?

Content-Security-Policy is an HTTP response header that modern browsers use to enhance the security of the web page by allowing you to restrict how resources such as JavaScript, CSS, or pretty much anything that the browser loads are designed to prevent XSS attacks which enable attackers to inject client-side scripts into web pages viewed by other users in simple words if exploited can change look and behavior of webpage. It is also called the successor of X-Content-Security-Policy or X-Webkit-CSP headers. CSP can also be implemented using the meta tag.

Some CSP header terminology is

• default-src: the default source to load everything
• style-src: source to load styles
• script-src: source to load javascript or generally scripts
• img-src: source to load images
• object-src: source to load media
• report-to: URI to send reports for violating CSP
• ‘self’: load from the same host
• ‘unsafe-inline’: allow inline styles and scripts
• ‘unsafe-eval’: allows eval() and similar methods for creating code from strings
• ‘nonce’: a random string that should be unique per request

How does the Content Security policy work?

CSP works by blocking the execution of styles, scripts, and other things unless they are allowed in the policy. CSP doesn’t allow execution of inline scripts and styles which means we can’t use <script/> and <style/> tags for javascript and styling.

An example of CSP headers is

Content-Security-Policy: default-src 'self';
style-src: 'self' stakpath.bootstrapcdn.com;
script 'self' *.cloudflare.com;
img-src 'self' imgur.com;

In this CSP header, we are telling the browser that the default source for all the styles, scripts, images, objects should be the domain that is passed in the header, along with that we are also allowing stylesheet from stackpath.bootstrapcdn.com which is CDN for bootstrap styles. We are also allowing scripts to be loaded from all Cloudflare subdomains using wildcard subdomain and for images, the browser can allow loading from imgur.com. Apart from these if the webpage tries to load from other domains like twitter the browser will block the requests.

Implementing CSP headers in Django

Django doesn’t come with CSP headers in its core but thanks to Mozilla, they have created a package Django-CSP to add CSP headers.

# installing django-csp
pip3 install django-csp

add CSP to middleware in our setting.py file of the Django project and then we will configure our headers

Python3

MIDDLEWARE = (
    # ...
    'csp.middleware.CSPMiddleware',
    # ...
)

Configuring CSP headers

Go to the settings file of the Django project and add the following in the last or anywhere you want

Python3

# uri to report policy violations
# uri to report policy violations
CSP_REPORT_URI = '<add your reporting uri>'

# default source as self
CSP_DEFAULT_SRC = ("'self'", )

# style from our domain and bootstrapcdn
CSP_STYLE_SRC = ("'self'",
    "stackpath.bootstrapcdn.com")

# scripts from our domain and other domains
CSP_SCRIPT_SRC = ("'self'",
    "ajax.cloudflare.com",
    "static.cloudflareinsights.com",
    "www.google-analytics.com",
    "ssl.google-analytics.com",
    "cdn.ampproject.org",
    "www.googletagservices.com",
    "pagead2.googlesyndication.com")

# images from our domain and other domains
CSP_IMG_SRC = ("'self'",
    "www.google-analytics.com",
    "raw.githubusercontent.com",
    "googleads.g.doubleclick.net")

# loading manifest, workers, frames, etc
CSP_FONT_SRC = ("'self'", )
CSP_CONNECT_SRC = ("'self'",
    "www.google-analytics.com" )
CSP_OBJECT_SRC = ("'self'", )
CSP_BASE_URI = ("'self'", )
CSP_FRAME_ANCESTORS = ("'self'", )
CSP_FORM_ACTION = ("'self'", )
CSP_INCLUDE_NONCE_IN = ('script-src', )
CSP_MANIFEST_SRC = ("'self'", )
CSP_WORKER_SRC = ("'self'", )
CSP_MEDIA_SRC = ("'self'", )

You can add the required hostname according to your needs

Instructions to add CSP Header settings in Django Project

Here are some instructions to perfectly implement CSP in your web apps

• Try to avoid adding unnecessary hostnames
• Check as many times as possible while adding or removing hostnames
• Until absolutely necessary don’t add ‘unsafe-inline’, it will weaken our security policy
• Try to avoid inline style and scripts
• It is better not to use CSP in the development server right from the start
• Always try to use HTTPS while loading scripts, styles, images.