Nginx CSP example

security.conf

# config to don't allow the browser to render the page inside an frame or iframe
# and avoid clickjacking http://en.wikipedia.org/wiki/Clickjacking
# if you need to allow [i]frames, you can use SAMEORIGIN or even set an uri with ALLOW-FROM uri
# https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options
add_header X-Frame-Options SAMEORIGIN;

# when serving user-supplied content, include a X-Content-Type-Options: nosniff header along with the Content-Type: header,
# to disable content-type sniffing on some browsers.
# https://www.owasp.org/index.php/List_of_useful_HTTP_headers
# currently suppoorted in IE > 8 http://blogs.msdn.com/b/ie/archive/2008/09/02/ie8-security-part-vi-beta-2-update.aspx
# http://msdn.microsoft.com/en-us/library/ie/gg622941(v=vs.85).aspx
# 'soon' on Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=471020
add_header X-Content-Type-Options nosniff;

# This header enables the Cross-site scripting (XSS) filter built into most recent web browsers.
# It's usually enabled by default anyway, so the role of this header is to re-enable the filter for
# this particular website if it was disabled by the user.
# https://www.owasp.org/index.php/List_of_useful_HTTP_headers
add_header X-XSS-Protection "1; mode=block";

# with Content Security Policy (CSP) enabled(and a browser that supports it(http://caniuse.com/#feat=contentsecuritypolicy),
# you can tell the browser that it can only download content from the domains you explicitly allow
# http://www.html5rocks.com/en/tutorials/security/content-security-policy/
# https://www.owasp.org/index.php/Content_Security_Policy
# I need to change our application code so we can increase security by disabling 'unsafe-inline' 'unsafe-eval'
# directives for css and js(if you have inline css or js, you will need to keep it too).
# more: http://www.html5rocks.com/en/tutorials/security/content-security-policy/#inline-code-considered-harmful
add_header Content-Security-Policy "script-src 'self' 'unsafe-inline' 'unsafe-eval' *.youtube.com maps.gstatic.com *.googleapis.com *.google-analytics.com cdnjs.cloudflare.com assets.zendesk.com connect.facebook.net; frame-src 'self' *.youtube.com assets.zendesk.com *.facebook.com s-static.ak.facebook.com tautt.zendesk.com; object-src 'self'";

How to write multiple CSP rules in http block?

How to write multiple CSP rules in http block?

You can can specify multiple CSP rules after globally disable permissive default-src with ;. For instance:

    add_header Content-Security-Policy "default-src 'none'; 
                                        script-src 'self';
                                        style-src 'self' ; 
                                        connect-src 'self'; 
                                        font-src 'self' https://fonts.googleapis.com; 
                                        object-src 'self'; 
                                        media-src 'self'; 
                                        frame-src 'self' https://www.google.com https://www.youtube.com https://www.facebook.com;";

Line breaks are tolerated by nginx conf parser, as long as it starts and ends with ". Machines don't mind but humans usually prefer readable configuration files

@zar3bski 😎 Thanks for sharing!

Since you have shared, I will do the same ❤️

These CSP config for nginx is more for securing public sites than internal use.

"We can also add “always” at the end of the nginx config to confirm nginx sends the header regardless of the response code. "

I still ain't super happy about the unsafe-inline and unsafe-eval, but at least you know what links are allowed as unsafe, plus if you are hosting JAMstack sites, the site(s) should be static.

Note: The following snippet of code is the same as @zar3bski code, but the default-src isn't needed according to Mozilla.

Content-Security-Policy: "default-src 'self'; font-src https://example.com; frame-src 'self' https://example.com https://example.com;"

This is what I have concluded with for the Nginx Content-Security-Policty; also, nginxconfig.io has some useful tid bits of information for learning and securing ones site:

add_header Content-Security-Policy      "connect-src 'self' *.example.com;
                                        font-src 'self' *.googleapis.com *.gstatic.com;
                                        frame-src 'self' *.youtube.com *.vimeo.com *.spotify.com *.dailymotion.com *.snipcart.com;
                                        script-src 'self' 'unsafe-inline' *.cloudflareinsights.com 'unsafe-eval';
                                        style-src 'self' *.googleapis.com;
                                        frame-ancestors 'self';
                                        img-src 'self' data:;
                                        manifest-src 'self';
                                        media-src 'self';
                                        object-src 'self';
                                        worker-src 'self';" always;

Also, it is important to note that all mobile web browsers besides Google Chrome didn't work because of line breaks in the CSP config.

After adding the configuration to a single line solved the problem. 😅

First set src variable then use it:

set $src "bla bla very long bla bla";
add_header Content-Security-Policy $src;
add_header X-Content-Security-Policy $src;
add_header X-WebKit-CSP $src;