Skip to content
Related Articles

Related Articles

Improve Article

HTTP headers | Content-Security-Policy

  • Last Updated : 16 Jul, 2021

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+.

My Personal Notes arrow_drop_up
Recommended Articles
Page :