ember-cli served via virtual box violates content

2019-06-20 18:25发布

问题:

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