Table of Contents
- Introduction to CSP
- Default-src Directive
- Script-src Directive
- Style-src Directive
- Img-src Directive
- Connect-src Directive
- Font-src Directive
- Media-src Directive
- Object-src Directive
- Frame-src Directive
- Sandbox Directive
- Report-uri Directive
- Conclusive Summary
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.
Content-Security-Policy: default-src 'self';
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.
Content-Security-Policy: script-src 'self' https://apis.example.com;
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.
Content-Security-Policy: style-src 'self' 'unsafe-inline';
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.
Content-Security-Policy: img-src 'self' data:;
img-src directive specifies which images are allowed to be displayed. In this example, images from the same origin and data URIs are permitted.
Content-Security-Policy: connect-src 'self' wss://websockets.example.com;
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.
Content-Security-Policy: font-src 'self' https://fonts.example.com;
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.
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.
Content-Security-Policy: object-src 'none';
object-src directive defines which objects such as
<applet> are allowed. This policy effectively disables all of them.
Content-Security-Policy: frame-src https://example.com;
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.
Content-Security-Policy: sandbox allow-scripts;
sandbox directive applies restrictions to a set of extra restrictions to the content in the
<iframe>. This example allows scripts to run inside sandboxed
Content-Security-Policy: report-uri /csp-violation-report-endpoint/;
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.
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.