Se negó a cargar la fuente 'data: font / woff ...' viola la siguiente directiva de Política de Seguridad de Contenido: “default-src 'self'”. Tenga en cuenta que 'font-src'

Mi reaccionar webApp da este error en la consola del 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.

También:

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 pantalla de la consola del navegador

index.html Tenga 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 mí fue por la extensión de Chrome 'Grammarly'. Después de deshabilitar eso, no recibí el error.

Para corregir este error específico, CSP debe incluir esto:

font-src 'self' data:;

Entonces, index.html meta debería leer:

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

Por lo que vale, tuve un problema similar, asumiendo que está relacionado con una actualización de Chrome.

Tuve que agregar font-src y luego especificar la URL porque estaba usando una CDN

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

Por experiencia personal, siempre es el mejor y el primer paso ejecutar su sitio en Incognito (Chrome), Navegación privada (Firefox) e InPrivate (IE11 && Edge) para eliminar la interferencia de complementos / extensiones. Estos aún pueden interferir con las pruebas en este modo si están habilitados explícitamente en su configuración. Sin embargo, es un primer paso sencillo para solucionar un problema.

La razón por la que estoy aquí se debe a que Web of Trust (WoT) agregó contenido a mi página, y mi página tenía una política de seguridad de contenido muy estricta:

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

Esto provocó muchos errores. Estaba buscando más una respuesta sobre cómo decirle a la extensión que no intente ejecutarse en este sitio mediante programación. De esta manera, cuando las personas tienen extensiones, simplemente no se ejecutarán en mi sitio. Me imagino que si esto fuera posible, los bloqueadores de anuncios se habrían prohibido en los sitios hace mucho tiempo. Entonces mi investigación es un poco ingenua. Espero que esto ayude a cualquier otra persona que intente diagnosticar un problema que no esté específicamente relacionado con el puñado de extensiones mencionadas en otras respuestas.

Es posible que deba agregar esto a webpack.config.js:

devServer: {

        historyApiFallback: true
    }
};

También enfrentaba el mismo error en mi aplicación de nodo hoy.

A continuación estaba mi API de 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 solución fue muy simple, me faltaba una barra diagonal "/" antes de mi API. Entonces, después de cambiar la ruta de 'azureTable' a '/ azureTable', el problema se resolvió.

CSP le ayuda a incluir en la lista blanca las fuentes en las que confía. No se permite el acceso a todas las demás fuentes. Lea estas preguntas y respuestas detenidamente y luego asegúrese de incluir en la lista blanca las fuentes, conexiones de socket y otras fuentes si confía en ellas .

Si sabe lo que está haciendo, puede comentar la metaetiqueta para probar, probablemente todo funcione. Pero tenga en cuenta que usted o su usuario están protegidos aquí, por lo que mantener la metaetiqueta probablemente sea algo bueno.

Tuve un problema similar. Había mencionado una ruta de carpeta de salida incorrecta en angular.json

"outputPath": "dist/",

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

Estaba enfrentando un problema similar.

1. Debe eliminar todos los parámetros de CSP que se recogen de forma predeterminada y comprender por qué se requiere cada atributo.

font-src - es decirle al navegador que cargue la fuente de src que se especifica después de eso. font-src: 'self': esto indica que se cargue la familia de fuentes dentro del mismo origen o sistema. font-src: 'self' data: - esto le dice a load font-family dentro del mismo origen y las llamadas realizadas para obtener datos:

También puede recibir la advertencia "** No se pudo decodificar la fuente descargada, error de análisis OTS: etiqueta de versión no válida **" Agregue la siguiente entrada en CSP.

font-src: fuente 'self'

Esto debería cargarse ahora sin errores.

Habría utilizado estilos en línea en muchos lugares, lo que la CSP (Política de seguridad de contenido) prohíbe porque podría ser peligroso.

Simplemente intente eliminar esos estilos en línea y colóquelos dentro de una hoja de estilo dedicada.

Tuve el mismo problema y se resolvió usando ./antes del nombre del directorio en mi node.jsaplicación, es decir

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

Para mí fue debido a la extensión ipfs en brave browser

La configuración de la extensión del navegador uBlock "Bloquear fuentes remotas" causará este error. (Nota: la gramática no era el problema, al menos para mí).

Por lo general, esto no es un problema. Cuando se bloquea una fuente remota, recurre a otra fuente y se emite una advertencia de consola que dice "ERR_BLOCKED_BY_CLIENT". Sin embargo, esto puede ser un problema serio cuando un sitio usa Font Awesome, porque los íconos se muestran como cuadros.

No hay mucho que un sitio web pueda hacer para solucionar este problema (pero puede evitar que sea demasiado malo, por ejemplo, etiquetando iconos basados ​​en fuentes). Cambiar el CSP (o agregar uno) no lo solucionará. Servir las fuentes de su sitio web (y no un CDN) tampoco lo solucionará.

El usuario de uBlock, por otro lado, tiene el poder de solucionar este problema mediante una de las siguientes acciones:

• Desmarque la opción globalmente en el tablero de la extensión.
• Navegue a su sitio web y haga clic en el ícono de la extensión, luego en el ícono 'A' tachado para no bloquear fuentes solo para ese sitio
• Deshabilite uBlock para su sitio agregándolo a la lista blanca en el tablero de la extensión

Si su proyecto es vue-cli y lo ejecuta npm run build, debe cambiar

assetsPublicPath: '/' a assetsPublicPath'./'

Tuve el mismo problema y resultó que había un error en el directorio del archivo que estaba tratando de servir en lugar de:

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

Yo tenía :

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

También enfrenté el mismo problema hoy en mi código de ejecución. Bueno, encontré muchas respuestas aquí. Pero lo importante que quiero mencionar es que este mensaje de error es bastante ambiguo y no señala explícitamente el error exacto.

Algunos lo enfrentaron debido a las extensiones del navegador, algunos debido a patrones de URL incorrectos y yo enfrenté esto debido a un error en mi instancia de formGroup utilizada en una ventana emergente en esa pantalla. Por lo tanto, les sugiero a todos que, antes de realizar cualquier cambio nuevo en su código, depure su código y verifique que no tiene ninguno de esos errores. Seguramente encontrará la razón real depurando.

Si nada más funciona, verifique su URL, ya que esa es la razón más común para este problema.

En mi proyecto laravel & VueJS resolví este error con el archivo 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');

Aquí hay una parte del código que uso para dirigir mi archivo server.js a la carpeta angular dist , que se creó después de la compilación de npm

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

Lo arreglé cambiando "/dist/"a"./dist/"

En mi caso, eliminé el archivo src / registerServiceWorker de la aplicación generada create-react-app. Lo agregué y ahora todo está funcionando.