web-dev-qa-db-ja.com

「[レポートのみ]フォントの読み込みを拒否しました...」コンソールにエラーメッセージが表示されます

すなわち：

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

これはenvironment.jsにある私のcontentSecurityPolicyオブジェクトです：

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

どうかしましたか？

javascriptember.jsember-clicontent-security-policy
20
Gustavo Siqueira

追加 'font-src': "data:",ロードされているフォントをホワイトリストに登録します。

37
oreoshake

私はかなりの時間を費やして、ビルドされたバージョンのpolymerコードがfirefoxおよびsafari（chromeで動作）でCSPに違反していた理由を突き止めましたが、polymerコンポーネントにはインラインスクリプトが含まれているため、FirefoxとSafariの「unsafe-inline」および「unsafe-eval」ヘッダーを使用しても解決されないCSPの問題が発生する可能性がありますが、スクリプトCSPの場合はdata:これにより、polymerビルド中にコンパイルされるインラインスクリプトがCSPに違反せずにWebアプリで実行できるようになります。この回答が私の問題の解決に役立つため、ここで共有すると思います。

1
dwelby101

例外を区切るために、コマ '、'の使用を検討することをお勧めします。

これはウェブサイトに投稿された例です： 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
}))
0
Nelles