Set CSP header on Apache/Nginx to enhance security

Created: Sun 20 Aug 2023 Updated: 9 months ago

article-featured-image

Web application security is crucial nowadays. A single point of vulnerability can cause unimaginable damage. In this article, you'll get to know about CSP (Content Security Policy) that you can use to secure your application from certain types of attacks.

What is CSP (Content Security Policy) ?

CSP is an added layer of security that helps to detect and mitigate many types of attacks such as Cross-Site Scripting (XSS) and data injection attacks. It's a kind of security feature that is implemented by the web browser. The new version of CSP is fully backward compatible, which means almost all Major browsers (Google Chrome, Firefox, Opera, Edge, etc) support CSP. If a browser does not support CSP, then that browser simply ignores the CSP and it does not affect the application.

How CSP works ?

CSP works by setting a security policy in the HTTP response header. This policy is assigned by the system administrator or by the application owner in the web server configuration file. With each HTTP request, the server sends the CSP policy in the HTTP response header where it instructs the web browser about what type of content can be loaded from which source.

Any required content source should be explicitly allowed in the policy in order to access it. That content could be anything such as CSS stylesheet, script file, images, media files, and fonts. All these files will be served by the web server but If not allowed in the CSP policy, the client web browser will deny these resources. It can be beneficial when we want to restrict applicaiton to load resources from trusted sources only.

There is a wide range of policy directives that a system admin can utilize to deny loading resources from untrusted sources. Check CSP directives to know more about it.

Implementation of CSP

Implementation of CSP in web server configuration is a critical process and should be done carefully. Allowing untrusted sources in policy directives can lead to potential attacks. First you need to confirm what type of resources from which source you want the client web browser to load.

Check the respective policy directive that you want to add in the policy. For ex: to instruct web browser to load font files only from Google fonts, you can use font-src https://fonts.googleapis.com; in CSP policy where font-src is policy directive and https://fonts.googleapis.com; is value assigned to that directive.

There are different directives for different purposes. Multiple directives can be used to construct a single policy. For the sake of just starting out with CSP, we'll look into image, font, media, style, and script directives. Below you will learn how to set the CSP header in Apache or Nginx web server.

Set CSP on Apache

To set CSP header in Apache, open /etc/apache2/sites-available/000-default.conf or your custom configuration file if you are utilizing virtual host and add this line in it:

Header set Content-Security-Policy "default-src 'self'; img-src 'self' https://google.com; font-src 'self' https://fonts.googleapis.com; script-src 'self';"
This is a simple policy directive added in the Apache web server configuration file. Let's break it down for better understanding.
  • Header set is used to add or modify HTTP response header. Its main purpose is to predefine header values.
  • Content-Security-Policy is the name of the header that we are adding in HTTP header response.
  • default-src 'self' is the first and key element of CSP HTTP response header. By setting this directive, we are defining the trusted source from which content can be loaded. It acts as a fallback directive that specifies sources from which resources can be loaded unless overridden by specifically defined directives like img-src or font-src. In this case, directive value is defined as 'self' which means content should be loaded from the same domain.
  • img-src 'self' https://google.com directive is instructing the web browser that only images coming from 'self' means the application itself (origin domain) and from a trusted source, which in this case is https://google.com, should be loaded. All other images coming from another domain will be denied by the browser.
  • font-src 'self' https://fonts.googleapis.com directive is instructing the web browser that only fonts can only be loaded from the application or domain itself and from https://fonts.googleapis.com, which is listed as a trusted source. Any other font loading from another point will be denied by the browser.
  • script-src 'self' directive will instruct the web browser to load scripts only internally from the application or domain itself. Any other script that is coming from another domain or untrusted source will be denied by the browser. script-src directive itself implement the security feature to reduce the risk of Cross-site scripting and Injection attacks.

Set CSP on Nginx

To set CSP header in Nginx, open /etc/nginx/sites-available/default or your custom configuration file if you are utilizing virtual host and add this line inside location block. Here I'm allowing Bootstrap CSS libraries and media sources in the CSP header:

add_header Content-Security-Policy "default 'self'; style-src 'self' https://cdn.jsdelivr.net; media-src 'self' *.googleapis.com;";
This is a simple policy directive added in the Nginx web server configuration file. Let's break it down for better understanding.
  • add_header is used to add or modify HTTP response header. Its main purpose is to predefine header values.
  • Content-Security-Policy is the name of the header that will be added by Nginx in the HTTP header response.
  • default-src 'self' is the first and key element of CSP HTTP response header. By setting this directive, we are defining the trusted source from which content can be loaded. It acts as a fallback directive that specifies sources from which resources can be loaded unless overridden by specifically defined directives like img-src or font-src. In this case, directive value is defined as 'self' which means content should be loaded from the same domain.
  • style-src 'self' https://cdn.jsdelivr.net directive is instructing the web browser that stylesheets should only be loaded from the origin domain and from trusted source 'https://cdn.jsdelivr.net', which is the Bootstrap CDN domain. Any other stylesheet file will be denied by the browser.
  • media-src 'self' *.googleapis.com directive is instructing the web browser to only load media content from the origin domain itself and trusted source '*.googleapis.com' which means all sub-subdomains of 'googleapis.com'. This directive is referring to all the media elements such as video, audio, and track that is responsible for loading media in a webpage.

Alternatively, you can set any directive such as img-src * or script-src * to allow content from all sources but It could lead to potential risks, which is why you should avoid it as much as possible.

So far we covered many valuable CSP header directives. You can use multiple CSP headers if required. You can also use HTML metatag to set the CSP on your application:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

However, using metatag for CSP is only recommended if setting CSP for header is not possible. Otherwise setting CSP on the header is a stronger approach. There is a wide range of directives that you can learn and use to further strengthen the security of your application. Check out CSP directives to learn more about it.

Setting CSP (Content Security Policy) Header
protocolten-admin

Author: Harpreet Singh
Server Administrator

Suggested Posts:
PROGRAMMING post image
Basic Python Coding Questions and Answers

Python is one of the most powerfull programming language. Python is used in web-development, …

CLOUD post image
Migrate EC2 machine from one AWS account to another

Migrating a running EC2 machine from one AWS account to another seems a complicated task. …

WINDOWS post image
Run any program as service in windows

Running a program as a service in Windows can be incredibly useful, allowing you to …

LINUX post image
Configure UFW Firewall in Linux

Firewalls in Linux play an important role in controlling the incoming and outgoing network …

LINUX post image
Create bootable USB drive from ISO image on Linux & Windows

This article is about creating a bootable USB drive from an ISO image. Below …

Sign up or Login to post comment.

Sign up Login

Comments (0)