Espen Henriksen

Front-end team lead

Oslo Market Solutions

 

espen_dev

esphen

What the CSP?!

A layman's introduction

Lightning talk

Hold on to your horses

CSP

  • Content-Security-Policy

  • A header sent from the server
  • Can also be a meta tag in the <head>
  • Helps guard against XSS
  • Supported in modern browsers
  • Partial support in IE11

Directives

  • CSP consists of a series of directives
  • Each directive specifies allowed origins
  • If a directive does not specify the origin as allowed, the resource is blocked by the browser
  • Common values: 'self', 'unsafe-inline', hostnames

Directives

  • default-src
  • connect-src
  • font-src
  • frame-src
  • img-src
  • manifest-src
  • media-src
  • prefetch-src
  • script-src
  • style-src
  • webrtc-src
  • worker-src
  • base-uri
  • plugin-types
  • sandbox
  • disown-opener
  • form-action
  • frame-ancestors
  • navigate-to
  • block-all-mixed-content
  • require-sri-for
  • upgrade-insecure-requests

What if you get it wrong?!

  • Revert, revert!
  • report-uri / report-to reporting directives
  • report-uri allows browsers to notify us that a resource has been blocked
  • Sentry supportsbeing a report-uri target

What does it look like?

Example

// Allow current domain and trusted.com
Content-Security-Policy: default-src 'self' *.trusted.com

// Allow self and enable reporting
Content-Security-Policy: default-src 'self'; report-uri http://example.com/collector

// Only allow https
Content-Security-Policy: default-src https://example.com

Demo

Fin

Made with Slides.com