web-dev-qa-db-ja.com

次のコンテンツセキュリティポリシーディレクティブdefault-srcに違反しているため、フォント '<URL>'のロードが拒否されたため、default-srcがフォールバックとして使用されます

angular 6の平均スタックを使用してWebアプリを作成していますが、ブラウザコンソールにエラーメッセージが表示されます。

「次のコンテンツセキュリティポリシーディレクティブに違反しているため、フォント '<URL>'のロードが拒否されました：「default-src 'self'」。 'font-src'が明示的に設定されていないため、 'default-src'が使用されますフォールバックとして」

コード：

 getUsers() {
    return this._http.get("/api/users")
      .pipe(map(result => this.result = result.json().data));
  }
javascriptangularjsmean
4
Pramod

「自己」とデータを追加する：font-srcに追加するとうまくいきます。

Content-Security-Policy: font-src 'self' data:;
4
harpreet kaur

コンテンツセキュリティポリシーは、最新のブラウザがリモートリソースをロードするときに一連の制限を定義する方法です。

HTTPプロトコルからの応答ヘッダーは、これらのポリシーを設定できます。

Content-Security-Policyヘッダー（公式）、X-Content-Security-Policy（Mozilla FirefoxおよびIE10でサポート）およびX-WebKit-CSP（GoogleでサポートChromeおよびSafari）HTTP応答ヘッダーとコンテンツセキュリティポリシーディレクティブのリスト。（from seckit drupalモジュール ）

DOM内の要素のタイプごとに異なるポリシーを設定できます（例：<img>、<script>、<object>、<embed>、<iframe>など...）、その要素から発生するリクエストを制限します。

Screenshot of request with policy

したがって、変更する必要があります'self'を次のいずれかに変更します。

  • 'none'-任意のソースからのコンテンツをブロック
  • 'self'-ドメインのコンテンツのみを許可する
  • 'unsafe-inline'-特定のインラインコンテンツを許可します（注：ディレクティブのサブセットでサポートされています）
  • 'unsafe-eval'-デフォルトで制限されている文字列からコードへのAPIのセットを許可します（script-srcディレクティブでサポートされています）

ワイルドカード（*）を使用できます。

  • *-任意のソースからコンテンツをロードします
  • *.example.com-example.comとそのすべてのサブドメインからコンテンツを読み込みます
  • example.com:*-任意のポートを介してexample.comからコンテンツをロードします。 -
  • それ以外の場合は、Webサイトのデフォルトポートを使用します
2
JonnieJS

font-src MDNからの参照ドキュメント

Content-Security-Policyヘッダーは、APIによって設定されます。その値についてAPI応答を確認してください。エラーごとに、フォントはアプリケーションドメインとは異なるドメインから読み込まれたと思います。 APIがそのドメインをホワイトリストに登録しない限り、ブラウザーはフォントをロードしません。

例：

Content-Security-Policy: font-src https://example.com/
0
Anu