javascript - create - webpack react

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

Question

Mi reacción 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 Tiene 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,
    }
};

Answer 1

CSP lo 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 cuidadosamente y luego asegúrese de incluir en la lista blanca las fuentes, las conexiones de socket y otras fuentes si confía en ellas .

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

Answer 2

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

Answer 3

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

devServer: {

        historyApiFallback: true
    }
};

Answer 4

Estaba enfrentando un problema similar.

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

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

También puede recibir la advertencia "** Error al 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 ahora debería cargar sin errores.

Answer 5

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

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

Answer 6

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

font-src ''self'' data:;

Entonces, el meta index.html 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/">

Answer 7

Para mí fue por la extensión de Chrome ''Grammarly''. Después de deshabilitar eso, no recibí el error.

Answer 8

Por experiencia personal, siempre es el mejor primer paso para ejecutar su sitio en incógnito (Chrome), navegación privada (Firefox) e InPrivate (IE11 && Edge) para eliminar la interferencia de complementos / extensiones. Estos todavía pueden interferir con las pruebas en este modo si están habilitados explícitamente en su configuración. Sin embargo, es un primer paso fácil 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 que 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 causó muchos errores. Estaba buscando más una respuesta sobre cómo decirle a la extensión que no intente ejecutar 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 habrían sido prohibidos 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.

Answer 9

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

Tuve que agregar font-src y luego especificar la url porque estaba usando un CDN

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

Answer 10

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

assetsPublicPath: ''/'' a assetsPublicPath''./''

Answer 11

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 lo enfrenté debido a un error en mi instancia de formGroup utilizada en una ventana emergente en esa pantalla. Por lo tanto, sugeriría a todos que antes de realizar nuevos cambios en su código, depúrelo y verifique que no tenga tales errores. Seguramente encontrará la razón real mediante la depuración.

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

Answer 12

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

Debajo 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 "/" antes de mi API. Entonces, después de cambiar la ruta de ''azureTable'' a ''/ azureTable'', el problema se resolvió.

Answer 13

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

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

Answer 14

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

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

Tuve :

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

Answer 15

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