How to set the Content-Security-Policy (CSP) Header

You can set the Content Security Policy (CSP) header by adding a rule to your web server’s configuration file.

The CSP header allows several rules to be set. This header tells your website’s web server that when it’s loading your website, it should only load files from the locations you approve in the configuration (e.g. ‘self’ or a domain – https://example.com). For example, you can say just load resources stored on the web server and block any external domains). This ability is good because you can create an Allow List (White-list) that will block untrusted external resources (such as images or JavaScript or iframes) whenever a user loads your web page in their browser. Setting the CSP header correctly can help ensure your website only loads files from trusted domains, using over secure protocols (e.g. HTTPS) when displaying its web pages and protects users from unwanted third-party injected files.

Several options can be set in the CSP header depending on how much restriction or freedom you want to allow with rules. Below are two (2) examples and simple English translations of basic but restrictive CSP configurations:

e.g. of a basic restrictive CSP Header

Content-Security-Policy: script-src 'self'; img-src 'self'; style-src 'self'; font-src ‘self’; frame-src ‘self’;
Content-Security-Policy: script-src 'self'; img-src 'self'; style-src 'self'; font-src ‘self’; frame-src ‘self’;

Translates in English to: Only allow this website to load scripts (scripts-src), images (img-src), stylesheets, fonts (font-src) or frames (frame-src) from within its own domain. Block any external domain.

e.g. of a basic restrictive Header + allowing an external URL (https://example.com)

Content-Security-Policy: script-src 'self' https://example.com; img-src 'self' https://example.com; style-src 'self' https://example.com; font-src  ‘self’ https://example.com;

Translates in English to: “Only allow this website to load scripts (script-src), images (img-src), stylesheets (style-src) fonts (font-src) from within its own domain or from the external domain https://example.com

Below are the different directives that can be set for the CSP header. You can find sample values for each directive at the following link: https://content-security-policy.com.

  1. child-src
  2. connect-src
  3. default-src
  4. font-src
  5. form-action
  6. frame-ancestors
  7. frame-src
  8. img-src
  9. media-src
  10. object-src
  11. plugin-types
  12. report-uri
  13. sandbox
  14. script-src
  15. style-src

Note:

  1. Only whitelist URLs that you trust and that have a good reputation.
  2. Different web servers have different configuration files. Choose the one below that applies to your website.

Apache web servers:

Using .htaccess configuration file.

If you’re on a shared hosting plan, you’ll only have access to create rules in the .htaccess configuration file. Follow these steps:

  1. Go to your website’s root folder, open the .htaccess file. Note: You should be able to do this using either an FTP application such as Filezilla or your hosting provider’s online File manager.
  2. Copy one (1) of the following lines into the .htaccess (after any existing rules) and save it. The header should now be set.
Content-Security-Policy: script-src ‘self’; img-src ‘self’; style-src ‘self’; font-src ‘self’; frame-src ‘self’;

 

Using httpd.conf configuration file

If you’re on a dedicated hosting plan that gives you access to the web server’s root configuration file httpd.conf, then:

  1. Go to your website’s root folder, open the conf. Note: You should be able to do this using either an FTP application such as FileZilla or your hosting provider’s online File manager.
  2. Copy one (1) of the following lines into the conf file (after any existing rules) and save it. The header should now be set.

Apache web server

Content-Security-Policy: script-src ‘self’; img-src ‘self’; style-src ‘self’; font-src ‘self’; frame-src ‘self’;

Microsoft IIS web server

<httpProtocol> <customHeaders> <add name=" Content-Security-Policy " value="script-src ‘self’; img-src ‘self’; style-src ‘self’; font-src ‘self’; frame-src ‘self’; " /> </customHeaders> </httpProtocol>

NGINX web server

Copy one (1) of the following lines into the server block configuration.

add_header Content-Security-Policy "script-src ‘self’; img-src ‘self’; style-src ‘self’; font-src ‘self’; frame-src ‘self’; " always;

 

NOTE: Some CMSs such as WordPress offer plugins you can use to set headers using a point and click type interface, if you feel uncomfortable modifying the configuration file directly.

 

How to verify the Content Security Policy header is set

Use your browser’s built-in function to view HTTP Headers as below:

Using Google Chrome and Firefox browser:

  1. Open the web page
  2. Right-click anywhere on the page and select “Inspect element”
  3. Go to the “Network Tab”
  4. Refresh the page and select the page’s URL from the list of loaded resources
  5. Look under the panel for “Response Headers” to see if the Content-Security-Policy header is set as you configured.

 

Using Securityheaders.com

  1. Visit securityheaders.com
  2. Enter the website's URL in the box and click "Scan"
  3. The securityheaders.com will check the response headers of the website return a Grade between A+ and F and show you which headers are missing.

securityheaders-dot-com.png

Why implement the Content-Security-Policy Header?

This header should be used when you want to restrict where and what type of sources your website can load content from when presenting a web page to users while protecting users against common browser-based attacks.

Link(s) for additional information on this topic

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.