Rifiutato di caricare il carattere "data: font / woff ..." viola la seguente direttiva sui criteri di sicurezza dei contenuti: "default-src 'self'". Nota che "font-src"

La mia webApp di reazione fornisce questo errore nella console del 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.

Anche:

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.

Screenshot della console del browser

index.html Avere questo meta:

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

Per me è stato a causa dell'estensione di Chrome "Grammarly". Dopo averlo disabilitato, non ho ricevuto l'errore.

Per correggere questo errore specifico, CSP dovrebbe includere questo:

font-src 'self' data:;

Quindi, il meta index.html dovrebbe leggere:

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

Per quello che vale, ho avuto un problema simile, supponendo che sia correlato a un aggiornamento di Chrome.

Ho dovuto aggiungere font-src e quindi specificare l'URL perché stavo usando un CDN

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

Per esperienza personale, è sempre il primo passo migliore eseguire il tuo sito in Incognito (Chrome), Navigazione privata (Firefox) e InPrivate (IE11 e & Edge) per rimuovere l'interferenza di componenti aggiuntivi / estensioni. Questi possono ancora interferire con il test in questa modalità se sono abilitati esplicitamente nelle loro impostazioni. Tuttavia, è un semplice primo passo per la risoluzione di un problema.

Il motivo per cui sono qui era dovuto al fatto che Web of Trust (WoT) aggiungeva contenuti alla mia pagina e la mia pagina aveva una politica di sicurezza dei contenuti molto rigida:

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

Ciò ha causato molti errori. Stavo cercando più una risposta su come dire all'estensione di non provare a funzionare su questo sito in modo programmatico. In questo modo, quando le persone hanno estensioni, semplicemente non verranno eseguite sul mio sito. Immagino che se ciò fosse possibile, i blocchi degli annunci sarebbero stati vietati sui siti molto tempo fa. Quindi la mia ricerca è un po 'ingenua. Spero che questo aiuti chiunque altro cerchi di diagnosticare un problema che non è specificamente legato alla manciata di estensioni menzionate in altre risposte.

Potrebbe essere necessario aggiungerlo a webpack.config.js:

devServer: {

        historyApiFallback: true
    }
};

Oggi stavo anche affrontando lo stesso errore nella mia applicazione del nodo.

Di seguito c'era la mia API del nodo.

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

La correzione è stata molto semplice, mi mancava una barra "/" prima della mia API. Quindi, dopo aver modificato il percorso da "azureTable" a "/ azureTable", il problema è stato risolto.

CSP ti aiuta a inserire nella whitelist le fonti di cui ti fidi. A tutte le altre fonti non è consentito l'accesso. Leggi attentamente queste domande e risposte, quindi assicurati di inserire nella whitelist i caratteri, le connessioni socket e altre fonti se ti fidi di loro .

Se sai cosa stai facendo, puoi commentare il metatag per testarlo, probabilmente tutto funziona. Ma renditi conto che tu / il tuo utente siete protetti qui, quindi mantenere il metatag è probabilmente una buona cosa.

Ho avuto un problema simile. Avevo menzionato un percorso della cartella di output errato in angular.json

"outputPath": "dist/",

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

Stavo affrontando un problema simile.

1. È necessario rimuovere tutti i parametri CSP che vengono raccolti per impostazione predefinita e capire perché ogni attributo è richiesto.

font-src - serve a dire al browser di caricare il font da src che viene specificato dopo. font-src: 'self' - questo dice di caricare la famiglia di caratteri all'interno della stessa origine o sistema. font-src: 'self' data: - questo dice di caricare font-family all'interno della stessa origine e le chiamate effettuate per ottenere i dati:

Potresti anche ricevere l'avviso "** Impossibile decodificare il carattere scaricato, errore di analisi OTS: tag di versione non valido **" Aggiungi la seguente voce in CSP.

font-src: carattere "self"

Questo dovrebbe ora caricarsi senza errori.

Avresti usato stili in linea in molti posti, cosa che CSP (Content Security Policy) proibisce perché potrebbe essere pericoloso.

Prova a rimuovere quegli stili in linea e inseriscili nel foglio di stile dedicato.

Ho avuto lo stesso problema e che è stato risolto utilizzando ./prima del nome della directory nella mia node.jsapp, ad es

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

Per me è stato a causa dell'estensione ipfs nel browser coraggioso

L'impostazione dell'estensione del browser di uBlock "Blocca caratteri remoti" causerà questo errore. (Nota: la grammatica non era il problema, almeno per me.)

Di solito questo non è un problema. Quando un font remoto viene bloccato, si torna a un altro font e viene emesso un avviso della console che dice "ERR_BLOCKED_BY_CLIENT". Tuttavia, questo può essere un problema serio quando un sito utilizza Font Awesome, perché le icone vengono visualizzate come caselle.

Non c'è molto che un sito web possa fare per risolvere questo problema (ma puoi evitare che sia troppo brutto, ad esempio etichettando le icone basate sui caratteri). La modifica del CSP (o l'aggiunta di uno) non lo risolverà. Anche la pubblicazione dei caratteri dal tuo sito Web (e non da un CDN) non risolverà il problema.

L'utente uBlock, d'altra parte, ha il potere di risolvere questo problema effettuando una delle seguenti operazioni:

• Deseleziona l'opzione globalmente nella dashboard per l'estensione
• Vai al tuo sito web e fai clic sull'icona dell'estensione, quindi sull'icona "A" barrata per non bloccare i caratteri solo per quel sito
• Disattiva uBlock per il tuo sito aggiungendolo alla whitelist nella dashboard dell'estensione

Se il tuo progetto è vue-cli e corri npm run builddovresti cambiare

assetsPublicPath: '/' per assetsPublicPath'./'

Ho avuto lo stesso problema e si è scoperto che c'era un errore nella directory del file che stavo cercando di servire invece di:

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

Avevo :

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

Ho anche affrontato lo stesso problema oggi nel mio codice in esecuzione. Bene, ho trovato molte risposte qui. Ma la cosa importante che voglio menzionare è che questo messaggio di errore è abbastanza ambiguo e non indica esplicitamente l'errore esatto.

Alcuni lo hanno affrontato a causa delle estensioni del browser, altri a causa di pattern URL errati e io l'ho dovuto affrontare a causa di un errore nella mia istanza formGroup utilizzata in un popup in quella schermata. Quindi, suggerirei a tutti che prima di apportare nuove modifiche al codice, eseguire il debug del codice e verificare di non avere tali errori. Troverai sicuramente il motivo effettivo eseguendo il debug.

Se nient'altro funziona, controlla il tuo URL poiché questo è il motivo più comune di questo problema.

Nel mio progetto laravel e VueJS ho risolto questo errore con il file webpack.mix.js. Contiene

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

Ecco una parte del codice che utilizzo per indirizzare il mio file server.js alla cartella angular dist , che è stata creata dopo la compilazione di npm

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

L'ho risolto passando "/dist/"a"./dist/"

Nel mio caso, ho eliminato il file src / registerServiceWorker dall'app generata da create-react-app. L'ho aggiunto e ora funziona tutto.