(CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting ( ) and data injection attacks. These attacks are used for everything from data theft to site defacement to the distribution of malware. Content Security Policy XSS CSP is designed to be fully backward compatible (except CSP version 2 where there are some explicitly-mentioned inconsistencies in backward compatibility; more details section 1.1). Browsers that don't support it still work with servers that implement it, and vice-versa: browsers that don't support CSP simply ignore it, functioning as usual, defaulting to the standard same-origin policy for web content. If the site doesn't offer the CSP header, browsers likewise use the standard . here same-origin policy To enable CSP, you need to configure your web server to return the HTTP header. (Sometimes you may see mentions of the header, but that's an older version and you don't need to specify it anymore.) Content-Security-Policy X-Content-Security-Policy Alternatively, the element can be used to configure a policy, for example: <meta> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';"> Threats Mitigating cross site scripting A primary goal of CSP is to mitigate and report XSS attacks. XSS attacks exploit the browser's trust of the content received from the server. Malicious scripts are executed by the victim's browser because the browser trusts the source of the content, even when it's not coming from where it seems to be coming from. CSP makes it possible for server administrators to reduce or eliminate the vectors by which XSS can occur by specifying the domains that the browser should consider to be valid sources of executable scripts. A CSP compatible browser will then only execute scripts loaded in source files received from those allowlisted domains, ignoring all other script (including inline scripts and event-handling HTML attributes). As an ultimate form of protection, sites that want to never allow scripts to be executed can opt to globally disallow script execution. Mitigating packet sniffing attacks In addition to restricting the domains from which content can be loaded, the server can specify which protocols are allowed to be used; for example (and ideally, from a security standpoint), a server can specify that all content must be loaded using HTTPS. A complete data transmission security strategy includes not only enforcing HTTPS for data transfer, but also marking all and providing automatic redirects from HTTP pages to their HTTPS counterparts. Sites may also use the HTTP header to ensure that browsers connect to them only over an encrypted channel cookies with the secure attribute Strict-Transport-Security . Using CSP Configuring Content Security Policy involves adding the HTTP header to a web page and giving it values to control what resources the user agent is allowed to load for that page. For example, a page that uploads and displays images could allow images from anywhere, but restrict a form action to a specific endpoint. A properly designed Content Security Policy helps protect a page against a cross site scripting attack. This article explains how to construct such headers properly, and provides examples. Content-Security-Policy Specifying your policy You can use the HTTP header to specify your policy, like this: Content-Security-Policy Content-Security-Policy: policy The policy is a string containing the policy directives describing your Content Security Policy. Writing a policy A policy is described using a series of policy directives, each of which describes the policy for a certain resource type or policy area. Your policy should include a policy directive, which is a fallback for other resource types when they don't have policies of their own (for a complete list, see the description of the directive). A policy needs to include a or directive to prevent inline scripts from running, as well as blocking the use of eval(). A policy needs to include a or directive to restrict inline styles from being applied from a element or a style attribute. There are specific directives for a wide variety of types of items, so that each type can have its own policy, including fonts, frames, images, audio and video media, scripts, and workers. default-src default-src default-src script-src default-src style-src <style> Examples: Common use cases This section provides examples of some common security policy scenarios. Example 1 A web site administrator wants all content to come from the site's own origin (this excludes subdomains.) Content-Security-Policy: -src default 'self' Example 2 A web site administrator wants to allow content from a trusted domain and all its subdomains (it doesn't have to be the same domain that the CSP is set on.) Content-Security-Policy: -src *.trusted.com default 'self' Example 3 A web site administrator wants to allow users of a web application to include images from any origin in their own content, but to restrict audio or video media to trusted providers, and all scripts only to a specific server that hosts trusted code. Content-Security-Policy: -src ; img-src *; media-src media1.com media2.com; script-src userscripts.example.com default 'self' Here, by default, content is only permitted from the document's origin, with the following exceptions: Images may load from anywhere (note the "*" wildcard). Media is only allowed from media1.com and media2.com (and not from subdomains of those sites). Executable script is only allowed from userscripts.example.com. Example 4 A web site administrator for an online banking site wants to ensure that all its content is loaded using TLS, in order to prevent attackers from eavesdropping on requests. Content-Security-Policy: -src https: default //onlinebanking.jumbobank.com The server permits access only to documents being loaded specifically over HTTPS through the single origin onlinebanking.jumbobank.com. Example 5 A web site administrator of a web mail site wants to allow HTML in email, as well as images loaded from anywhere, but not JavaScript or other potentially dangerous content. : *.mailsite.com; * Content-Security-Policy default-src 'self' img-src Note that this example doesn't specify a ; with the example CSP, this site uses the setting specified by the directive, which means that scripts can be loaded only from the originating server. script-src default-src Testing your policy To ease deployment, CSP can be deployed in report-only mode. The policy is not enforced, but any violations are reported to a provided URI. Additionally, a report-only header can be used to test a future revision to a policy without actually deploying it. You can use the HTTP header to specify your policy, like this: Content-Security-Policy-Report-Only Content-Security-Policy-Report-Only: policy If both a header and a header are present in the same response, both policies are honored. The policy specified in headers is enforced while the policy generates reports but is not enforced. Content-Security-Policy-Report-Only Content-Security-Policy Content-Security-Policy Content-Security-Policy-Report-Only Enabling reporting By default, violation reports aren't sent. To enable violation reporting, you need to specify the policy directive, providing at least one URI to which to deliver the reports: report-uri Content-Security-Policy: -src ; report-uri http: default 'self' //reportcollector.example.com/collector.cgi Then you need to set up your server to receive the reports; it can store or process them in whatever manner you determine is appropriate. Violation report syntax The report JSON object contains the following data: blocked-uri The URI of the resource that was blocked from loading by the Content Security Policy. If the blocked URI is from a different origin than the , then the blocked URI is truncated to contain just the scheme, host, and port. document-uri disposition Either or depending on whether the header or the header is used. "enforce" "report" Content-Security-Policy-Report-Only Content-Security-Policy document-uri The URI of the document in which the violation occurred. effective-directive The directive whose enforcement caused the violation. original-policy The original policy as specified by the HTTP header. Content-Security-Policy referrer The referrer of the document in which the violation occurred. script-sample The first 40 characters of the inline script, event handler, or style that caused the violation. status-code The HTTP status code of the resource on which the global object was instantiated. violated-directive The name of the policy section that was violated. Sample violation report Let's consider a page located at . It uses the following policy, disallowing everything but stylesheets from . http://example.com/signup.html cdn.example.com Content-Security-Policy: -src ; style-src cdn.example.com; report-uri /_/csp-reports default 'none' The HTML of looks like this: signup.html Sign Up ... Content ... <!DOCTYPE html> < > html < > head < > title </ > title < = = > link rel "stylesheet" href "css/style.css" </ > head < > body </ > body </ > html Can you spot the mistake? Stylesheets are allowed to be loaded only from , yet the website tries to load one from its own origin ( ). A browser capable of enforcing CSP would send the following violation report as a POST request to , when the document is visited: cdn.example.com http://example.com http://example.com/_/csp-reports {
  "csp-report": {
    "document-uri": "http://example.com/signup.html",
    "referrer": "",
    "blocked-uri": "http://example.com/css/style.css",
    "violated-directive": "style-src cdn.example.com",
    "original-policy": "default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports"
  }
} As you can see, the report includes the full path to the violating resource in blocked-uri. This is not always the case. For example, if the signup.html attempted to load CSS from , the browser would include the full path, but only the origin ( ). The CSP specification of this odd behaviour. In summary, this is done to prevent leaking sensitive information about cross-origin resources. http://anothercdn.example.com/stylesheet.css not http://anothercdn.example.com gives an explanation Browser compatibility A specific incompatibility exists in some versions of the Safari web browser, whereby if a Content Security Policy header is set, but not a Same Origin header, the browser will block self-hosted content and off-site content, and incorrectly report that this is due to a the Content Security Policy not allowing the content. Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/CS Published under Open CC Attribution ShareAlike 3.0 license

Mozilla

Styling HTML Using CSS: A Beginner's Guide

What is Transport Layer Security (TLS)?

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Everything You Need to Know About Content Security Policy (CSP)

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

An Introduction to Firefox’s new Site Isolation Security Architecture

Cybersecurity Essentials: Practical Web App Security Testing Tips for QA Engineers

Mastering Effect Programming in JavaScript with Generators and Deno

108 Stories To Learn About Cybersecurity Tips

10 Ways to Mitigate Cybersecurity Risks and Prevent Data Theft

An Introduction to Firefox’s new Site Isolation Security Architecture

Cybersecurity Essentials: Practical Web App Security Testing Tips for QA Engineers

Mastering Effect Programming in JavaScript with Generators and Deno

108 Stories To Learn About Cybersecurity Tips

10 Ways to Mitigate Cybersecurity Risks and Prevent Data Theft

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps