Ember CLI and Content Security Policy (CSP)

As of Ember CLI v0.0.47 there is now built-in support for Content Security Policy in our apps!

WTF is a CSP?

It's a beautiful defence against XSS attacks. You simply send a HTTP header in server your response. A example policy would be:

  default-src 'self';
  img-src     *;
  object-src  media1.example.com
  script-src  trustedscripts.example.com

Tada! You've locked down what type of resources are allowed to be loaded from where. When a user using a browser that supports CSP (and a lot of them do) visits your site, it will only load resources that have been whitelisted by your policy. If an attacker injects a persistent XSS into your app loading, say, http://evildomain.com/keylogger.js it will fail because it's not coming from trustedscripts.example.com or your domain.

Why should I care?

Well, the Ember CLI maintainers believe that security should be consciously in the mind of web developers. I agree. We should be responsible for building secure-by-default apps and not patch after the fact.

Having CSP in Ember increases your understanding of how an attacker could harm your users or compromise your app.

Won't this break my app?

Nope! For now they have it as "Report Only" which means when in a dev environment your console will fill up with all violations of the policy so you can patch your backend or Handlebars template.

Ok, how do I use it?

TL;DR: you need to modify your server config that sends your Ember app to respond with the Content Security Policy headers.

I suggest you do your homework, though. Content Security Policy is a powerful beast. You can read up on all of the directives available to you here: http://content-security-policy.com/. And how to configure your Ember app: ember-cli-content-security-policy.

Or, if you don't like reading, here's a talk on CSP (not Ember-related):

In an effort to not write information on the internet that will ultimately get rusty (this is especially true for Ember posts!), I suggest you read the Ember CLI docs on CSP for more information:


This posts's header is by Pekka Nikrus, titled Embers. Used under CC BY-NC-SA 2.0.