Set CSP header on Apache/Nginx to enhance security

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

• 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;";

• 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.