Відмовляється завантажувати шрифт "data: font / woff ...", він порушує таку директиву щодо політики безпеки вмісту: "self-src" self "". Зауважте, що "font-src"


108

Моя реакція 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,
    }
};

чи можете ви спробувати <meta http-equiv = "Content-Security-Policy" content = "img-src 'self" дані:; default-src' self ' XX.XX.XX.XX: 8084 / mypp ">
датська

нічого не змінюється `<meta http-equiv =" Content-Security-Policy "content =" img-src 'self' дані:; default-src 'self' 121.0.0: 3000 ">; `все-таки дайте помилку
JavaScript Learner

Відповіді:


261

Для мене це було через розширення Chrome "Grammarly". Відключивши це, я не отримав помилку.


11
Який дурний хакер для цього. Не можу навіть уявити, що проблема пов’язана з додатком Grammarly chrome.
Pardeep Jain

4
Я не можу повірити, що я провів пару годин, намагаючись усвідомити, що відбувається, і це було викликано додатком Grammarly. Просто зніміть цю тарілку!
Андре Евангеліста

3
Dangit, Grammarly! У мене були ще два розробники, які допомогли мені вирішити цю проблему, і вони не вирішили. Ми думали, що ми неправильно реалізували нашу політику безпеки вмісту. Видалено мій розширення Grammarly із Chrome, і помилки усунулися. Дякую чи цю пораду!
amlane86

6
Примітка: недостатньо лише "відключення" у спадному меню конфігурації плагінів, його потрібно видалити чи вимкнути на сторінках хромованих плагінів
Juan Biscaia

2
Те саме питання з моїм додатком Angular. Це все виправлено!
Stack згущеного

54

Щоб виправити цю конкретну помилку, ДСП повинен включати таке:

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

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

12

З особистого досвіду завжди найкращим є перший крок для запуску свого веб-сайту в режимі Incognito (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 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тег - це, мабуть, добре.


Дякую за хорошу відповідь, але все-таки я можу вирішити 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': - це повідомляє про завантаження сімейства шрифтів у межах одного походження та виклики, зроблені для отримання даних:

Можливо, ви також отримаєте попередження "** Не вдалося розшифрувати завантажений шрифт, помилка розбору OTS: недійсна тега версії **" Додати наступний запис у CSP.

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

Тепер він повинен завантажуватися без помилок.


1

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

Просто спробуйте видалити ці стилі вбудованого тексту та помістити їх у спеціальні таблиці стилів.


1

У мене була така ж проблема, яку я вирішив, використовуючи ./перед ім'ям каталогу в моєму node.jsдодатку, тобто

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



1

Налаштування uBlock розширення браузера "Блокувати віддалені шрифти" призведе до цієї помилки. (Примітка: принаймні для мене граматика не була проблемою.)

Зазвичай це не проблема. Коли віддалений шрифт заблокований, ви повертаєтесь до іншого шрифту і видається попередження консолі з повідомленням "ERR_BLOCKED_BY_CLIENT". Однак це може бути серйозною проблемою, коли сайт використовує шрифт Awesome, оскільки піктограми відображаються як поля.

Не дуже багато веб-сайту може зробити, щоб виправити це (але ви можете попередити його занадто погано, наприклад, позначивши піктограми на основі шрифту). Якщо змінити CSP (або додати його), це не виправить. Подання шрифтів з вашого веб-сайту (а не CDN) також не виправить це.

Користувач uBlock, з іншого боку, має право виправити це, зробивши одну з наступних дій:

  • Зніміть прапорець на панелі інформаційної панелі для розширення
  • Перейдіть на свій веб-сайт і натисніть на значок розширення, а потім на закреслену піктограму "A", щоб не блокувати шрифти лише для цього сайту
  • Вимкніть 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 до кутової папки dist , яка була створена після збирання npm

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

Я виправив це, змінивши "/dist/"на"./dist/"


-1

У моєму випадку я видалив файл src / registerServiceWorker з програми, створеної для створення-реагування. Я додав його і тепер це все працює.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.