I am trying to setup the CSP and Ember is doing something funny, difficult to describe what. I am rightly configuring one part, and it is failing in another part. Or suddenly, livereload is blocked. Or it says that script-src is not defined, and falls back to default-src, which is fine, if it weren't a lie. I know ember-cli-content-security-policy is processing the CSP to allow for livereload and whatnot, but I do not know when/how this is done. I want to verify that the CSP I configure is surviving ember-cli processing, because after one hour of debugging I do not trust it anymore.
Long story short: I want to see the CSP at startup of my app, right when the versions are shown. I do not want to see the CSP that I have configured, but the one that Ember is using, which might or might not be the same: this is exactly what I want to find out.
How can I tell Ember "show me the CSP that you are using"?
Thanks to @Bek for the tip about checking the request headers.
With this config (copy-pasted from the ember-cli-content-security-policy readme):
ENV.contentSecurityPolicy = {
'default-src': "'none'",
'script-src': ["'self'", "https://cdn.mxpnl.com"], // Allow scripts from https://cdn.mxpnl.com
'font-src': ["'self'", "http://fonts.gstatic.com"], // Allow fonts to be loaded from http://fonts.gstatic.com
'connect-src': ["'self'", "https://api.mixpanel.com", "http://custom-api.local"], // Allow data (ajax/websocket) from api.mixpanel.com and custom-api.local
'img-src': "'self'",
'style-src': ["'self'", "'unsafe-inline'", "http://fonts.googleapis.com"], // Allow inline styles and loaded CSS from http://fonts.googleapis.com
'media-src': null // `media-src` will be omitted from policy, browser will fallback to default-src for media resources.
}
I get these headers:
Content-Security-Policy-Report-Only: default-src 'none'; script-src 'self',https://cdn.mxpnl.com,e,l,f,', ,',u,n,s,a,f,e,-,e,v,a,l,' localhost:49152 0.0.0.0:49152; font-src 'self',http://fonts.gstatic.com,e,l,f,'; connect-src 'self',https://api.mixpanel.com,http://custom-api.local,l,f,' ws://localhost:49152 ws://0.0.0.0:49152 http://undefined:16013/csp-report; img-src 'self'; style-src 'self','unsafe-inline',http://fonts.googleapis.com,l,f,'; media-src null; report-uri http://undefined:16013/csp-report;
It seems that indeed ember-cli-content-security-policy is doing something funny. No idea how to solve that. I have opened an issue.
Content Security Policy is simple header (attached to all responces) sent from your host server, you can always check it going to chrome dev tools networks section
I get these headers:
It seems that indeed ember-cli-content-security-policy is doing something funny. No idea how to solve that. I have opened an issue.
This issue is in v0.4.0 but not in master (I guess it was fixed) so for now you can install it from master
"ember-cli-content-security-policy": "rwjblue/ember-cli-content-security-policy#master",