In this article, I will provide guidelines on setting up a foundational Content Security Policy (CSP) for your Drupal application. Since every website has unique requirements, there isn’t a one-size-fits-all CSP configuration. Your website will likely utilize different JavaScript, CSS, and external resources, necessitating a tailored approach.
Recommended Tool: Content Security Policy Module
To streamline the process, I recommend using the Content Security Policy module for Drupal. This module offers several advantages:
- Integration with Drupal’s Libraries API: Automatically generates a default site-wide policy for JavaScript and CSS.
- Compatibility with CSP Level 3: Adheres to the latest CSP Level 3 Working Draft.
- Optimization: Reduces header length by eliminating duplicate directives.
- Policy Violation Logging Integrations:
- Reporting module
- Sentry (via Raven module)
- Report-URI.com
- Automatic Adjustments: Adds ‘unsafe-inline’ to individual requests when necessary for core libraries (e.g., core/ckeditor, core/drupal.ajax).
- Event Dispatching: Allows other modules to alter policies for each request.
Additional Security: The Content Security Policy Extras module provides further security enhancements by modifying core services.
Identifying External Resources
A practical approach to identifying all external resources used by your website involves initially blocking all external resources. Implement this in a development or test environment using the following CSP directive:
Content-Security-Policy: default-src 'self';This directive restricts the loading of JavaScript, CSS, and images to local resources only. By monitoring your browser console for Content Security Policy warnings, you can identify external resources that are being blocked.
Allowing External Resources
Once you’ve identified the necessary external resources, you can gradually add CSP directives to permit them. For example, if your website uses Google Fonts, you can modify your CSP to allow it:
Content-Security-Policy:
default-src 'self';
style-src 'self' https://fonts.googleapis.com;
font-src https://fonts.gstatic.com;Common CSP Directives
Below is a list of common CSP directives and example source values that you can customize based on your website’s needs:
| Directive | Example |
| default-src | default-src ‘self’ cdn.example.com; |
| script-src | script-src ‘self’ js.example.com; |
| style-src | style-src ‘self’ css.example.com; |
| object-src | object-src ‘self’; |
| img-src | img-src ‘self’ img.example.com; |
| media-src | media-src media.example.com; |
| frame-src | frame-src ‘self’; |
| font-src | font-src font.example.com; |
| connect-src | connect-src ‘self’; |
| report-uri | report-uri /some-report-uri; |
| add_header | add_header Content-Security-Policy |
For a more detailed guide on CSP directives, visit Content Security Policy.
Additional Resources
To further assist you, I recommend watching this YouTube video, which explains how to configure various common CSP directives and how to use the Content Security Policy Drupal module.
I hope you found this article helpful. Stay tuned for more insightful Drupal content!