How to Modify the Content Security Policy on a new Ember CLI app

Whenever you install a brand new Ember CLI app and call ember server, you get notices in your console:

[Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

along with its associated warnings in the terminal: Content Security Policy violation.

If you prefer the nuclear option simply remove the ember-cli-content-security-policy line from your package.json and restart the server.

This is because the bundled jQuery (jquery.min.js) is using inline styles.

In general, to whitelist these policies (and remove the warnings) we must modify our environment.js file:

// config/environment.js

module.exports = function(environment) {
  var ENV = {
	contentSecurityPolicy: {
	  'style-src': "'self' 'unsafe-inline'"
	},
	
   }
};

Running the app from a different IP

In the case you need to run your app from a different IP address, say 192.168.1.33, you would proceed similarly and add the exceptions to permit the usage of eval and web sockets:

// config/environment.js

module.exports = function(environment) {
  var ENV = {
    contentSecurityPolicy: {
      'style-src': "'self' 'unsafe-inline'",
      'script-src': "'self' 'unsafe-eval' 192.168.1.33:35729",
      'connect-src': "'self' ws://192.168.1.33:35729"
    },
    
  }
};

Enjoyed this article? Don't miss my next one!

Leave me your e-mail for content that will help you master Ember:

Do you want to master Ember fast?

Leave me your e-mail for helpful updates delivered straight to your inbox.

(A few e-mails per month. No BS. Unsubscribe anytime!)