フォント '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 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 http-equiv="Content-Security-Policy" content="font-src 'self' data:; img-src 'self' data:; default-src 'self' http://121.0.0:3000/">

それは価値がある-Chromeの更新に関連していると仮定して、同様の問題がありました。

CDNを使用していたため、font-srcを追加してから、URLを指定する必要がありました。

<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は、信頼できるソースをホワイトリストに登録するのに役立ちます。他のすべてのソースへのアクセスは許可されていません。このQ＆Aを注意深く読み、信頼できる場合は、フォント、ソケット接続、その他のソースをホワイトリストに登録してください。

何をしているのかわかっている場合は、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： 'self' data：-これは、同じ起点内のロードfont-familyと、データを取得するために行われた呼び出しを示します。

また、「**ダウンロードしたフォントのデコードに失敗し、OTS解析エラー：バージョンタグが無効です**」という警告が表示されることもあります。CSPに次のエントリを追加します。

font-src： 'self'フォント

これでエラーなしでロードされるはずです。

あなたは多くの場所でインラインスタイルを使用したでしょうが、それは危険である可能性があるため、CSP（コンテンツセキュリティポリシー）は禁止します。

それらのインラインスタイルを削除して、専用のスタイルシートに配置してみてください。

私は同じ問題を抱えており、それは./私のnode.jsアプリのディレクトリ名の前に使用することで解決されました、すなわち

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

私にとっては、勇敢なブラウザのipfs拡張機能が原因でした

ブラウザの拡張機能uBlockの設定「リモートフォントをブロックする」がこのエラーの原因になります。（注：少なくとも私にとっては、文法は問題ではありませんでした。）

通常、これは問題ではありません。リモートフォントがブロックされると、他のフォントにフォールバックし、「ERR_BLOCKED_BY_CLIENT」というコンソール警告が表示されます。ただし、アイコンがボックスとして表示されるため、サイトがFont Awesomeを使用している場合、これは深刻な問題になる可能性があります。

これを修正するためにWebサイトができることはあまりありません（ただし、フォントベースのアイコンにラベルを付けるなどして、悪質になるのを防ぐことができます）。CSPを変更（または追加）しても修正されません。（CDNではなく）Webサイトからフォントを提供しても、フォントは修正されません。

一方、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ファイルをnpmビルド後に作成されたangular distフォルダーに送信するために使用するコードの一部です。

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

に変更"/dist/"して修正しまし た"./dist/"

私の場合、create-react-appで生成されたアプリからsrc / registerServiceWorkerファイルを削除しました。追加しましたが、すべて正常に機能しています。