{"id":26630,"date":"2025-08-22T14:51:46","date_gmt":"2025-08-22T12:51:46","guid":{"rendered":"https:\/\/contabo.com\/blog\/?p=26630"},"modified":"2026-01-16T13:00:52","modified_gmt":"2026-01-16T12:00:52","slug":"how-to-set-up-a-content-security-policy-csp","status":"publish","type":"post","link":"https:\/\/contabo.com\/blog\/how-to-set-up-a-content-security-policy-csp\/","title":{"rendered":"How to Set Up a Content Security Policy (CSP)\u00a0"},"content":{"rendered":"\n

A Content Security Policy, or CSP, helps protect your website from cross-site scripting attacks. It limits which resources the browser can load and adds an important layer of defense to your VPS setup<\/a>. In this article, you learn how to configure CSP, test your rules safely, and improve your site\u2019s overall security with additional headers. <\/p>\n\n\n\n

What a Content Security Policy Does\u00a0<\/h2>\n\n\n\n

CSP acts like a gatekeeper. It lets the browser know which scripts, images, or styles to trust. When a suspicious resource tries to load, the browser blocks it. Because of this behavior, CSP reduces the risk of unwanted scripts being executed on your site. <\/p>\n\n\n\n

Add a Basic CSP Header\u00a0<\/h2>\n\n\n\n

You can start with a simple configuration. When using Apache, open your configuration file and add the following line: <\/p>\n\n\n\n

Header set Content-Security-Policy \"default-src 'self'; script-src 'self' https:\/\/trusted.cdn.com<\/a>\" <\/code><\/pre>\n\n\n\n
This rule tells the browser to load scripts only from your domain and a trusted CDN<\/a>. After you save the file, reload your server and refresh your browser to apply the changes. <\/p>\n\n\n\n
If you use NGINX<\/a>, add this header instead: <\/p>\n\n\n\n
add_header Content-Security-Policy \"default-src 'self'; script-src 'self' https:\/\/trusted.cdn.com<\/a>\"; <\/code><\/pre>\n\n\n\n
Then run: <\/p>\n\n\n\n
sudo systemctl reload nginx <\/code><\/pre>\n\n\n\n
Reloading ensures your new security settings take effect. <\/p>\n\n\n\n
Test Safely with Report-Only Mode\u00a0<\/h2>\n\n\n\n
If you want to test your policy before enforcing it, enable CSP Report-Only mode. It reports violations without blocking anything: <\/p>\n\n\n\n
Content-Security-Policy-Report-Only: default-src 'self'; report-uri \/csp-report-endpoint <\/code><\/pre>\n\n\n\n
This approach helps you see what your future policy would block. You can check violations through your browser\u2019s developer tools and adjust the rule set until everything works smoothly. <\/p>\n\n\n\n
Block Mixed Content\u00a0<\/h2>\n\n\n\n
Mixed content happens when your HTTPS site loads elements over HTTP. Modern browsers block some of these requests automatically. To avoid issues, update all resource URLs to HTTPS. Then let CSP enforce this behavior by keeping your allowed sources strictly secure. <\/p>\n\n\n\n
Combine CSP with Other Security Headers\u00a0<\/h2>\n\n\n\n
CSP is powerful on its own, yet it works even better when combined with other protections. Add the following headers to improve your site\u2019s security: <\/p>\n\n\n\n
Strict-Transport-Security: max-age=31536000; includeSubDomains \nX-Content-Type-Options: nosniff \nX-Frame-Options: DENY <\/code><\/pre>\n\n\n\n
Together, these headers strengthen user trust and increase your website\u2019s safety. If you feel unsure about where to begin, you can use tools like Mozilla Observatory<\/a> to create a ready-to-use policy. <\/p>\n\n\n\n
Watch Our YouTube Video on Setting Up CSP\u00a0<\/h2>\n\n\n\n
If you prefer a visual walkthrough, check out the connected YouTube video that this script is based on. <\/p>\n\n\n\n
\n