B
B
BonBon Slick2020-01-13 15:37:17
Fonts
BonBon Slick, 2020-01-13 15:37:17

Font Awesome 5 CSP insecure font ''. This request has been blocked?

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("../webfonts/fa-solid-900.eot");
  src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

"dependencies": {
    "@fortawesome/fontawesome-free": "^5.5.0",

https://developer.mozilla.org/en/docs/Web/HTTP/CSP
contentSecurityPolicy:                'default-src https:;' +
                                        'font-src https: data:;',

Mixed Content: The page at 'https://henty.loc/gallery' was loaded over HTTPS, but requested an insecure font ''. This request has been blocked; the content must be served over HTTPS.

https://developer.mozilla.org/en-US/docs/Web/HTTP/...
'font-src \'unsafe-inline\' \'unsafe-eval\' \'unsafe-hashes\'  https: data: blob: mediastream: filesystem:;',

Fonts are installed locally as a dependency, they also load from node_modules, why does it give an error and how to fix it?
UPD. I found what is causing the error, webpack 4 css-loader modules.
loader:  'css-loader',
            options: {
              modules:        true,
              // localIdentName: '[path][name]__[local]--[hash:base64:12]',
              localIdentName: '[path][name]__[local]',
              sourceMap:      true,
            },

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question