CSP: Definition, Syntax, and Examples

CSP (Content Security Policy) is an HTTP header that defends against XSS. It declares an allowlist of script, style, image and font sources. Modern CSP uses nonce for inline scripts instead of unsafe-inline. Example: default-src 'self'; script-src 'self' 'nonce-abc123'; object-src 'none'.

Use the Enterno.io tool — enter a domain, get results in 1-2 seconds. Free, no signup.

Check →

Content Security Policy (CSP) is composed of various directives, each serving a specific purpose in defining how resources are loaded and executed on a web page. A directive is a keyword followed by a source list that specifies the sources from which content can be loaded. Below are some of the most commonly used CSP directives:

• default-src: Acts as a fallback for other directives if they are not explicitly defined. It sets the default policy for loading content such as scripts, styles, images, etc.
• script-src: Specifies valid sources for JavaScript. This directive can include sources from which scripts can be loaded, and can also use nonces or hashes for inline scripts.
• style-src: Controls the sources from which stylesheets can be loaded. Like script-src, it can also use nonces or hashes for inline styles.
• img-src: Defines valid sources for images. This directive can help prevent unauthorized image loading from untrusted domains.
• font-src: Specifies the sources from which fonts can be loaded. This is critical for ensuring that only trusted font sources are used.
• object-src: Controls the sources from which plugins (like Flash) can be loaded. Setting this directive to none is a common best practice to prevent plugin-based attacks.

Understanding these directives is crucial for configuring a robust CSP that effectively mitigates security risks while allowing necessary functionality.

To implement a Content Security Policy, you need to configure your web server to send the appropriate CSP HTTP header. The header can be set in various ways depending on your server type. Below are examples for common web servers:

• Apache: You can add the CSP header in your .htaccess file or your server configuration:

Header set Content-Security-Policy "default-src 'self'; script-src 'self' 'nonce-abc123'; object-src 'none';"

• Nginx: To set the CSP header in Nginx, you can add the following line in your server block:

add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'nonce-abc123'; object-src 'none';";

• Node.js: If you're using Express.js, you can set the CSP header using middleware:

app.use((req, res, next) => { res.setHeader("Content-Security-Policy", "default-src 'self'; script-src 'self' 'nonce-abc123'; object-src 'none';"); next(); });

Make sure to replace 'nonce-abc123' with a dynamically generated nonce for each request to enhance security. Once configured, you can test your CSP using browser developer tools to ensure it is applied correctly and to debug any violations.

Monitoring and reporting are essential components of a robust Content Security Policy. CSP provides a reporting mechanism that allows you to receive notifications about violations of your policy, which can help you identify potential security issues. This is done via the report-uri or report-to directives.

To enable reporting, you can modify your CSP header to include a reporting endpoint:

Content-Security-Policy: default-src 'self'; report-uri /csp-violation-report-endpoint;

When a violation occurs, the browser sends a JSON payload to the specified endpoint, containing details about the violation. Here is an example of what the payload might look like:

{ "csp-report": { "document-uri": "http://example.com/page.html", "referrer": "http://example.com/", "blocked-uri": "http://evil.com/script.js", "violated-directive": "script-src 'self'", "original-policy": "default-src 'self'; script-src 'self';" } }

To process these reports, you can set up a simple server endpoint to log or analyze the data. This can be done using various technologies, such as Node.js, Python, or PHP. Analyzing these reports will help you refine your CSP over time, allowing you to tighten security without breaking functionality.