Recusou-se a carregar a fonte 'data: font / woff…', ela viola a seguinte diretiva da Política de Segurança de Conteúdo: “default-src 'self'”. Observe que 'font-src'

Minha reação webApp dá este erro no console do navegador

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.

Além disso:

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.

Captura de tela do console do navegador

index.html Tenha este 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,
    }
};

Para mim, foi por causa da extensão do Chrome 'Grammarly'. Depois de desabilitar isso, não recebi o erro.

Para corrigir esse erro específico, o CSP deve incluir:

font-src 'self' data:;

Portanto, index.html meta deve ser:

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

Pelo que vale a pena - eu tive um problema semelhante, supondo que seja relacionado a uma atualização do Chrome.

Tive que adicionar font-src e, em seguida, especificar o url porque estava usando um CDN

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

Por experiência pessoal, é sempre o melhor e primeiro passo executar seu site no Incognito (Chrome), Private Browsing (Firefox) e InPrivate (IE11 && Edge) para remover a interferência de add-ons / extensões. Eles ainda podem interferir no teste neste modo se estiverem ativados explicitamente em suas configurações. No entanto, é uma primeira etapa fácil para solucionar um problema.

Estou aqui porque Web of Trust (WoT) adicionou conteúdo à minha página, e minha página tinha uma política de segurança de conteúdo muito rígida:

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

Isso causou muitos erros. Eu estava procurando uma resposta sobre como dizer à extensão para não tentar executar neste site programaticamente. Dessa forma, quando as pessoas têm extensões, elas simplesmente não funcionam no meu site. Imagino que, se isso fosse possível, os bloqueadores de anúncios teriam sido proibidos nos sites há muito tempo. Portanto, minha pesquisa é um pouco ingênua. Espero que isso ajude alguém a tentar diagnosticar um problema que não está especificamente relacionado com o punhado de extensões mencionadas em outras respostas.

Pode ser necessário adicionar isto a webpack.config.js:

devServer: {

        historyApiFallback: true
    }
};

Eu também estava enfrentando o mesmo erro em meu aplicativo de nó hoje.

Abaixo estava minha API de nó.

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

A correção foi muito simples, faltava uma barra "/" antes da minha API. Portanto, depois de alterar o caminho de 'azureTable' para '/ azureTable', o problema foi resolvido.

O CSP ajuda a colocar na lista de permissões fontes em que você confia. Todas as outras fontes não têm acesso permitido. Leia estas perguntas e respostas com atenção e certifique-se de colocar as fontes, conexões de soquete e outras fontes na lista de permissões, se você confiar nelas .

Se você sabe o que está fazendo, pode comentar a metatag para testar, provavelmente tudo funciona. Mas perceba que você / seu usuário está sendo protegido aqui, então manter a metatag provavelmente é uma boa coisa.

Eu tive uma questão semelhante. Eu mencionei um caminho de pasta de saída errado no angular.json

"outputPath": "dist/",

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

Eu estava enfrentando um problema semelhante.

1. Você precisa remover todos os parâmetros CSP que são selecionados por padrão e entender por que cada atributo é necessário.

font-src - é para dizer ao navegador para carregar a fonte do src que é especificado depois disso. font-src: 'self' - diz para carregar a família de fontes dentro da mesma origem ou sistema. font-src: 'self' data: - isto diz para carregar font-family dentro da mesma origem e as chamadas feitas para obter dados:

Você também pode receber o aviso "** Falha ao decodificar a fonte baixada, erro de análise OTS: tag de versão inválida **" Adicione a seguinte entrada no CSP.

font-src: fonte 'self'

Isso agora deve carregar sem erros.

Você teria usado estilos embutidos em muitos lugares, o que a CSP (Política de Segurança de Conteúdo) proíbe porque pode ser perigoso.

Tente remover esses estilos embutidos e colocá-los dentro de uma folha de estilo dedicada.

Eu tive o mesmo problema e foi resolvido usando ./antes do nome do diretório no meu node.jsaplicativo, ou seja,

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

Para mim, foi por causa da extensão ipfs no navegador bravo

A configuração “Bloquear fontes remotas” da extensão do navegador uBlock causará esse erro. (Observação: gramática não era o problema, pelo menos para mim.)

Normalmente, isso não é um problema. Quando uma fonte remota é bloqueada, você volta para alguma outra fonte e um aviso do console dizendo “ERR_BLOCKED_BY_CLIENT” é emitido. No entanto, isso pode ser um problema sério quando um site usa Font Awesome, porque os ícones aparecem como caixas.

Não há muito que um site possa fazer para consertar isso (mas você pode evitar que seja muito ruim, por exemplo, rotulando ícones baseados em fonte). Alterar o CSP (ou adicionar um) não vai resolver isso. Servir as fontes do seu site (e não de um CDN) também não resolverá o problema.

O usuário uBlock, por outro lado, tem o poder de corrigir isso fazendo uma das seguintes opções:

• Desmarque a opção globalmente no painel para a extensão
• Navegue até seu site e clique no ícone da extensão e, em seguida, no ícone riscado "A" para não bloquear as fontes apenas para esse site
• Desative o uBlock para o seu site adicionando-o à lista de permissões no painel da extensão

Se o seu projeto é vue-cli e você executa, npm run buildvocê deve mudar

assetsPublicPath: '/' para assetsPublicPath'./'

Tive o mesmo problema e ocorreu um erro no diretório do arquivo que estava tentando servir em vez de:

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

Eu tinha :

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

Eu também enfrentei o mesmo problema hoje em meu código em execução. Bem, encontrei muitas respostas aqui. Mas o importante que quero mencionar é que essa mensagem de erro é bastante ambígua e não aponta explicitamente o erro exato.

Alguns enfrentaram devido a extensões do navegador, alguns devido a padrões de URL incorretos e eu enfrentei isso devido a um erro na minha instância de formGroup usada em um pop-up naquela tela. Portanto, eu sugeriria a todos que, antes de fazer qualquer nova alteração em seu código, depure-o e verifique se não há esses erros. Você certamente encontrará o motivo real depurando.

Se nada mais funcionar, verifique seu URL, pois esse é o motivo mais comum para esse problema.

No meu projeto laravel & VueJS resolvi este erro com o arquivo webpack.mix.js. Contém

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

Aqui está uma parte do código que uso para direcionar meu arquivo server.js para a pasta angular dist , que foi criada após a construção do npm

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

Consertei mudando "/dist/"para"./dist/"

No meu caso, excluí o arquivo src / registerServiceWorker do aplicativo gerado pelo aplicativo create-react-app. Eu adicionei e agora está tudo funcionando.