web-dev-qa-db-ja.com

フォント 'data：font / woff .....'のロードを拒否しました。これは、次のコンテンツセキュリティポリシーの指示に違反しています： "default-src 'self'"。その 'font-src'に注意してください

私の反応ウェブアプリケーションはブラウザコンソールでこのエラーを与える

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.

ブラウザコンソールのスクリーンショットenter image description here

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,
    }
};
javascriptreactjswebpack
58
JavaScript Learner

私にとっては、Chromeの拡張機能「Grammarly」が原因でした。それを無効にした後、私はエラーを得ませんでした。

138
Hydrogirl

それが価値があるもののために - 私はそれがChromeのアップデートに関連していると仮定して、私は同様の問題を抱えていた。

私はCDNを使用していたので私はfont-srcを追加し、それからURLを指定しなければなりませんでした

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

この特定のエラーを修正するには、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/">
15
nourish

個人的な経験から、アドオン/エクステンションの干渉を取り除くために、Incognito（Chrome）、Private Browsing（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';"

これは多くのエラーを引き起こしました。このサイトでプログラム的に実行しないように拡張機能に指示する方法についての回答をもっと探していました。このようにして人々がエクステンションを持っているとき、彼らは私のサイトでは走らないでしょう。これが可能であれば、広告ブロッカーはずっと前にサイトで禁止されていたでしょう。だから私の研究は少し素朴です。これが、他の回答で言及されている拡張機能のほんの一握りに特に関連しない問題を診断しようとする他の誰かに役立つことを願っています。

5
brightmatter

私は同様の問題を抱えていました。 angular.jsonで間違った出力フォルダパスを指定した

"outputPath": "dist/",

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

CSPは、信頼している情報をホワイトリストに登録するのに役立ちます。他のすべての情報源へのアクセスは許可されていません。 --- このQ&A をよく読んで、それから信頼できるのであれば、フォント、ソケット接続、その他の情報をホワイトリストに載せるようにしてください。

あなたが何をしているのか知っていれば、テストするためにmetaタグをコメントアウトすることができます。おそらくすべてうまくいくでしょう。しかし、あなた/あなたのユーザはここで保護されているので、metaタグを保持するのはおそらく良いことです。

1
Sventies

今日の私のノードアプリケーションでも同じエラーに直面していました。

enter image description here

以下が私のノード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'に変更した後、問題は解決しました。

1
Sibeesh Venu

私は同じ問題を抱えていた、それは私がしようとしていたファイルのディレクトリにエラーがあったことが判明しました：代わりに：

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

私は持っていました：

app.use(express.static('./dist'));
0
Ray Lin

私は同じ問題を抱えていて、./アプリのディレクトリ名の前にnode.jsを使うことで解決しました。

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

0
CriptoGirl

私は同様の問題に直面していました。

  1. デフォルトで選択されているすべてのCSPパラメータを削除し、各属性が必要な理由を理解する必要があります。

font-src - その後に指定されたsrcからフォントをロードするようブラウザに指示します。 font-src： 'self' - これは同じOriginまたはシステム内のフォントファミリをロードするように指示します。 font-src： 'self' data： - これは、同じOrigin内のload font-familyとデータ取得のための呼び出しを指示します。

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

font-src： 'self'フォント

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

0
Eshaan Kumar

あなたは多くの場所でインラインスタイルを使用していたでしょう、CSP（Content Security Policy）はそれが危険かもしれないので禁止します。

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

0
anoNewb

あなたのプロジェクトがvue-cliであなたがnpm run buildを実行するならば、あなたは変えるべきです

assetsPublicPath: '/'からassetsPublicPath'./'

0
chengheai