"[Только отчет] Отказано, чтобы загрузить шрифт..." сообщение об ошибке на консоли

Ответ 1

Добавьте 'font-src': "data:", в белый список загружаемого шрифта.

Ответ 2

Я потратил довольно много времени на то, чтобы выяснить, почему встроенная версия моего полимерного кода нарушает мой CSP в firefox и safari (работает в хроме), и получается, что полимерные компоненты содержат встроенные скрипты, которые могут вызвать проблемы CSP которые не разрешены с использованием заголовков "небезопасно-встроенных" и "небезопасных-eval" для firefox и safari, однако если для вашего script CSP вы включаете data:, это позволит встроенным скриптам, которые скомпилированы во время сборки полимера на вашем веб-приложении, не нарушая CSP. Думал, что я поделюсь этим, так как этот ответ помог мне решить мою проблему.

Ответ 3

Вы можете рассмотреть возможность использования комы ',' для разграничения ваших исключений:

Это пример, размещенный на сайте: 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
}))