Violating Content Security Policy directive after ember-cli 0.0.47 upgrade

Question

I upgraded my ember-cli app to 0.0.47 and am now getting a bunch of errors in my browser console related to the content security policy. How do I fix this issue?

<         


        

Answer 1

After reading some docs at http://content-security-policy.com/ and https://github.com/rwjblue/ember-cli-content-security-policy, I added some policies to my config/environment.js file like so:

module.exports = function(environment) {
  var ENV = {
    contentSecurityPolicy: {
      'default-src': "'none'",
      'script-src': "'self' 'unsafe-inline' 'unsafe-eval' use.typekit.net connect.facebook.net maps.googleapis.com maps.gstatic.com",
      'font-src': "'self' data: use.typekit.net",
      'connect-src': "'self'",
      'img-src': "'self' www.facebook.com p.typekit.net",
      'style-src': "'self' 'unsafe-inline' use.typekit.net",
      'frame-src': "s-static.ak.facebook.com static.ak.facebook.com www.facebook.com"
    },

  // ...
};

This made all the immediate errors go away, but as soon as I started navigating my app, new ones appeared related to S3 media sources.

I'm sure this works for apps that don't include any external resources, but I've decided to remove ""ember-cli-content-security-policy" from my package.json file.

Answer 2

I had to use this when linking to fonts from google:

<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Lato:400,700,900'>

In the config/environment.js file I used

contentSecurityPolicy: {
  'font-src': "'self' data: fonts.gstatic.com",
  'style-src': "'self' 'unsafe-inline' fonts.googleapis.com"
},