Menolak untuk memuat font 'data: font / woff…' itu melanggar petunjuk Kebijakan Keamanan Konten berikut: "default-src 'self'". Perhatikan bahwa 'font-src'

WebApp bereaksi saya memberikan Kesalahan ini di Konsol Browser

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.

Juga:

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.

Tangkapan layar dari konsol browser

index.html Punya meta ini :

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

Bagi saya itu karena ekstensi Chrome 'Grammarly'. Setelah menonaktifkan itu, saya tidak mendapatkan kesalahan.

Untuk memperbaiki kesalahan khusus ini, CSP harus menyertakan ini:

font-src 'self' data:;

Jadi, meta index.html harus membaca:

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

Untuk apa nilainya - Saya memiliki masalah serupa, dengan asumsi itu terkait dengan pembaruan Chrome.

Saya harus menambahkan font-src, lalu menentukan url karena saya menggunakan CDN

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

Dari pengalaman pribadi, itu selalu merupakan langkah pertama yang terbaik untuk menjalankan situs Anda di Incognito (Chrome), Penjelajahan Pribadi (Firefox), dan InPrivate (IE11 && Edge) untuk menghilangkan gangguan add-on / ekstensi. Ini masih dapat mengganggu pengujian dalam mode ini jika diaktifkan secara eksplisit dalam pengaturannya. Namun, ini adalah langkah pertama yang mudah untuk memecahkan masalah.

Alasan saya di sini, adalah karena Web of Trust (WoT) menambahkan konten ke halaman saya, dan halaman saya memiliki Kebijakan Keamanan Konten yang sangat ketat:

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';"

Ini menyebabkan banyak kesalahan. Saya mencari lebih banyak jawaban tentang cara memberi tahu ekstensi untuk tidak mencoba dan menjalankan situs ini secara terprogram. Dengan cara ini, ketika orang memiliki ekstensi, mereka tidak akan berjalan di situs saya. Saya membayangkan jika ini mungkin, pemblokir iklan akan dilarang di situs sejak lama. Jadi penelitian saya agak naif. Semoga ini dapat membantu orang lain yang mencoba mendiagnosis masalah yang tidak secara khusus terkait dengan beberapa ekstensi yang disebutkan di jawaban lain.

Anda mungkin perlu menambahkan ini ke webpack.config.js:

devServer: {

        historyApiFallback: true
    }
};

Saya juga menghadapi kesalahan yang sama dalam aplikasi node saya hari ini.

Di bawah ini adalah API node saya.

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

Perbaikannya sangat sederhana, saya kehilangan garis miring "/" sebelum API saya. Jadi setelah mengubah jalur dari 'azureTable' menjadi '/ azureTable', masalah telah teratasi.

CSP membantu Anda memasukkan sumber yang Anda percayai ke dalam daftar putih. Semua sumber lain tidak diperbolehkan mengakses. Baca T&J ini dengan cermat, lalu pastikan Anda memasukkan font, koneksi soket, dan sumber lain ke daftar putih jika Anda mempercayainya .

Jika Anda tahu apa yang Anda lakukan, Anda dapat mengomentari metatag untuk menguji, mungkin semuanya berfungsi. Tetapi ketahuilah bahwa Anda / pengguna Anda dilindungi di sini, jadi menyimpan metatag mungkin adalah hal yang baik.

Saya memiliki masalah serupa. Saya telah menyebutkan jalur folder keluaran yang salah di angular.json

"outputPath": "dist/",

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

Saya menghadapi masalah serupa.

1. Anda perlu menghapus semua parameter CSP yang diambil secara default dan memahami mengapa setiap atribut diperlukan.

font-src - memberi tahu browser untuk memuat font dari src yang ditentukan setelah itu. font-src: 'self' - ini memberi tahu untuk memuat jenis font dalam sumber atau sistem yang sama. font-src: 'self' data: - ini memberitahu load font-family dalam origin yang sama dan panggilan yang dilakukan untuk mendapatkan data:

Anda mungkin juga mendapatkan peringatan "** Gagal mendekode font yang didownload, kesalahan penguraian OTS: tag versi tidak valid **" Tambahkan entri berikut di CSP.

font-src: font 'diri'

Ini sekarang harus memuat tanpa kesalahan.

Anda akan menggunakan gaya sebaris di banyak tempat, yang dilarang CSP (Kebijakan Keamanan Konten) karena bisa berbahaya.

Coba saja hapus gaya sebaris tersebut dan taruh di dalam lembar gaya khusus.

Saya memiliki masalah yang sama dan dapat diselesaikan dengan menggunakan ./sebelum nama direktori di node.jsaplikasi saya , yaitu

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

Bagi saya itu karena ekstensi ipfs di browser yang berani

Pengaturan uBlock ekstensi browser "Blokir font jarak jauh" akan menyebabkan kesalahan ini. (Catatan: Grammarly bukanlah masalahnya, setidaknya bagi saya.)

Biasanya ini bukan masalah. Saat font jarak jauh diblokir, Anda kembali ke font lain dan peringatan konsol yang mengatakan "ERR_BLOCKED_BY_CLIENT" dikeluarkan. Namun, ini bisa menjadi masalah serius jika situs menggunakan Font Awesome, karena ikonnya ditampilkan sebagai kotak.

Tidak banyak yang dapat dilakukan situs web untuk memperbaikinya (tetapi Anda dapat mencegahnya menjadi terlalu buruk dengan misalnya memberi label ikon berbasis font). Mengubah CSP (atau menambahkan satu) tidak akan memperbaikinya. Melayani font dari situs Anda (dan bukan CDN) juga tidak akan memperbaikinya.

Di sisi lain, pengguna uBlock memiliki kekuatan untuk memperbaikinya dengan melakukan salah satu hal berikut:

• Hapus centang opsi secara global di dasbor untuk ekstensi
• Arahkan ke situs web Anda dan klik ikon ekstensi, lalu pada ikon 'A' yang dicoret untuk tidak memblokir font hanya untuk situs itu
• Nonaktifkan uBlock untuk situs Anda dengan menambahkannya ke daftar putih di dasbor ekstensi

Jika proyek Anda adalah vue-cli dan Anda jalankan npm run build Anda harus berubah

assetsPublicPath: '/' untuk assetsPublicPath'./'

Saya mengalami masalah yang sama dan ternyata ada kesalahan di direktori file yang saya coba sajikan, bukan:

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

Saya punya:

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

Saya juga menghadapi masalah yang sama hari ini di kode yang saya jalankan. Nah, saya menemukan banyak jawaban di sini. Tetapi hal penting yang ingin saya sampaikan adalah bahwa pesan kesalahan ini cukup ambigu dan tidak secara eksplisit menunjukkan kesalahan yang sebenarnya.

Beberapa menghadapinya karena ekstensi browser, beberapa karena pola URL yang salah dan saya menghadapi ini karena kesalahan dalam contoh formGroup saya yang digunakan dalam pop-up di layar itu. Jadi, saya akan menyarankan semua orang bahwa sebelum membuat perubahan baru pada kode Anda, harap debug kode Anda dan verifikasi bahwa Anda tidak memiliki kesalahan seperti itu. Anda pasti akan menemukan alasan sebenarnya dengan debugging.

Jika tidak ada yang berfungsi, periksa URL Anda karena itu adalah alasan paling umum untuk masalah ini.

Dalam proyek laravel & VueJS saya, saya menyelesaikan kesalahan ini dengan file webpack.mix.js. Itu mengandung

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');

Berikut adalah bagian dari kode yang saya gunakan untuk mengarahkan file server.js saya ke folder angular dist , yang dibuat setelah npm build

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

Saya memperbaikinya dengan mengubah "/dist/"ke"./dist/"

Dalam kasus saya, saya menghapus file src / registerServiceWorker dari aplikasi yang dihasilkan aplikasi create-react. Saya menambahkannya dan sekarang semuanya berfungsi.