CSP Directives

CSP Directives

Have you ever worried about unauthorized scripts or malicious content sneaking onto your website? We all want our websites to be safe and secure, both for ourselves and for our visitors. 

This is where Content Security Policy (CSP) Directives come in! CSP Directives are a powerful tool that can help you lock down your website's security and prevent a variety of attacks.

What are CSP Directives?

CSP directives are part of a Content Security Policy, a security standard introduced to prevent various types of attacks on web pages by restricting the sources from which content can be loaded. These directives serve as instructions embedded in the headers of web pages. 

They inform the browser about the types of content that are considered safe and should be allowed to execute or render. Anything not explicitly allowed is typically blocked, thereby adding a layer of security.

The policy itself is straightforward: it specifies the approved sources of content such as scripts, stylesheets, images, fonts, and more. Through controlling what resources the browser is permitted to load, CSP directives help prevent attackers from injecting harmful content that could compromise a visitor's security.

Common CSP Directives

CSP Directives come in many flavors, each controlling a specific type of resource that can be loaded on your website. Here's a look at some of the most commonly used directives:

Directive Description Example Usage
default-src Sets the default policy for fetching resources such as JavaScript, images, CSS, fonts, AJAX requests, and frames. default-src 'self'
script-src Specifies valid sources for JavaScript. This directive helps in preventing XSS attacks by restricting where scripts can be loaded from. script-src 'self'
style-src Defines valid sources for stylesheets. This directive ensures that only the CSS from allowed sources is applied to your website. style-src 'self'
img-src Defines valid sources of images. This directive helps prevent the loading of potentially harmful images from unauthorized sources. img-src 'self'
media-src Specifies valid sources for loading media types like audio and video. media-src 'self'
frame-src Specifies valid sources for embedding frames. This directive is crucial for preventing clickjacking attacks. frame-src 'none'
font-src Specifies valid sources for fonts. By controlling font sources, you can prevent the loading of malicious fonts. font-src 'self'
connect-src Limits the URLs which can be loaded using script interfaces, including <a>, <area>, <form>, and <iframe> tags. connect-src 'self' wss://
object-src Specifies valid sources for the <object>, <embed>, and <applet> elements. Restricting these can prevent many types of plugin-based attacks. object-src 'none'
worker-src Specifies valid sources for Worker, SharedWorker, or ServiceWorker scripts. worker-src 'self'
manifest-src Specifies which manifest can be applied to the resource. manifest-src 'self'
prefetch-src Specifies valid sources for prefetching and prerendering, which can improve performance if used properly. prefetch-src 'self'
base-uri Restricts the URLs that can be used in a document’s <base> element. This helps prevent rogue content injection. base-uri 'self'
form-action Restricts the URLs which can be used as the action of HTML form elements. This directive is crucial for preventing form hijacking. form-action 'self'
frame-ancestors Specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>. Prevents embedding of content on unauthorized sites. frame-ancestors 'none'
report-uri (deprecated) Specifies where to report policy violations. Although deprecated, it was widely used for CSP violation reports. report-uri /csp-report-endpoint/
report-to The modern replacement for report-uri, this directive specifies where to send CSP violation reports. report-to default

How Does a Content Security Policy Work?

When you visit a website, your browser fetches various types of content such as scripts, images, and stylesheets from multiple sources to render the page. This openness, while fundamental to the web's functionality, can also leave a site vulnerable to attacks. 

A Content Security Policy (CSP) serves as a checkpoint that determines which sources are safe and which aren't, acting almost like a security guard for your site.

1. CSP Implementation

The implementation of a Content Security Policy begins with the website administrator defining a set of CSP directives. These directives are then embedded into the HTTP headers of the web pages.

When a browser requests a page, it first reads these directives to understand the rules set for loading various resources.

2. Browser's Role in Enforcement

Once the CSP is communicated via HTTP headers, the browser enforces these rules. If a script, image, or any other resource type tries to load from a source not listed as safe in the CSP, the browser blocks it. 

This prevents potentially malicious scripts from executing and stops unauthorized content from compromising the visitor’s security.

3. CSP Reporting Violations

CSP also offers a mechanism for monitoring and reporting. By specifying a report-uri or the newer report-to directive, administrators can instruct the browser to send reports whenever the CSP is violated. 

This can be especially useful in the 'Content Security Policy Report Only' mode, where the policy is not enforced but violations are logged. 

4. Dealing with Inline Content

Handling inline content such as inline scripts and styles can be challenging under CSP. Typically, inline scripts are unsafe because they can be easily manipulated by XSS attacks. To handle this, CSP provides the 'unsafe-inline' keyword, although its use is discouraged. 

Instead, strategies like hashing or nonce (a unique token used once) can be employed to safely enable inline scripts without compromising security.


This wraps up our introduction to CSP Directives. Remember, they're like a security guard for your website, making sure only approved stuff gets loaded. This helps keep your site safe and secure!

If a script, image, or other element originates from an unauthorized source, CSP directives spring into action, blocking it in its tracks.

Published on:
April 25, 2024
This is some text inside of a div block.