Content Security Policy

CSP (Content Security Policy) is a security standard that adds an extra layer of protection against cross-site scripting (XSS), clickjacking, and other code injection attacks. It works by allowing you to define a whitelist of sources that the browser is allowed to load resources from.

CSP is implemented by sending a specific HTTP header from the web server.

• Including the Content-Security-Policy header
• element in the DOM

eg:
Header:
Content-Security-Policy: default-src 'self'; script-src 'self' ; img-src 'self' https://example.com;

<meta
http-equiv="Content-Security-Policy"
content="default-src ‘self’; img-src https://www.site.com;" />

Within the header itself, you may see properties such as default-src or script-src defined and many more. Each of these give an option to an administrator to define at various levels of granularity, what domains are allowed for what type of content. The use of self is a special keyword that reflects the same domain on which the website is hosted.

Directives#

CSP policies are built using directives that define the allowed sources for different types of resources.
Common CSP directives include:

• default-src: Serves as a fallback for other directives when they are not explicitly specified.
• script-src: Defines the allowed sources for JavaScript code.
• style-src: Defines the allowed sources for CSS stylesheets.
• img-src: Defines the allowed sources for images.
• connect-src: Defines the allowed sources for making HTTP requests (e.g., via fetch, XMLHttpRequest, or WebSockets).
• font-src: Defines the allowed sources for fonts.
• media-src: Defines the allowed sources for media files (audio and video).
• object-src: Defines the allowed sources for plugins like Flash.
• frame-src: Defines the allowed sources for frames and iframes.
• base-uri: Defines the allowed URLs that can be used in a <base> element.
• form-action: Defines the allowed URLs that can be used as the target of a form submission.
• report-uri: Specifies a URL to which the browser should send violation reports when a policy is broken.
• sandbox: Specifies restrictions for the resources being applied

Values#

• none : Prevents loading content from any source.

• self : Allows loading content from the same origin (excluding subdomains).

• unsafe-inline : Allows the use of inline scripts and styles.

• unsafe-eval : Allows the use of “eval()” functions.

• <scheme> : Allows loading content over a specific scheme (e.g., “https:’).

• <host-source> : Allows loading content from a specific host or domain.

• data: : Allows the use of inline data such as base64-encoded images.

• blob: : Allows the use of Blob URIs.

• CSP can also be configured in “report-only” mode, which allows you to monitor the effects of a policy without enforcing it. This is done using the Content-Security-Policy-Report-Only header.