How to Build a Content Security Policy: Step-by-Step Guide

The Core Directives to Start With

• default-src: the fallback source list used for any resource type not explicitly covered by its own directive.
• script-src: controls where JavaScript is allowed to load from — the directive most directly responsible for XSS protection.
• style-src: controls where CSS is allowed to load from.
• img-src: controls where images are allowed to load from.
• object-src: controls plugin content like Flash — setting this to 'none' is standard practice in modern applications, since plugin content is largely obsolete.

Step-by-Step

1. Set default-src 'self' as your baseline — only allow resources from your own domain by default.
2. Add specific directives for anything that legitimately needs a broader source — a CDN for scripts, a font service for styles.
3. Set object-src 'none' unless you genuinely need plugin content.
4. Generate the header and add it to your server's responses.

A Basic Example

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self'; object-src 'none';

Adding the Header to Your Site

The CSP header is typically set through your web server's configuration (Nginx, Apache) or, for platforms that support it, a meta tag in your HTML — though the HTTP header is the more broadly supported and recommended approach, since some directives (like frame-ancestors) don't work when set via meta tag at all.