私のASP.NET Core MVC（ASP.NET Core 2）アプリケーションにawesomeというフォントを追加する際に問題が発生しました。私は単に、素晴らしいawesomeというCSSライブラリをMVCプロジェクトに追加しようとしています。私はそうASP.NET Core MVCアプリケーションで素晴らしいフォントを使用できないのはなぜですか？
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
のような素晴らしいCDNフォントを追加する二つのアプローチ ）を試してみましたが、私はCDNを追加するとき、私はChromeでCSPエラーが発生します
スタイルシートをロードするために拒否 'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' は、次のコンテンツセキュリティポリシーの指示に違反しているため、 "default-src 'self'"に違反しています。 'style-src'は明示的に設定されていないので、 'default-src'がフォールバックとして使用されます。
正しいメタタグを追加しようとしました。私はたくさんの組み合わせを試みましたが、何も動作していないようでした。たとえば、
<meta http-equiv="Content-Security-Policy"
content="script-src 'self' http://maxcdn.bootstrapcdn.com
'unsafe-inline' 'unsafe-eval';
style-src 'self' http://maxcdn.bootstrapcdn.com
'unsafe-inline' 'unsafe-eval'; " />
ChromeのCSPに関連するエラーがまだ発生していました。
2）私が取った2番目のアプローチは、私のプロジェクトに素晴らしいCSSファイルを追加することでした。私はこれをしなかったし、そのようにように対応する参照を追加しました：
GET http://localhost:5000/fonts/fontawesome-webfont.woff2?v=4.7.0 net::ERR_ABORTED
GET http://localhost:5000/fonts/fontawesome-webfont.woff?v=4.7.0 net::ERR_ABORTED
GET http://localhost:5000/fonts/fontawesome-webfont.ttf?v=4.7.0 404 (Not Found)
私は見て：私はこれをしなかった場合は
<link rel="stylesheet" href="~/css/font-awesome.min.css">
は、私は、ファイルの正しい場所にいると正しく参照されているにもかかわらず、次のエラーを得ましたこの問題が静的ファイルハンドラに関連する可能性があることが判明しました。私は、このようなオプションパラメータ取るapp.UseStaticFiles()を修正：
StaticFileOptions staticFileOptions = new StaticFileOptions();
FileExtensionContentTypeProvider typeProvider = new FileExtensionContentTypeProvider();
if (!typeProvider.Mappings.ContainsKey(".woff2"))
{
typeProvider.Mappings.Add(".woff2", "application/font-woff2");
}
if (!typeProvider.Mappings.ContainsKey(".woff"))
{
typeProvider.Mappings.Add(".woff", "application/font-woff");
}
if (!typeProvider.Mappings.ContainsKey(".ttf"))
{
typeProvider.Mappings.Add(".ttf", "application/font-ttf");
}
staticFileOptions.ContentTypeProvider = typeProvider;
app.UseStaticFiles(staticFileOptions);
をしかし、私はまだ上記のエラーを得ました。
誰かが私が間違っていることを知っていますか？私は、CDNで素晴らしいフォントを追加したり、必要に応じてフォントの素晴らしいCSSファイルをアプリケーションに追加したりすることができます。
あなたの文書は、 'default-src 'self''を持っていて' style-src'を持たないという点で比較的厳しいContent-Security-Policy HTTPヘッダーで提供されています。次に、ドキュメント自体に 'meta'要素を使って厳密ではない厳密なポリシーを指定します。しかし、複数のポリシーを指定するときにCSPが動作する方法は、最も厳しいポリシーが常に勝ちます。したがって、ブラウザは基本的に 'meta'ポリシーを無視し、HTTPヘッダーで指定されたポリシーを使用するだけです。この場合の唯一の解決策は、Content-Security-Policyヘッダーに異なる値を送信するようにサーバーコードを変更することです。 – sideshowbarker
もう少し詳しいことを教えてください。 Content-Security-Policyを指定した唯一の場所は、サーバー側のHTMLページのメタデータタグです。ヘッダーを変更するのは他に何ですか？私は2番目のアプローチを試みましたが、その後コードを削除しました。また、あなたがこれを答えに入れたり、動いている答えにつなげるなら、私はそれを受け入れます。 –
詳細については、ドキュメントのレスポンスヘッダーを見ると、Content-Security-Policyヘッダが見つかるはずです。これらのヘッダーを表示するには、ブラウザのdevtoolsでネットワークペインを開き、ドキュメントを再読み込みしてそこの応答を調べるか、レスポンスのHTTPヘッダーを調べるためのPostmanや 'curl'などのコマンドラインツールを使用します。だからあなたがContent-Security-Policyヘッダーを見つけても、サーバーサイドのコードがそれをレスポンスに追加する場所/方法がわからないなら、おそらく別の新しい質問を投稿して。 – sideshowbarker