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：

<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

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

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

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

Answer 3

要解决此特定错误，CSP应包含以下内容：

font-src 'self' data:;

因此，index.html元数据应显示为：

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

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

浏览器扩展程序uBlock的设置“Block remote fonts”将导致此错误。（注意：语法问题并不是问题，至少对我来说是这样。）

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

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

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

取消选中信息中心中的扩展选项
导航到您的网站，然后点击扩展程序图标，然后点击crossed out ‘A’ icon，以仅阻止该网站的字体
通过将您的网站的uBlock添加到扩展程序信息中心的白名单中来禁用

Answer 6

我有类似的问题。我在angular.json

中提到了错误的输出文件夹路径

"outputPath": "dist/",

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

Answer 7

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

下面是我的节点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”后，此问题已解决。

Answer 8

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

devServer: {

        historyApiFallback: true
    }
};

Answer 9

这是我用来将server.js文件定向到有角 dist 文件夹的代码的一部分，该文件夹是在 npm构建

之后创建的

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

我通过更改来修复它 "/dist/"至"./dist/"

Answer 10

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

Answer 11

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

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

Answer 12

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

assetsPublicPath: '/'至assetsPublicPath'./'

Answer 13

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

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

Answer 14

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

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

Answer 15

我正面临类似的问题。

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

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

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

font-src：“自”字体

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

Answer 16

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

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

我有：

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

Answer 17

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

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

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

Answer 18

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

Answer 19

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

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

19 个答案: