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?

Refused to load the script 'http://use.typekit.net/abcdef.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' localhost:35729".
 login:1
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' localhost:35729". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
 login:20
Refused to load the script 'http://connect.facebook.net/en_US/all.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' localhost:35729".
 login:1
Refused to load the script 'http://maps.googleapis.com/maps/api/js?libraries=places' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' localhost:35729".

Here are the lines in my app/index.html file:

<script type="text/javascript" src="//use.typekit.net/abcdef.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

score 126 · Accepted Answer · answered Oct 04 '14 at 11:34

126

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.

answered Oct 04 '14 at 11:34

Peter Brown

50,956
18
113
146

I think you need to whitelist S3 somehow, but the API is still pretty opaque to me. – Sam Selikoff Oct 23 '14 at 17:06
We whitelist s3 with `s3.amazonaws.com`, but...we're getting weird issues on Firefox. Chrome seems to work just fine. – ToddSmithSalter Oct 28 '14 at 19:23
2

You can allow all with wildcard `*`. Full list: http://content-security-policy.com/#source_list – lima_fil May 09 '15 at 19:05
1

just an updated, we have actually removed CSP from the default installation due to these ergonomic concerns. We believe it was actually making the problem worse, we do hope (as the ergonomics improve) to reinstate this as a default add-on. – Stefan Penner Jan 19 '16 at 22:59
We pull in a number of external resources, and also use a strong CSP. So it can be done, but it can also be a lot of work. The best security is to blacklist everything and then whitelist things you want to allow. Unfortunately, that means going through each external resource and whitelisting them one by one. A CSP with a `*` or `unsafe-eval` or `unsafe-inline` is practically useless. And you have to check and whitelist things loaded by external scripts you run, not just the scripts themselves, obviously. – LocalPCGuy Aug 14 '18 at 23:25

score 18 · Answer 2 · answered Mar 13 '15 at 00:39

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"
},

Violating Content Security Policy directive after ember-cli 0.0.47 upgrade

2 Answers2

Linked