Отказавшись от загрузки данных шрифта: font/woff....., он нарушает следующую директиву политики безопасности контента: "default-src" self ". Обратите внимание, что 'font-src'

Моя реакция webApp дает эту ошибку в браузере

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.

Снимок экрана консоли браузера enter image description here

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

Ответ 1

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

Ответ 2

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

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

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

Ответ 3

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

font-src 'self' data:;

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

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

Ответ 4

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

Причина, по которой я здесь, была связана с тем, что Web 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';"

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

Ответ 5

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

"outputPath": "dist/",

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

Ответ 6

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

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

Ответ 7

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

enter image description here

Ниже был мой 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" проблема была решена.

Ответ 8

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

devServer: {

        historyApiFallback: true
    }
};

Ответ 9

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

assetsPublicPath: '/' для assetsPublicPath'./'

Ответ 10

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

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

Ответ 11

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

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

Ответ 12

Я столкнулся с подобной проблемой.

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

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

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

font-src: 'self' font

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

Ответ 13

Да, 100% отключают расширение грамматики и ошибки консоли сразу уходят.

Ответ 14

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

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

Ответ 15

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

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

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

Ответ 16

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