11

I'm using http-mock with Ember CLI as suggested on http://www.ember-cli.com/#ember-data. I understand the basic concept of CSP but I don't understand the configuration of it within an Ember CLI application.

How can I configure my application to either accept requests to localhost:4200/api/ to avoid this during development:

Content Security Policy violation: {
    "csp-report": {
        "document-uri":"http://localhost:4200/products",
        "referrer":"",
        "violated-directive":"style-src 'self'",
        "effective-directive":"style-src",
        "original-policy":"default-src 'none'; script-src 'self' 'unsafe-eval' localhost:35729 0.0.0.0:35729; font-src 'self'; connect-src 'self' ws://localhost:35729 ws://0.0.0.0:35729 http://0.0.0.0:4200/csp-report; img-src 'self'; style-src 'self'; media-src 'self'; report-uri http://0.0.0.0:4200/csp-report;",
        "blocked-uri":"",
        "source-file":"chrome-extension://alelhddbbhepgpmgidjdcjakblofbmce",
        "line-number":1,"column-number":20481,"status-code":200
    }
}
rog
  • 5,351
  • 5
  • 33
  • 40
wintermeyer
  • 8,178
  • 8
  • 39
  • 85

1 Answers1

13

You can adjust your content security policy by editing config/environment.js. I believe in your case, the connect-src is relevant to the error being thrown (edit: looks like style-src is being violated, possibly by Chrome Extension Awesome Screenshot). Adding * will allow it to connect to anything.

var ENV = {

  ...

  contentSecurityPolicy: {
    'default-src': "'none'",
    'script-src': "'self'",
    'font-src': "'self'",
    'connect-src': "'self' *",
    'img-src': "'self'",
    'style-src': "'self' *",
    'media-src': "'self'"
  }
}

Or more specifically, you could add:

...
'connect-src': "'self' 'localhost:4200'",
...

Furthermore, if you only wanted to add this to your dev environment, put it in:

if (environment === 'development') {
  ENV.contentSecurityPolicy = {
    ...(policies)...
  }
}

More information available about CSP in ember-cli: https://www.npmjs.com/package/ember-cli-content-security-policy.

More information about CSP in general: http://content-security-policy.com/

rog
  • 5,351
  • 5
  • 33
  • 40
  • I tried both versions but they don't work. I still get the same error message. – wintermeyer Mar 28 '15 at 21:21
  • 2
    Looking closer at your error message I see `"violated-directive":"style-src 'self'"` .. Try adding `'style-src': "'self' *"`. Looks like a Chrome extension is injecting a stylesheet? Googling it suggests "Awesome Screenshot" - try disabling? – rog Mar 28 '15 at 22:09
  • 1
    It may be inline styling causing the warning. Add `'unsafe-inline'` to `style-src` to resolve that. – rog Mar 29 '15 at 06:30
  • 3
    It indeed was a Chrome Extension. I would have never thought about that. Thank you! – wintermeyer Mar 29 '15 at 07:15