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'"
};