Content security policy (CSP) is a capability defined by the W3C to limit the threat of cross-site scripting (XSS) attacks. Implemented as part of the web standards, CSP directs the browser to enforce certain client-side policies and restrict what scripts and resources it can load for a given website. For example, the script-src directive in CSP can specify an allowlist of known domains from which inline scripts can be loaded. This can thwart an attack involving a malicious shadow code injection from an unauthorized domain.
CSP can also restrict network communication to specific domains using the connect-src directive. This can prevent XHR requests to malicious domains that might be used to exfiltrate stolen data. CSP can be sent to the browser either as an HTML meta tag or as a content-security-policy header. When there are multiple content security policies specified, for example using a meta tag and a content-security-policy header, the browser will use the most restrictive directives.
Developers can use CSP to protect their applications from shadow code injection vulnerabilities such as XSS and reduce the privilege with which their applications execute. CSP is not a substitute for careful input validation and output encoding. It is best used as part of a defense-in-depth strategy. It reduces the harm caused by a malicious shadow code injection attack that can trigger an XSS vulnerability in the JavaScript application.
CSP is typically configured on the web server or injected via a content delivery network (CDN). The website administrator must ensure that the CSP directives include all required domains and must update them regularly. Failure to do so may result in websites with broken functionality and a poor user experience.
Content security policy (CSP) consists of a set of directives sent to the browser either as a content-security-policy header sent as part of the HTTP response header, or an HTML meta tag included inline on the page. When a browser receives these directives, it inspects every resource and script that the page requests and checks to ensure that the origin domain is part of the allowlist. If not, it blocks the resource from loading.
CSP also supports a report-only mode which uses the content-security-policy-report-only header. In this mode, the browser inspects resources and scripts against the allowlist but does not block them. Instead, policy violations are simply reported to a server specified in the report-uri directive. This mode is not supported using HTML meta tags and the directives must be sent in the HTTP header.
These are the directives supported as part of CSP:
default-src | Specifies the default policy for fetching all types of resources. This serves as a fallback when there is no explicit directive for a resource type. |
script-src | Specifies allowed sources for JavaScript. |
object-src | Specifies allowed sources for plugins, e.g. , or . |
img-src | Specifies allowed sources for images. |
media-src | Specifies allowed sources for media. |
style-src | Specifies allowed sources for stylesheets or CSS. |
frame-src | Specifies allowed sources for loading frames. |
font-src | Specifies allowed sources for loading fonts. |
connect-src | Specifies allowed domains for XHR, WebSocket, fetch(), or EventSource. |
report-uri | Specifies a URI where the browser must post reports of content security policy violations. This can also be used in the content-security-policy-report-only header which reports violations but does not block the resources from loading. |
sandbox (optional) | Loads the page in a sandbox that applies the same-origin policy and prevents popups, plugins and script execution, similar to the iframe sandbox. This directive can include values that selectively allow certain exceptions. |
report-uri | Specifies a URI where reports of policy violations must be posted. |
The directives that end in ‘-src’ support values known as the source list. These could be domain names, wildcards or specific values defined in the CSP specification such as ‘self’, ‘none’, ‘unsafe-inline’ or ‘unsafe-eval’.
CSP is supported by most common browsers including Google Chrome, Safari, Firefox and Edge.
The content security policy header is included as part of the HTTP response header. It consists of a set of directives followed by source lists.
The simplest example of CSP is one that only allows first-party resources:
Content-Security-Policy: default-src 'self';
Here is another example of a longer, more complex CSP header:
Content-Security-Policy: default-src 'self'; img-src *.istockphotos.com; script-src ‘self’ myscripts.example.com report-uri http://my-report-uri.com
This CSP specifies domains for loading images and scripts, and a report-uri domain. All other resources must be loaded from ‘self’, which is the domain serving this page.
Here is another example of a report-only CSP header:
Content-Security-Policy-Report-Only: default-src 'self' report-uri http://my-report-uri.com
This CSP header will report all ‘violations’, i.e. any resources not loaded as first-party, since the default-src directive only allows ‘self’. However this policy will not prevent third-party resources from being loaded. This is a great way to test a CSP without risking website functionality.
Modern websites are a complex mix of content, resources, and JavaScript that creates a rich, dynamic user experience. All of this content is loaded and executed by the browser on the user’s laptop or mobile device, which improves performance and responsiveness. However, this also creates an attack surface for hackers to inject and execute malicious scripts from alternate domains. These scripts can be used to execute cross-site scripting (XSS) attacks, or digital skimming attacks such as Magecart that result in the theft of personal data from your website.
In addition, content security policy is a useful tool in the fight against unauthorized shadow code that plagues web applications. Shadow code is typically introduced via scripts from open source libraries or third-parties that make their way onto a site without formal approvals or security validation.
Because shadow code often runs on the client-side browser, it cannot be seen or controlled using server-side security tools. This leaves an entry point for cybercriminals to inject malicious scripts that skim user data. Client-side attacks, such as digital skimming, formjacking and Magecart, can lead to data breaches or compliance penalties.
CSP script-src directive can be used to restrict the domains from where scripts can be loaded. This ensures that scripts are only loaded from known good domains, reducing the risk of shadow code injections on the website. Additionally, the connect-src directive can be used to restrict network communication with unknown domains, which can stop a malicious script from communicating with its command and control (C2) server and thus limit its ability to cause harm.
While content security policy is a useful tool in the fight against XSS, digital skimming and Magecart attacks, it is not without its limitations.
Effective web application security solutions should be:
Content security policy is an attractive solution since it is easy to integrate, almost universally supported and does not impose any performance penalties. However, due to the many limitations of CSP, website administrators should continue to follow security best practices to minimize the chance of JavaScript security vulnerabilities. Examples include:
Content security policy remains a powerful defense against XSS and client-side script injections, but it is not sufficient to stop client-side attacks alone. HUMAN Compliance and Supply Chain Defense is a web application security solution that partners CSP with granular JavaScript blocking to mitigate malicious client-side code. This multi-layered approach allows you to block specific actions in a script without blocking the entire script, and to block unwanted scripts entirely.
With Compliance and Supply Chain Defense, you gain full visibility into the scripts running on your site, including their interactions and any exposure details. You can identify high-risk incidents involving personally identifiable information (PII), payment card industry (PCI) data, and other sensitive information. The solution provides the real-time visibility and control needed to protect against client-side attacks.
Supply Chain Attacks | What They are & How to Prevent Them
What is Digital Skimming and How Does It Work?
What is Formjacking and How to Prevent It
What is Personally Identifiable Information (PII) Harvesting?
What is PCI DSS Compliance? | Requirements & How to Comply