Content Security Policy Cheat Sheet – CSP

Introduction to CSP

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. A CSP can be used to specify which dynamic resources are allowed to load and which are not, by declaring what can execute and what can be served. Below is a Content Security Policy cheat-sheet that details each directive with a sample CSP header and an explanation.

Default-src Directive

Content-Security-Policy: default-src 'self';

The default-src directive serves as a fallback for other src directives. This sample header restricts loading resources to only those from the same origin as the document.

Script-src Directive

Content-Security-Policy: script-src 'self' https://apis.example.com;

The script-src directive specifies which script resources can be loaded. This example allows scripts hosted on the site’s own domain, as well as from a trusted external domain.

Style-src Directive

Content-Security-Policy: style-src 'self' 'unsafe-inline';

The style-src directive controls which styles can be loaded and applied to the page. This sample includes browser domain styles and allows inline styles which can be considered unsafe.

Img-src Directive

Content-Security-Policy: img-src 'self' data:;

The img-src directive specifies which images are allowed to be displayed. In this example, images from the same origin and data URIs are permitted.

Connect-src Directive

Content-Security-Policy: connect-src 'self' wss://websockets.example.com;

The connect-src directive governs which endpoints the application can connect to using script interfaces. This includes AJAX requests, WebSockets, and EventSource. Here, connections are allowed to the domain itself and to a WebSocket server.

Font-src Directive

Content-Security-Policy: font-src 'self' https://fonts.example.com;

The font-src directive controls which font resources are permitted for use. This example allows for fonts hosted on the same domain or a trusted font repository.

Media-src Directive

Content-Security-Policy: media-src 'self';

media-src specifies which media resources the browser is allowed to load. The sample CSP restricts these resources to those that originate from the same domain as the document.

Object-src Directive

Content-Security-Policy: object-src 'none';

The object-src directive defines which objects such as <object>, <embed>, or <applet> are allowed. This policy effectively disables all of them.

Frame-src Directive

Content-Security-Policy: frame-src https://example.com;

The frame-src directive lists the URLs that can be framed. In other words, it controls the content sources that can be embedded as frames. Here, only frames from ‘example.com’ are allowed.

Sandbox Directive

Content-Security-Policy: sandbox allow-scripts;

The sandbox directive applies restrictions to a set of extra restrictions to the content in the <iframe>. This example allows scripts to run inside sandboxed <iframe>.

Report-uri Directive

Content-Security-Policy: report-uri /csp-violation-report-endpoint/;

The report-uri directive specifies a URL where the browser will send reports when a content security policy is violated. This example points to an endpoint on the same domain that handles violation reports.

Conclusive Summary

In conclusion, a well-crafted Content Security Policy is integral to a secure web application. The Content Security Policy cheat-sheet provided above can assist developers in understanding the core directives and how to implement them. Remember that CSP is a defense-in-depth measure and should be part of a broader security strategy.

References

• MDN Web Docs – Content Security Policy (CSP)
• W3C – Content Security Policy Level 3