Ответ 1
Для меня это было из-за расширения Chrome "Grammarly". После этого я не получил ошибку.
Отказавшись от загрузки данных шрифта: 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.
Снимок экрана консоли браузера 
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,
}
};
Ответы
Ответ 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
Я также столкнулся с той же ошибкой в моем приложении узла сегодня.
Ниже был мой 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
Я столкнулся с подобной проблемой.
- Вам необходимо удалить все параметры 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 из приложения, созданного для создания приложения-приложения. Я добавил его, и теперь все работает.