"[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?

The message contradicts your policy if I'm not mistaken. You didn't specify a font-src which means the value should have taken the value of default-src ('none' in this case) — oreoshake, Oct 26 '14 at 16:09

score 38 · Accepted Answer · edited Oct 02 '16 at 03:57

38

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

edited Oct 02 '16 at 03:57

pulzarraider

2,297
19
26

answered Oct 26 '14 at 16:08

oreoshake

4,712
1
31
38

9

I've used `'font-src': "'self' data:"` and it worked fine, thanks – Gustavo Siqueira Nov 19 '14 at 19:07
3

`font-src 'self' data: https://fonts.gstatic.com https://fonts.googleapis.com/;` I modified your hint and now it works for me. – Nickname Apr 20 '17 at 09:39
e.g. playframework: contentSecurityPolicy = ${play.filters.headers.contentSecurityPolicy}" font-src 'self' data: fonts.gstatic.com fonts.googleapis.com cdnjs.cloudflare.com;" – Oleksandr Petrenko May 18 '17 at 16:16

score 1 · Answer 2 · answered Apr 10 '17 at 14:08

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.

score 0 · Answer 3 · answered Jun 07 '19 at 15:16

You may want to consider using coma ',' to delimit your exceptions:

This is the example posted on the website: https://github.com/helmetjs/csp

const csp = require('helmet-csp')

app.use(csp({
  // Specify directives as normal.
  directives: {
    defaultSrc: ["'self'", 'default.com'],
    scriptSrc: ["'self'", "'unsafe-inline'"],
    styleSrc: ['style.com'],
    fontSrc: ["'self'", 'fonts.com'],
    imgSrc: ['img.com', 'data:'],
    sandbox: ['allow-forms', 'allow-scripts'],
    reportUri: '/report-violation',
    objectSrc: ["'none'"],
    upgradeInsecureRequests: true,
    workerSrc: false  // This is not set.
  },

  // This module will detect common mistakes in your directives and throw errors
  // if it finds any. To disable this, enable "loose mode".
  loose: false,

  // Set to true if you only want browsers to report errors, not block them.
  // You may also set this to a function(req, res) in order to decide dynamically
  // whether to use reportOnly mode, e.g., to allow for a dynamic kill switch.
  reportOnly: false,

  // Set to true if you want to blindly set all headers: Content-Security-Policy,
  // X-WebKit-CSP, and X-Content-Security-Policy.
  setAllHeaders: false,

  // Set to true if you want to disable CSP on Android where it can be buggy.
  disableAndroid: false,

  // Set to false if you want to completely disable any user-agent sniffing.
  // This may make the headers less compatible but it will be much faster.
  // This defaults to `true`.
  browserSniff: true
}))

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

3 Answers3

Linked