拒绝加载字体'data:font/woff .....'它违反了以下内容安全策略指令:"default-src'self'".请注意'font-src'

Question

我的反应webApp在浏览器控制台中提供此错误

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.

也:

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.

浏览器控制台截图

index.html有这个元:

<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

对我来说,这是因为Chrome扩展"Grammarly".禁用后,我没有收到错误.

Answer 2

要修复此特定错误,CSP应包含以下内容:

font-src 'self' data:;

所以,index.html meta应该是:

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

Answer 3

对于它的价值 - 我有一个类似的问题,假设它与Chrome更新有关.

我不得不添加font-src,然后指定url,因为我使用的是CDN

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

Answer 4

从个人经验来看，始终最好的第一步是在隐身（Chrome），私有浏览（Firefox）和InPrivate（IE11 && Edge）中运行您的网站，以消除附加组件/扩展的干扰。如果在其设置中明确启用了它们，它们仍然会干扰此模式下的测试。但是，这是解决问题的第一步。

我之所以在这里，是因为Web of Trust（WoT）向我的页面添加了内容，并且我的页面具有非常严格的内容安全策略：

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

这导致了许多错误。我一直在寻找有关如何告诉扩展程序不要以编程方式尝试在此站点上运行的答案。这样，当人们拥有扩展程序时，它们将不会在我的网站上运行。我想如果可能的话，很久以前就可以在网站上禁止广告拦截器。所以我的研究有点天真。希望这可以帮助其他尝试诊断与其他答案中提到的少数扩展没有特别联系的问题。

Answer 5

我面临着类似的问题。

1. 您需要删除默认选择的所有 CSP 参数，并了解为什么需要每个属性。

font-src - 告诉浏览器从之后指定的 src 加载字体。font-src: 'self' - 这告诉在同一来源或系统中加载字体系列。font-src: 'self' data: - 这告诉在同一源内加载 font-family 以及为获取数据而进行的调用：

您可能还会收到警告“** 无法解码下载的字体，OTS 解析错误：版本标记无效 **” 在 CSP 中添加以下条目。

font-src：'自身'字体

现在加载应该没有错误。

Answer 6

您可能需要将此添加到webpack.config.js：

devServer: {

        historyApiFallback: true
    }
};