Javascript &引用；[仅报告]拒绝加载字体…”；控制台上的错误消息

更具体地说：

[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'".

这是我的

contentSecurityPolicy

对象，位于

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"
},

---

有什么问题吗？

添加

'font-src'：“data:”，

以白名单形式列出正在加载的字体。

我花了很长时间试图弄清楚为什么我的聚合代码的构建版本违反了我在firefox和safari中的CSP（在chrome中工作）事实证明，由于聚合物组件包含内联脚本，它们可能会导致CSP问题，而这些问题无法使用firefox和safari的“不安全内联”和“不安全评估”头解决，但是，如果您的脚本CSP包含

数据：

，这将允许在聚合构建期间编译的内联脚本在您的web应用程序上运行，而不会违反CSP。我想在这里分享这个答案有助于我解决我的问题。

< P>你可以考虑用昏迷“，”来划定你的例外：

以下是网站上发布的示例：

---

如果我没弄错的话，这个消息与你的政策相矛盾。您没有指定字体src，这意味着该值应该采用默认src的值（在本例中为“无”）。我使用了

'font-src'：“'self'数据：”

，效果很好，谢谢

font-src'self'数据：https://fonts.gstatic.com https://fonts.googleapis.com/;我修改了你的提示，现在它对我有效。playframework:contentSecurityPolicy=${play.filters.headers.contentSecurityPolicy}“字体src'self'数据：fonts.gstatic.com fonts.googleapis.com cdnjs.cloudflare.com；”
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
}))