"[Report Only] Refused to load the font..." error message on console

Question

More specifically:

[Report Only] Refused to load the font 'data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAABBQAAoAAAAAG…H8zVsjnmMx0GcZ2HGViNOySWEa9fvEQtW43Nm+EOO0ZIpdLbMXoVzPJkcfHT6U+gLEpz/MAAAA' because it violates the following Content Security Policy directive: "font-src 'self'".

this is my contentSecurityPolicy object at environment.js:

contentSecurityPolicy: {
  'default-src': "'none'",
  'script-src': "'self' 'unsafe-inline' 'unsafe-eval' connect.facebook.net",
  'connect-src': "'self'",
  'img-src': "'self' www.facebook.com",
  'style-src': "'self' 'unsafe-inline'",
  'frame-src': "s-static.ak.facebook.com static.ak.facebook.com www.facebook.com",
  'report-uri': "http://localhost:4200"
},

Is there anything wrong?

Answer 1

Add 'font-src': "data:", to whitelist the font being loaded.

Answer 2

I have been spending quite some time trying to figure out why the built version of my polymer code was violating my CSP in firefox and safari (works in chrome) and it turns out as polymer components contain inline scripts they can cause CSP issues that are not resolved using 'unsafe-inline' & 'unsafe-eval' headers for firefox and safari, however if for your script CSP you include data: this will allow the inline scripts that are compiled during the polymer build to run on your web app without violating the CSP. Thought I would share here as this answer helped me resolve my issue.