CSP - Content Security Policy

A website that includes a Content Security Policy HTTP header controls what resources the user agent is allowed to load for that page.

Content-Security-Policy: <policy-directive>; <policy-directive>

A CSP header should include a default-src policy directive, which is a fallback for other resource types when they don’t have policies of their own.

Content-Security-Policy: default-src 'self'
Content-Security-Policy: default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self'
Content-Security-Policy: default-src https: 'unsafe-inline'; object-src 'none'
child-src https://youtube.com

Content-Security-Policy-Report-Only: 
Content-Security-Policy-Report-Only: default-src https:; report-to http://reportcollector.example.com/collector.cgi
Content-Security-Policy-Report-Only: default-src 'self'; report-to https://kcode.de/_/csp-report

Nginx Configuration

In Nginx HTTP headers can be added with the add_header directive.

Note that the add_header directive is additive only in the same configuration level. An add_header directive in a configuration level discards any outer add_header configuration that would be inherited otherwise.

Before enabling them productively, add them as report-only for testing:

add_header Content-Security-Policy-Report-Only "default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self'; child-src 'self'; report-uri https://example.com/_/csp-report";

Specify a report-uri endpoint where you can receive HTTP POST JSON. If you test manually, it may be enough to skip the report-uri.

Note that report-uri is in the process of being replaced with the report-to directive.

If your website content has inline <script> or attribute on* event handlers you have to allow script-src unsafe-inline. If your website content has inline <style> or style attributes you have to allow style-src unsafe-inline.

add_header Content-Security-Policy-Report-Only "default-src 'none'; img-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; child-src 'self' https://www.youtube-nocookie.com; report-uri https://kcode.de/_/csp-report";

To allow embedding third party content, you can allow additional sources. For example, for YouTube embeds (using the privacy option that uses the youtube-nocookie.com domain instead of youtube.com), you add https://www.youtube-nocookie.com as an allowed child-src source.

add_header Content-Security-Policy-Report-Only "default-src 'none'; img-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; child-src 'self' https://www.youtube-nocookie.com; report-uri https://kcode.de/_/csp-report";

Testing with Firefox

Firefox reports CSP issues in the Browser Web Developer console.

Effective CSP Header

To enable the CSP rules, replace the Content-Security-Policy-Report-Only with the actual Content-Security-Policy.

add_header Content-Security-Policy "default-src 'none'; img-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; child-src 'self' https://www.youtube-nocookie.com; report-uri https://kcode.de/_/csp-report";

Later additional changes can be tested with a combination of the productive header and a report-only header making adjustments.

Resources