ember-cli served via virtual box violates content security policy - ember.js

I have a fresh ember-cli v.0.1.2 application. I serve ember within virtual box, and access the webpage from the host machine via Host-Only configured network adapter, at 192.168.56.102.
When I run ember serve from the virtual box and visit 192.168.56.102 from the host, I get these errors on the console:
[Report Only] Refused to load the script 'http://192.168.56.102:35729/livereload.js?snipver=1' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' localhost:35729 0.0.0.0:35729".
ember-cli-live-reload.js:5 (anonymous function)
livereload.js?snipver=1:193 [Report Only] Refused to connect to 'ws://192.168.56.102:35729/livereload' because it violates the following Content Security Policy directive: "connect-src 'self' ws://localhost:35729 ws://0.0.0.0:35729".
I tried various configurations using ember-cli-content-security-policy without luck:
contentSecurityPolicy: {
'default-src': "'none'",
'script-src': "'self'",
'font-src': "'self'",
'connect-src': "'self'",
'img-src': "'self'",
'style-src': "'self'",
'media-src': "'self'"
}
How do I solve these errors for virtual box development?
Edit:
So according to this solution: EmberCspTutorial, and the blog post: https://blog.justinbull.ca/how-to-configure-csp-in-your-ember-cli-app/
This configuration fixes the errors:
ENV.contentSecurityPolicy = {
'default-src': "'none'",
'script-src': "'self' 'unsafe-eval' 192.168.56.102:35729",
'font-src': "'self'",
'connect-src': "'self' ws://192.168.56.102:35729",
'img-src': "'self'",
'style-src': "'self'",
'media-src': "'self'"
};
There is also 30 min video explaining all of this, but is it ok I have to use some hardcoded ip that is likely to change like this, a comprehensive explanation will be accepted as an answer.
How to Enable CSP for data:application/font*
I have included some fonts and now I get these errors, what is the CSP configuration to supress these:
[Report Only] Refused to load the font 'data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSg…IAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' because it violates the following Content Security Policy directive: "font-src 'self' data:application/* http://fonts.gstatic.com".
192.168.56.102/:1 [Report Only] Refused to load the font 'data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjCB…BiAHkAIABJAGMAbwBNAG8AbwBuAC4AAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==' because it violates the following Content Security Policy directive: "font-src 'self' data:application/* http://fonts.gstatic.com".
According to reference this works:
ENV.contentSecurityPolicy = {
'default-src': "'none'",
'script-src': "'self' 'unsafe-eval' 192.168.56.102:35729",
'font-src': "'self' data: http://fonts.gstatic.com",
'connect-src': "'self' ws://192.168.56.102:35729",
'img-src': "'self'",
'style-src': "'self' fonts.googleapis.com",
'media-src': "'self'"
};

Related

Ember CSP: Change connect-src dynamically

Is there a way to change the connect-src at runtime in ember-cli-content-security-policy?
contentSecurityPolicy: {
'default-src': "'none'",
'script-src': "'self' 'unsafe-inline' 'unsafe-eval' www.google-analytics.com",
'font-src': "'self' data: use.typekit.net fonts.gstatic.com",
'img-src': "'self' data: image/png www.google-analytics.com",
'connect-src': "'self' www.google-analytics.com wss://data-test/ws",
'style-src': "'self' 'unsafe-inline' http://fonts.googleapis.com",
'frame-src': "'self' http://test.com/ESTORERIA/Agreement/en/EULA.htm"
}
If you know what values you want to include at build time you could do something in environment.js like:
contentSecurityPolicy: {
'connect-src': process.env.CONTENT_SRC,
},
That would read this from your ENV variables so you could have the correct value set on whatever server you built your app on.

No 'Access-Control-Allow-Origin' header is present (Ember JS)

I am working on an ember app ( Ember 2.11.0 ). Here is my content security policy settings:
contentSecurityPolicy: {
'default-src': "'none'",
'script-src': "'self'",
'font-src': "'self'",
'connect-src': "'self' 'localhost:4200' 'some-url'",
'img-src': "'self'",
'style-src': "'self' *",
'media-src': "'self'"
}
I am getting the following error when I try to make the following XMLHttpRequest:
XMLHttpRequest cannot load url-to-sccess. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:4200' is therefore not allowed
access.
Any suggestions?

Ember-cli gets white screen and wont load when I install liquid-fire

When I upload liquid-fire in my ember-cli project I get a white screen, here are the errors I get, I am running ember version 1.13.1, node.12.2, npm 2.12.1, liquid-fire 0.20.4, the second I uninstall liquid-fire it starts working perfectly fine, any ideas?
about:1 [Report Only] Refused to load the script'http://maps.googleapis.com/maps/api/js?v=3' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' https://*.googleapis.com https://*.gstatic.com data: localhost:35729 0.0.0.0:35729".
about:13 POST http://0.0.0.0:4200/csp-report net::ERR_ADDRESS_INVALID
js?v=3:8 [Report Only] Refused to load the script 'http://maps.gstatic.com/maps-api-v3/api/js/20/13/main.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' https://*.googleapis.com https://*.gstatic.com data: localhost:35729 0.0.0.0:35729".
js?v=3:8 POST http://0.0.0.0:4200/csp-report net::ERR_ADDRESS_INVALID
about:16 [Report Only] Refused to load the stylesheet 'http://fonts.googleapis.com/css?family=EB+Garamond' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' https://*.googleapis.com data:".
about:16 [Report Only] Refused to load the stylesheet 'http://fonts.googleapis.com/css?family=Lily+Script+One' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' https://*.googleapis.com data:".
about:16 POST http://0.0.0.0:4200/csp-report net::ERR_ADDRESS_INVALID
about:23 GET http://localhost:4200/assets/bootstrap.css.map 404 (Not Found)
velocity.js:660 [Report Only] Refused to load the font 'http://fonts.gstatic.com/s/ebgaramond/v7/kYZt1bJ8UsGAPRGnkXPeFY4P5ICox8Kq3LLUNMylGO4.woff2' because it violates the following Content Security Policy directive: "font-src 'self' https://*.gstatic.com data:".
velocity.js:660 [Report Only] Refused to load the font 'http://fonts.gstatic.com/s/lilyscriptone/v4/uPWsLVW8uiXqIBnE8ZwGPCJccsb45t3MJKcv5BJtrIs.woff2' because it violates the following Content Security Policy directive: "font-src 'self' https://*.gstatic.com data:".
ember.debug.js:48 Uncaught Error: Could not find module htmlbars-runtime
velocity.js:660 POST http://0.0.0.0:4200/csp-report net::ERR_ADDRESS_INVALID
about:1 [Report Only] Refused to load the font 'http://fonts.gstatic.com/s/ebgaramond/v7/kYZt1bJ8UsGAPRGnkXPeFY4P5ICox8Kq3LLUNMylGO4.woff2' because it violates the following Content Security Policy directive: "font-src 'self' https://*.gstatic.com data:".
about:1 POST http://0.0.0.0:4200/csp-report net::ERR_ADDRESS_INVALID
bundle.js:1 init on: localhost
main.js:27 [Report Only] Refused to load the script 'http://maps.gstatic.com/maps-api-v3/api/js/20/13/common.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' https://*.googleapis.com https://*.gstatic.com data: localhost:35729 0.0.0.0:35729".
main.js:27 [Report Only] Refused to load the script 'http://maps.gstatic.com/maps-api-v3/api/js/20/13/util.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' https://*.googleapis.com https://*.gstatic.com data: localhost:35729 0.0.0.0:35729".
main.js:27 [Report Only] Refused to load the script 'http://maps.gstatic.com/maps-api-v3/api/js/20/13/stats.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' https://*.googleapis.com https://*.gstatic.com data: localhost:35729 0.0.0.0:35729".
main.js:27 POST http://0.0.0.0:4200/csp-report net::ERR_ADDRESS_INVALID
main.js:27 [Report Only] Refused to load the script 'http://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1…p%3A%2F%2Flocalhost%3A4200%2Fabout&5e1&callback=_xdc_._nayihi&token=102154' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' https://*.googleapis.com https://*.gstatic.com data: localhost:35729 0.0.0.0:35729".
main.js:27 POST http://0.0.0.0:4200/csp-report net::ERR_ADDRESS_INVALID
Your issue might be related to content security policy.
You need to configure your environment.js in config/environment.js, for script-src and font-src.
module.exports = function(environment) {
var ENV = {
contentSecurityPolicy: {
'default-src': "'none'",
'script-src': "'self' 'unsafe-inline' 'unsafe-eval' maps.googleapis.com maps.gstatic.com",
'font-src': "'self' data: fonts.gstatic.com",
....
},
};

Security problems in upgrading ember application

I have an ember/ember-cli application that I am upgrading from 1.10 to 1.12. This application uses an API that runs on port 8000 in development. I have the following environment.js:
module.exports = function(environment) {
var ENV = {
modulePrefix: 'myapplication',
environment: environment,
baseURL: '/',
locationType: 'auto',
EmberENV: {
FEATURES: {
}
},
contentSecurityPolicy: {
'default-src': "'none'",
'script-src': "'self'",
'font-src': "'self'",
'img-src': "'self'",
'style-src': "'self'",
'media-src': "'self'"
},
APP: {}
};
if (environment === 'development') {
ENV.APP.API_NAMESPACE = '';
ENV.APP.LOG_VIEW_LOOKUPS = true;
ENV.contentSecurityPolicy['connect-src'] = "http://localhost:8000";
}
if (environment === 'test') {
// [snipped]
}
if (environment === 'production') {
// [snipped]
}
return ENV;
};
So this worked before, but now, when a request is made to the API, it is being made to port 4200, so returning as not found.
The crossdomain.xml has the following:
<site-control permitted-cross-domain-policies="none"/>
but changing this to "all" didn't help. It seems that ember-cli-content-security-policy has been updated from 0.3.0 to 0.4.0, incidentally.
EDIT
After proxying ember serve --proxy http://localhost:8000 I get the following error:
Content Security Policy violation:
{
"csp-report":{
"document-uri":"http://localhost:4200/",
"referrer":"",
"violated-directive":"connect-src http://localhost:8000 ws://localhost:35729 ws://0.0.0.0:35729 http://0.0.0.0:4200/csp-report",
"effective-directive":"connect-src",
"original-policy":"default-src 'none'; script-src 'self' localhost:35729 0.0.0.0:35729; font-src 'self'; img-src 'self'; style-src 'self'; media-src 'self'; connect-src http://localhost:8000 ws://localhost:35729 ws://0.0.0.0:35729 http://0.0.0.0:4200/csp-report; report-uri http://0.0.0.0:4200/csp-report;",
"blocked-uri":"http://localhost:4200/myapp",
"source-file":"http://localhost:4200/assets/vendor.js",
"line-number":9827,
"column-number":10,
"status-code":200
}
}
I believe you need to add multiple hosts, one for port: 8000 and port: 4200

Violating Content Security Policy directive after ember-cli 0.0.47 upgrade

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