拒绝加载字体“ data：font / woff…”，它违反了以下“内容安全策略”指令：“ default-src'self'”。请注意，“ font-src”

我的反应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：

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

对我而言，这是因为Chrome扩展名为“ Grammarly”。禁用该功能后，我没有收到该错误。

要解决此特定错误，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/">

对于它的价值-假设它与Chrome更新有关，我遇到了类似的问题。

我必须添加font-src，然后指定URL，因为我使用的是CDN

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

从个人经验来看，始终最好的第一步是在隐身（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';"

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

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

devServer: {

        historyApiFallback: true
    }
};

今天，我的节点应用程序中也遇到了相同的错误。

下面是我的节点API。

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

修复非常简单，我在API之前缺少斜杠“ /”。因此，将路径从“ azureTable”更改为“ / azureTable”后，此问题已解决。

CSP可帮助您将信任的资源列入白名单。不允许所有其他来源访问。仔细阅读此问答，然后确保将字体，套接字连接和其他来源（如果您信任）列入白名单。

如果您知道自己在做什么，则可以注释掉meta标记以进行测试，可能一切正常。但是请注意，您/您的用户在这里受到保护，因此保留meta标签可能是一件好事。

我有一个类似的问题。我在angular.json中提到了错误的输出文件夹路径

"outputPath": "dist/",

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

我面临着类似的问题。

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

font-src-告诉浏览器从其后指定的src加载字体。font-src：'self'-这告诉您在相同的来源或系统中加载字体系列。font-src：“自我”数据：-告诉加载源相同来源的font-family以及为获取数据而进行的调用：

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

font-src：'自我'字体

现在应该没有错误加载。

您可能会在很多地方使用内联样式，CSP（内容安全策略）禁止使用内联样式，因为这样做可能很危险。

只需尝试删除那些内联样式，然后将其放入专用样式表即可。

我遇到了同样的问题，并且通过./在node.js应用程序中使用目录名称之前的方式解决了该问题，即

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

对我来说是因为勇敢的浏览器中的ipfs扩展

浏览器扩展程序uBlock的设置“阻止远程字体”将导致此错误。（注意：语法不是问题，至少对我而言。）

通常这不是问题。阻止远程字体后，您将退回到其他字体，并发出控制台警告，提示“ ERR_BLOCKED_BY_CLIENT”。但是，当网站使用“真棒字体”时，这可能是一个严重的问题，因为图标显示为方框。

网站对此无能为力（但是您可以通过标记基于字体的图标来防止它变坏）。更改CSP（或添加一个）不会解决它。从您的网站（而不是CDN）提供字体也无法修复该问题。

另一方面，uBlock用户可以通过执行以下任一操作来解决此问题：

• 取消选中信息中心中的扩展选项
• 导航到您的网站，然后单击扩展程序图标，然后单击划掉的“ A”图标，以仅阻止该网站的字体
• 将您的网站添加到扩展程序信息中心的白名单中，以禁用您的网站的uBlock

如果您的项目是vue-cli并且运行npm run build，则应更改

assetsPublicPath: '/' 至 assetsPublicPath'./'

我遇到了同样的问题，结果是我尝试提供的文件目录而不是错误：

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

我有：

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

今天，我在运行代码中也遇到了同样的问题。好吧，我在这里找到了很多答案。但是，我要提到的重要一点是，此错误消息非常含糊，并且没有明确指出确切的错误。

有些人由于浏览器扩展而遇到了这种情况，有些人由于URL模式不正确而遇到了这种情况，而由于该屏幕的弹出窗口中使用的formGroup实例中的错误，我遇到了这个问题。因此，我建议大家在对代码进行任何新更改之前，请调试您的代码并确认您没有任何此类错误。您肯定会通过调试找到实际原因。

如果没有其他效果，请检查您的URL，因为这是此问题的最常见原因。

在我的laravel＆VueJS项目中，我使用webpack.mix.js文件解决了此错误。它包含了

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

这是我用来将server.js文件定向到angular dist文件夹的代码的一部分，该文件夹是在npm build之后创建的

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

我通过更改 "/dist/"为"./dist/"

就我而言，我从create-react-app生成的应用程序中删除了src / registerServiceWorker文件。我添加了它，现在一切正常。