Content Security Policy presentation

A presentation I gave on Content Security Policy for Advanced WordPress San Diego. What it is, who it’s for, and how to implement on your website. Sildes are available at the following URL.

https://www.slideshare.net/AustinGil/content-security-policy-82172528

Contents:

What is it?

- https://en.wikipedia.org/wiki/Content_Security_Policy

How does it work?

With it, you can create a whitelist of trusted content sources.

Because CSP occurs on the HTTP headers, it can implement security early on.

What does it look like?

HTTP Headers:

Response Headers

Content-Security-Policy: <directive> <source list>; <directive> <source list>;

Directives can list multiple sources.

What are directives?

The main ones we will most often work with are:

default-src, script-src, style-src, img-src, font-src

But there’s plenty more…

base-uri, frame-src, object-src, media-src, connect-src, form-action, frame-ancestors, child-src, plugin-types, upgrade-insecure-requests, worker-src, sandbox

What are source lists?

Sources can follow various formats:

  • example.com — Allows resources from the specified domain name.
  • *.example.com — Allows resources from any subdomain under example.com.
  • https://cdn.com — Only resources over HTTPS matching the given domain.
  • https: — Allows loading resources only over HTTPS on any domain.
  • data: — Allows resources via the data scheme (eg Base64 encoded images).

What is ‘self’ all about?

  • *
  • ‘self’
  • ‘unsafe-inline’
  • ‘unsafe-eval’
  • ‘strict-dynamic’
  • ‘none’
  • ‘nonce-’
  • ‘sha256-’

More on these here: https://content-security-policy.com/

How do I implement it?

With a <meta> tag (not recommended):
<meta http-equiv=”Content-Security-Policy” content=”default-src ‘self’”>

With a plugin (yay!): HTTP Headers or WP Content Security Policy Plugin

Will it break anything?

Luckily there is the Content-Security-Policy-Report-Only header.

Allows you to test your CSP without enforcing it.

Format is the same as the Content-Security-Policy header.

How can I test it?

Observatory by Mozilla

csp-evaluator.withgoogle.com

Let’s give this a try…

Install WP Plugin: https://wordpress.org/plugins/wp-content-security-policy/

Disable any caching

Testing tool: https://observatory.mozilla.org/

Resources

Testing tools:
Observatory by Mozilla
csp-evaluator.withgoogle.com

Information:
content-security-policy.com
Google’s Web Fundamentals

Thanks!

Full Stack @Revealbio | Author of Vuetensils & Particles CSS | Panelist @ViewsOnVue | Board Member @sandiegojs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store