The Content Security Policy response header field is a tool to implement defense in depth mechanism for protection of data from content injection vulnerabilities such as cross-scripting attacks. It provides a policy mechanism that allows developers to detect the flaws present in their application and reduce application privileges. It provides developer control over the application at a granular level to prevent various attacks and maintain content integrity.
Syntax:
Content Security Policy : directive directive-value ; directive directive-value
The above has the directive and directive-value. Multiple policy directives can be used in a line separated by semi-colon.
Directives with Examples:
1. Fetch Directives: These are used to control the point from which a certain resource can be accessed or loaded into the system.
-
child-src: It controls the creation of nested browsing context and requests which populate the frame of a worker.
Content-Security-Policy: child-src https://example.com/
-
default-src: It is used to serve as default source list of policy considering the value entered and serve as fallback for other fetch directives.
Content-Security-Policy: default-src 'self'
-
frame-src: It restricts URLs loaded for nested browsing context.
Content-Security-Policy: frame-src https://example.com/
-
manifest-src: It controls the URLs from which various elements of a resource might be loaded.
Content-Security-Policy: manifest-src https://example.com/
-
object-src: It is used restrict URLs which can load plugin content into application.
Content-Security-Policy: object-src https://example.com/
-
connect-src: It is used to control URLs that can be loaded using scripting interfaces into applications.
Content-Security-Policy: connect-src https://example.com/
-
font-src: It controls URLs that can load fonts into application.
Content-Security-Policy: font-src https://example.com/
-
img-src: It controls URLs that can load images into application.
Content-Security-Policy: img-src https://example.com/
-
media-src: It controls URLs that can load audio, video and associated text track resources into application.
Content-Security-Policy: media-src https://example.com/
- style-src: It controls sources that can apply load and apply Stylesheet to an application.
- script-src: It controls sources that can implement JavaScript into application.
- Few fetch directives are experimental application programming interfaces such as prefetch-src, script-src-elem, script-src-attr, style-src-elem, style-src-attr and worker-src.
2.Document Directives: These directives control implementation of properties on all documents and worker environments which come under the governance of CSP.
-
plugin-types: It limits the resources loaded for restricting the possibility to plugins being embedded into a document.
Content-Security-Policy: plugin-types application/pdf
- base-uri: It controls the URLs that can be loaded into base element present in document.
- sandbox: The HTML sandbox policy can be applied by user agent through the specifications of this directive.
3.Navigation Directives contains form-action, frame-ancestors and navigate-to directives. The form-action directive controls URLs that can be used for form submission. The frame-ancestors directive restricts URLs which can embed the resource using frame, iframe, object, embed, or applet element. The navigate-to directive specifies the URLs to which document can traverse through any method.
4.Reporting Directives contains report-to which specifies the end point to send violation reports. The earlier used report-uri is now deprecated.
Few more Examples:
All the examples in the article have been taken from World Wide Web Consortium’s CSP Level 3 Draft.
Content-Security-Policy: script-src https://cdn.example.com/scripts/; object-src 'none' Content-Security-Policy: script-src 'self'; report-to csp-reporting-endpoint Content-Security-Policy: prefetch-src https://example.com/ Content-Security-Policy: worker-src https://example.com/ Content-Security-Policy: navigate-to example.com
Browser Compatibility:
CSP Level 3 is provided partial support from versions Chrome 59+, Firefox 58+, and Edge 79+.
CSP Level 2 is provided full support from versions Chrome 40+, Safari 10+, Edge 76+, and partial support from Firefox 31+ and Edge 15+.
CSP Level 1 is provided full supports from versions Chrome 25+, Firefox 23+, Edge 12+, and Safari 7+.