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


Refused to load the font 'data:font/woff…'it violates the following Content Security Policy directive: “default-src 'self'”. Note that 'font-src'

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

1
2
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.

也：

1
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.

浏览器控制台的屏幕截图
enter image description here

index.html具有此meta：

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

WebPack.cofig.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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应包括以下内容：

1
font-src 'self' data:;

因此，index.html meta应该显示为：

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

1
<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)向我的页面添加了内容，并且我的页面具有非常严格的内容安全策略：

1
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：

1
2
3
4
5
devServer: {

        historyApiFallback: true
    }
};
相关讨论

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

enter image description here

下面是我的节点API。

1
2
3
4
5
6
7
8
9
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"后，此问题已解决。

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

1
2
3
4
5
"outputPath":"dist/",

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

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

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

相关讨论

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

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

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

我遇到了同样的问题，结果是我尝试提供服务的文件目录中存在错误
代替：

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

我有：

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

我面临着类似的问题。

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

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

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

    font-src：'自我'字体

    现在应该没有错误地加载。

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

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

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

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

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

    assetsPublicPath: '/'至assetsPublicPath'./'

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