Отказался от загрузки шрифта «data: font / woff…», он нарушает следующую директиву политики безопасности контента: «default-src 'self'». Обратите внимание, что 'font-src'

Мое реагирующее веб-приложение дает эту ошибку в консоли браузера

Refused to load the font 'data:font/woff;base64,d09........' because it` 
`violates the following Content Security Policy directive: "default-src` `'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

Также:

Refused to connect to 'ws://localhost:3000/sockjs-node/782/oawzy1fx/websocket' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Скриншот консоли браузера

index.html Есть эта мета:

<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self' http://121.0.0:3000/">

WebPack.cofig.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
    context: path.join(__dirname, "./src"),
    devtool: debug ? "inline-sourcemap" : true,
    entry: "../src/index.js",

    module: {
        rules: [
            {
                test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf)$/i,  // a regular expression that catches .js files
                exclude: /node_modules/,
                loader: 'url-loader',
            },
            {
                test: /\.(js|.jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react','es2016', 'stage-0',],
                    plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
                }
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                    }
                ]
            }
        ]
    },
    resolve: {
        modules: [
            path.join(__dirname, "src"),
            "node_modules",
        ]
    },
    output: {
        path: __dirname + "/public/",
        // publicPath: "/public/",
        filename: "build.js"
    },
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    ],
    devServer: {
        port: 3000, // most common port
        contentBase: './public',
        inline: true,
        historyApiFallback: true,
    }
};

Для меня это было из-за расширения Chrome Grammarly. После отключения я не получал ошибки.

Чтобы исправить эту конкретную ошибку, CSP должен включать следующее:

font-src 'self' data:;

Итак, мета index.html должна читать:

<meta http-equiv="Content-Security-Policy" content="font-src 'self' data:; img-src 'self' data:; default-src 'self' http://121.0.0:3000/">

Как бы то ни было, у меня была аналогичная проблема, если предположить, что это связано с обновлением Chrome.

Мне пришлось добавить font-src, а затем указать URL-адрес, потому что я использовал CDN

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data: fonts.gstatic.com;">

По личному опыту, лучший первый шаг - запустить ваш сайт в режиме инкогнито (Chrome), приватного просмотра (Firefox) и InPrivate (IE11 && Edge), чтобы устранить вмешательство надстроек / расширений. Они все еще могут мешать тестированию в этом режиме, если они явно включены в их настройках. Однако это простой первый шаг к устранению проблемы.

Причина, по которой я здесь, была связана с тем, что Web of Trust (WoT) добавляла контент на мою страницу, и моя страница имела очень строгую политику безопасности контента:

Header set Content-Security-Policy "default-src 'none'; font-src 'self' data:; style-src 'self' 'unsafe-inline' data:; img-src 'self' data:; script-src 'self' 'unsafe-inline'; connect-src 'self';"

Это вызвало множество ошибок. Я больше искал ответ о том, как запретить расширению запускать его программно. Таким образом, когда у людей есть расширения, они просто не будут работать на моем сайте. Думаю, если бы это было возможно, блокировщики рекламы на сайтах давно бы запретили. Так что мое исследование немного наивно. Надеюсь, это поможет любому, кто пытается диагностировать проблему, которая не связана конкретно с несколькими упомянутыми расширениями в других ответах.

Возможно, вам потребуется добавить это в webpack.config.js:

devServer: {

        historyApiFallback: true
    }
};

Сегодня я столкнулся с той же ошибкой в ​​своем приложении узла.

Ниже был мой API узла.

app.get('azureTable', (req, res) => {
  const tableSvc = azure.createTableService(config.azureTableAccountName, config.azureTableAccountKey);
  const query = new azure.TableQuery().top(1).where('PartitionKey eq ?', config.azureTablePartitionKey);
  tableSvc.queryEntities(config.azureTableName, query, null, (error, result, response) => {
    if (error) { return; }
    res.send(result);
    console.log(result)
  });
});

Исправить было очень просто, перед моим API не было косой черты «/». Поэтому после изменения пути с «azureTable» на «/ azureTable» проблема была решена.

CSP помогает занести в белый список источники, которым вы доверяете. Все остальные источники не имеют доступа. Внимательно прочтите эти вопросы и ответы , а затем убедитесь, что вы занесли в белый список шрифты, соединения сокетов и другие источники, если вы им доверяете .

Если вы знаете, что делаете, можете закомментировать metaтег для проверки, возможно, все работает. Но имейте в виду, что вы / ваш пользователь здесь защищены, поэтому сохранение metaтега, вероятно, является хорошим делом.

У меня была аналогичная проблема. Я упомянул неправильный путь к выходной папке в angular.json

"outputPath": "dist/",

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/index.html'));
});

Я столкнулся с аналогичной проблемой.

1. Вам нужно удалить все параметры CSP, которые выбираются по умолчанию, и понять, зачем нужен каждый атрибут.

font-src - указывает браузеру загрузить шрифт из src, указанного после этого. font-src: 'self' - указывает загружать семейство шрифтов в том же источнике или системе. font-src: 'self' data: - сообщает о загрузке семейства шрифтов из одного источника и о вызовах, сделанных для получения данных:

Вы также можете получить предупреждение «** Не удалось декодировать загруженный шрифт, ошибка анализа OTS: недопустимый тег версии **». Добавьте следующую запись в CSP.

font-src: шрифт 'self'

Теперь он должен загружаться без ошибок.

Вы бы использовали встроенные стили во многих местах, что запрещено CSP (Content Security Policy), потому что это может быть опасно.

Просто попробуйте удалить эти встроенные стили и поместить их в специальную таблицу стилей.

У меня была такая же проблема, и она была решена путем использования ./имени каталога в моем node.jsприложении, т.е.

app.use(express.static('./public'));

Для меня это было из-за расширения ipfs в браузере Brave

Настройка расширения браузера uBlock «Блокировать удаленные шрифты» вызовет эту ошибку. (Примечание: грамматика не была проблемой, по крайней мере, для меня.)

Обычно это не проблема. Когда удаленный шрифт заблокирован, вы переключаетесь на другой шрифт, и выдается предупреждение консоли «ERR_BLOCKED_BY_CLIENT». Однако это может стать серьезной проблемой, когда сайт использует Font Awesome, потому что значки отображаются в виде прямоугольников.

Веб-сайт мало что может сделать, чтобы исправить это (но вы можете предотвратить это, например, пометив значки на основе шрифтов). Изменение CSP (или добавление его) не исправит. Обслуживание шрифтов с вашего веб-сайта (а не CDN) тоже не исправит этого.

Пользователь uBlock, с другой стороны, может исправить это, выполнив одно из следующих действий:

• Снимите флажок глобально на панели инструментов для расширения
• Перейдите на свой веб-сайт и щелкните значок расширения, а затем перечеркнутый значок «А», чтобы не блокировать шрифты только для этого сайта.
• Отключите uBlock для своего сайта, добавив его в белый список на панели инструментов расширения.

Если ваш проект vue-cli и вы запускаете, npm run buildвам следует изменить

assetsPublicPath: '/' к assetsPublicPath'./'

У меня была такая же проблема, и оказалось, что в каталоге файла, который я пытался обслуживать, была ошибка, а не:

app.use(express.static(__dirname + '/../dist'));

Я имел :

app.use(express.static('./dist'));

Сегодня я столкнулся с той же проблемой в моем работающем коде. Что ж, я нашел здесь много ответов. Но важно отметить, что это сообщение об ошибке довольно неоднозначно и явно не указывает точную ошибку.

Некоторые столкнулись с этим из-за расширений браузера, некоторые из-за неправильных шаблонов URL, а я столкнулся с этим из-за ошибки в моем экземпляре formGroup, который использовался во всплывающем окне на этом экране. Итак, я бы посоветовал всем, прежде чем вносить какие-либо новые изменения в ваш код, отладить его и убедиться, что у вас нет таких ошибок. Вы обязательно найдете настоящую причину при отладке.

Если больше ничего не работает, проверьте свой URL-адрес, так как это наиболее частая причина этой проблемы.

В моем проекте laravel и VueJS я решил эту ошибку с помощью файла webpack.mix.js. Это содержит

const mix = require('laravel-mix');

mix.webpackConfig({
   devServer: {
     proxy: {
       '*': 'http://localhost:8000'
     }
   },
   resolve: {
     alias: {
       "@": path.resolve(
         __dirname,
         "resources/assets/js"
       )
     }
   }
 });

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

Вот часть кода, который я использую для направления моего файла server.js в папку angular dist , которая была создана после сборки npm.

// Create link to Angular build directory
var distDir = __dirname + "/dist/";
app.use(express.static(distDir));

Я исправил это, изменив "/dist/"на"./dist/"

В моем случае я удалил файл src / registerServiceWorker из созданного приложения create-response-app. Добавил и теперь все работает.