I'm trying to figure out why with the Content-Security-Policy header enabled in my nginx conf, some of the elements on my site seem a bit odd. Everything loads properly (status 200) but some images might be a bit smaller or some html rendering is a slightly off in the browser. It's bizarre; I can't really explain it. What's the proper usage of Content-Security-Policy? And why might it break sites where 100% of the sites content (no CDN) is originating from the root or /uploads?

user www-data;
worker_processes  auto;

events {
    worker_connections  1024;

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    charset utf-8;
    server_tokens  off;

    add_header X-XSS-Protection "1; mode=block" always;
    add_header X-Frame-Options DENY;
    add_header Referrer-Policy "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header Pragma public;
    add_header Cache-Control "public";
    add_header Content-Security-Policy "default-src 'self';";

    include /etc/nginx/conf.d/*.conf;

    gzip on;
    gzip_comp_level 2;
    gzip_min_length 1000;

    server {
    server_name website.com;
    root /var/www/website/;
    index index.php index.html;

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_param HTTP_PROXY "";
        include fastcgi_params;

    location ~* .(png|ico|gif|jpg|jpeg|css|html|txt|php)$ {
        expires 2d;
        add_header Pragma public;
        add_header Cache-Control "public";

    if ($request_method !~ ^(GET|POST)$) {
         return 444;
  • Hard to tell without at least a screenshot. If I were to debug this, I would retrieve all the page elements with wget or curl, with and without the Content-Security-Policy, and compare the results. I would also try with different browsers... – xenoid Sep 29 '17 at 13:34
  • Thanks for the suggestion. Then compare the curl outputs? What differences in output would I be looking for exactly? – user775824 Sep 29 '17 at 13:49
  • No idea. Diff is your friend... You may also discover that some elements are missing. – xenoid Sep 29 '17 at 16:12

Without knowing what your site's content is, it's hard to know why CSP is having an apparent effect on it. Perhaps you're using a build-tool that alters your site's image files, or maybe a framework that changes your site's appearance in subtle ways.

To be sure of whether or not Content Security Policy is to blame, you can enable reporting of violations by including:

Content-Security-Policy: ...; report-uri https://endpoint.com; report-to groupname

This is discussed in greater detail in the MDN Web Docs. As mentioned in the article, be sure to include both report-uri and report-to for compatibility reasons. You could also use Content-Security-Policy-Report-Only which may be easier to implement and interpret. See here.

If you're using Chrome, you can double-check in your Dev tools console for errors related to CSP since Chrome has pretty generous error reporting for this. This can be done without making the above changes.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.