“[Report Only] Refused to load the font…” error message on console

问题

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?

回答1:

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

回答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.

回答3:

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
}))

来源：https://stackoverflow.com/questions/26572418/report-only-refused-to-load-the-font-error-message-on-console

标签

javascript

ember.js

ember-cli

content-security-policy