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


109

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

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

Можете ли вы попробовать <meta http-Equiv = "Content-Security-Policy" content = "img-src 'self' data :; default-src 'self' XX.XX.XX.XX: 8084 / mypp ">
датский

ничего не изменить `<meta http-Equiv =" Content-Security-Policy "content =" img-src 'self' data :; default-src 'self' 121.0.0: 3000 ">; `still give Error
JavaScript Learner

Ответы:


261

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


11
Что за глупый взлом. даже представить себе не могу, что проблема связана с приложением Grammarly chrome.
Pardeep Jain

4
Не могу поверить, что я потратил пару часов, пытаясь понять, что происходит, и это было вызвано приложением Grammarly. Просто удали эту ташу!
Андре Евангелиста

3
Dangit, Grammarly! Два других разработчика помогали мне с этой проблемой, но без решения. Мы думали, что неправильно реализовали нашу политику безопасности контента. Удалено мое расширение Grammarly из Chrome, и ошибки исчезли. Спасибо или этот совет!
amlane86

6
Примечание: недостаточно только "отключить" в раскрывающемся списке конфигурации плагина, вы должны удалить или отключить его на страницах плагинов Chrome
Хуан Бискайя

2
Та же проблема с моим приложением Angular. Это исправило это прямо сейчас!
Stack

56

Чтобы исправить эту конкретную ошибку, 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/">

1
Спасибо, это тоже решает проблему. Учтите, что для некоторых пользователей отключение расширения нецелесообразно, и ваш сайт позволит избежать проблем с любым возможным расширением, загружающим ресурсы локально :)
JuanDMeGon 02

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

Обязательно ли это указывать http://121.0.0:3000/при использовании self?
Саураб Тивари,

20

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

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

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

1
но я использовал шрифты с моего локального компьютера, так что я буду писать заяц ?? data: fonts.gstatic.com
JavaScript Learner

5
@JavaScriptLearner - в этом случае вы можете просто попробовать данные:
IonicBurger

13

По личному опыту, лучший первый шаг - запустить ваш сайт в режиме инкогнито (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';"

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



3

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

введите описание изображения здесь

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


2

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

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


1
Спасибо за хороший ответ, но все же я могу решить Refused to load the font 'data:font/woff;base64,d09эту ошибку
JavaScript Learner

1
Но эта мета решает максимальную ошибку:<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; frame-src *;"
JavaScript Learner

2

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

"outputPath": "dist/",

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

2

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

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

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

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

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

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


1

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

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


1

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

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



1

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

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

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

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

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

0

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

assetsPublicPath: '/' к assetsPublicPath'./'


0

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

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

Я имел :

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


0

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

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

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


0

В моем проекте 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');

0

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

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

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


-1

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.